@spectrum-web-components/dropzone 0.44.0 → 0.46.0

package/README.md

@@ -29,8 +29,8 @@ import { Dropzone } from '@spectrum-web-components/dropzone';
 ## Example
 
 ```html
-<sp-dropzone id="dropzone-1" style="width: 400px; height: 200px">
-    <sp-illustrated-message heading="Drag and Drop Your File">
+<sp-dropzone id="dropzone-1" style="width: 400px;">
+    <sp-illustrated-message heading="Drag and drop your file">
         <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 150 103"
@@ -69,8 +69,8 @@ import { Dropzone } from '@spectrum-web-components/dropzone';
 When a file is dragged over the `<sp-dropzone>` element, it will display with the `dragged` attribute, as follows:
 
 ```html
-<sp-dropzone id="dropzone" dragged style="width: 400px; height: 200px">
-    <sp-illustrated-message heading="Drag and Drop Your File">
+<sp-dropzone id="dropzone" dragged style="width: 400px;">
+    <sp-illustrated-message heading="Drag and drop your file">
         <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 150 103"
@@ -104,6 +104,132 @@ When a file is dragged over the `<sp-dropzone>` element, it will display with th
 </sp-dropzone>
 ```
 
+### Filled
+
+When the `<sp-dropzone>` is in a filled state, set the `filled` attribute, as follows:
+
+```html-live
+
+<sp-action-button draggable="true" style="margin-block-end: 16px;">
+    Drag me
+</sp-action-button>
+<sp-dropzone tabindex="0" id="dropzone" drop-effect="copy">
+    <sp-illustrated-message style="--mod-illustrated-message-display: flex;" heading="Drag and drop your file" id="message">
+     <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 150 103"
+            width="150"
+            height="103"
+        >
+            <path
+                d="M133.7,8.5h-118c-1.9,0-3.5,1.6-3.5,3.5v27c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V23.5h119V92c0,0.3-0.2,0.5-0.5,0.5h-118c-0.3,0-0.5-0.2-0.5-0.5V69c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v23c0,1.9,1.6,3.5,3.5,3.5h118c1.9,0,3.5-1.6,3.5-3.5V12C137.2,10.1,135.6,8.5,133.7,8.5z M15.2,21.5V12c0-0.3,0.2-0.5,0.5-0.5h118c0.3,0,0.5,0.2,0.5,0.5v9.5H15.2z M32.6,16.5c0,0.6-0.4,1-1,1h-10c-0.6,0-1-0.4-1-1s0.4-1,1-1h10C32.2,15.5,32.6,15.9,32.6,16.5z M13.6,56.1l-8.6,8.5C4.8,65,4.4,65.1,4,65.1c-0.4,0-0.8-0.1-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1l8.6-8.5l-8.6-8.5c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l8.6,8.5l8.6-8.5c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L15.8,54l8.6,8.5c0.6,0.6,0.6,1.5,0,2.1c-0.3,0.3-0.7,0.4-1.1,0.4c-0.4,0-0.8-0.1-1.1-0.4L13.6,56.1z"
+            ></path>
+        </svg>
+    </sp-illustrated-message>
+    <div>
+        <label for="file-input">
+            <sp-link
+                href="javascript:;"
+                onclick="this.parentElement.nextElementSibling.click()"
+            >
+                Select a File
+            </sp-link>
+            from your computer
+        </label>
+        <input type="file" id="file-input" style="display: none" />
+    </div>
+    <div>
+        or
+        <sp-link href="http://stock.adobe.com" target="blank">
+            Search Adobe Stock
+        </sp-link>
+    </div>
+</sp-dropzone>
+
+<script type="module">
+    customElements.whenDefined('sp-dropzone').then(() => {
+        const dropzone = document.getElementById('dropzone');
+        const message = document.getElementById('message');
+        const fileInput = document.getElementById('file-input');
+        let input;
+        let beingDraggedOver = false;
+
+        const updateMessage = () => {
+            message.heading = input !== undefined
+                ? (beingDraggedOver ? 'Drop here to replace!' : 'You dropped something!')
+                : 'Drag and drop your file';
+        };
+
+        const handleDropOrChange = () => {
+            input = 'mock-file';
+            dropzone.setAttribute("filled", true);
+            beingDraggedOver = false;
+            updateMessage();
+        };
+
+        dropzone.addEventListener('dragover', (event) => {
+            event.preventDefault();
+            beingDraggedOver = true;
+            updateMessage();
+        });
+
+        dropzone.addEventListener('dragleave', () => {
+            beingDraggedOver = false;
+            updateMessage();
+        });
+
+        dropzone.addEventListener('drop', (event) => {
+            event.preventDefault();
+            handleDropOrChange();
+        });
+
+        fileInput.addEventListener('change', handleDropOrChange);
+    });
+</script>
+
+```
+
+<script type="module">
+    customElements.whenDefined('sp-dropzone').then(() => {
+        const dropzone = document.getElementById('dropzone');
+        const message = document.getElementById('message');
+        const fileInput = document.getElementById('file-input');
+        let input;
+        let beingDraggedOver = false;
+
+        const updateMessage = () => {
+            message.heading = input !== undefined
+                ? (beingDraggedOver ? 'Drop here to replace!' : 'You dropped something!')
+                : 'Drag and drop your file';
+        };
+
+        const handleDropOrChange = () => {
+            input = 'mock-file';
+            dropzone.setAttribute("filled", true);
+            beingDraggedOver = false;
+            updateMessage();
+        };
+
+        dropzone.addEventListener('dragover', (event) => {
+            event.preventDefault();
+            beingDraggedOver = true;
+            updateMessage();
+        });
+
+        dropzone.addEventListener('dragleave', () => {
+            beingDraggedOver = false;
+            updateMessage();
+        });
+
+        dropzone.addEventListener('drop', (event) => {
+            event.preventDefault();
+            handleDropOrChange();
+        });
+
+        fileInput.addEventListener('change', handleDropOrChange);
+    });
+</script>
+
 ## Accessibility
 
 When actions, e.g. copy/paste, can be enacted directly on the `<sp-dropzone>` element itself, be sure to supply a `tabindex` so that keyboard users can find this interaction in the tab order. For screen readers, be sure to announce what the actions are, how to complete them, and when they are completed by supplying the appropriate `role` and `aria-label` attributes.

package/custom-elements.json

@@ -59,9 +59,21 @@
               },
               "privacy": "public",
               "default": "false",
+              "description": "Indicates that files are currently being dragged over the dropzone.",
               "attribute": "dragged",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "isFilled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Set this property to indicate that the component is in a filled state.",
+              "attribute": "filled"
+            },
             {
               "kind": "field",
               "name": "debouncedDragLeave",
@@ -169,7 +181,17 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Indicates that files are currently being dragged over the dropzone.",
               "fieldName": "isDragged"
+            },
+            {
+              "name": "filled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Set this property to indicate that the component is in a filled state.",
+              "fieldName": "isFilled"
             }
           ],
           "superclass": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/dropzone",
-    "version": "0.44.0",
+    "version": "0.46.0",
     "publishConfig": {
         "access": "public"
     },
@@ -57,7 +57,7 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.44.0"
+        "@spectrum-web-components/base": "^0.46.0"
     },
     "devDependencies": {
         "@spectrum-css/dropzone": "^6.1.0"
@@ -68,5 +68,5 @@
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "0002d42ce82463b85022e5aa5f7aba8484cba096"
+    "gitHead": "ab84b447210de593649b086a1605abf1be1d64f2"
 }

package/src/Dropzone.d.ts

@@ -25,7 +25,14 @@ export declare class Dropzone extends SpectrumElement {
     get dropEffect(): DropEffects;
     set dropEffect(value: DropEffects);
     private _dropEffect;
+    /**
+     * Indicates that files are currently being dragged over the dropzone.
+     */
     isDragged: boolean;
+    /**
+     * Set this property to indicate that the component is in a filled state.
+     */
+    isFilled: boolean;
     private debouncedDragLeave;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/src/Dropzone.dev.js

@@ -20,6 +20,7 @@ export class Dropzone extends SpectrumElement {
     super(...arguments);
     this._dropEffect = "copy";
     this.isDragged = false;
+    this.isFilled = false;
     this.debouncedDragLeave = null;
   }
   static get styles() {
@@ -114,4 +115,7 @@ export class Dropzone extends SpectrumElement {
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "dragged" })
 ], Dropzone.prototype, "isDragged", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "filled" })
+], Dropzone.prototype, "isFilled", 2);
 //# sourceMappingURL=Dropzone.dev.js.map

package/src/Dropzone.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["Dropzone.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport dropzoneStyles from './dropzone.css.js';\n\nexport type DropzoneEventDetail = DragEvent;\n\nexport type DropEffects = 'copy' | 'move' | 'link' | 'none';\n\n/**\n * @element sp-dropzone\n *\n * @slot - The default slot on an `sp-dropzone` is a great place to place upload instructions\n * built with an `sp-illustrated-message` or other information, possibly even built from data\n * provided by the upload, to support users successfully interacting with the drag and drop\n * based features of your application\n *\n * @fires sp-dropzone-should-accept - A cancellable event that confirms whether or not\n * a file dropped on the UI should be accepted.\n * @fires sp-dropzone-dragover - Announces when files have been dragged over the UI, but not yet dropped.\n * @fires sp-dropzone-dragleave - Announces when dragged files have been moved out of the UI without having been dropped.\n * @fires sp-dropzone-drop - Announces when dragged files have been dropped on the UI.\n */\nexport class Dropzone extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [dropzoneStyles];\n    }\n\n    /**\n     * Controls the feedback (typically visual) the user is given during a drag and drop operation\n     * @attr\n     * @type {'copy' | 'move' | 'link' | 'none'}\n     */\n    public get dropEffect(): DropEffects {\n        return this._dropEffect;\n    }\n    public set dropEffect(value: DropEffects) {\n        if (['copy', 'move', 'link', 'none'].includes(value)) {\n            this._dropEffect = value;\n        }\n    }\n    private _dropEffect: DropEffects = 'copy';\n\n    @property({ type: Boolean, reflect: true, attribute: 'dragged' })\n    public isDragged = false;\n\n    private debouncedDragLeave: number | null = null;\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n\n        this.addEventListener('drop', this.onDrop);\n        this.addEventListener('dragover', this.onDragOver);\n        this.addEventListener('dragleave', this.onDragLeave);\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n\n        this.removeEventListener('drop', this.onDrop);\n        this.removeEventListener('dragover', this.onDragOver);\n        this.removeEventListener('dragleave', this.onDragLeave);\n    }\n\n    public onDragOver(event: DragEvent): void {\n        const shouldAcceptEvent = new CustomEvent('sp-dropzone-should-accept', {\n            bubbles: true,\n            cancelable: true,\n            composed: true,\n            detail: event,\n        });\n        const shouldAccept = this.dispatchEvent(shouldAcceptEvent);\n        if (!event.dataTransfer) {\n            return;\n        }\n        if (!shouldAccept) {\n            event.dataTransfer.dropEffect = 'none';\n            return;\n        }\n\n        event.preventDefault();\n\n        this.clearDebouncedDragLeave();\n\n        this.isDragged = true;\n\n        event.dataTransfer.dropEffect = this.dropEffect;\n        const dragOverEvent = new CustomEvent('sp-dropzone-dragover', {\n            bubbles: true,\n            composed: true,\n            detail: event,\n        });\n        this.dispatchEvent(dragOverEvent);\n    }\n\n    public onDragLeave(event: DragEvent): void {\n        this.clearDebouncedDragLeave();\n\n        this.debouncedDragLeave = window.setTimeout(() => {\n            this.isDragged = false;\n\n            const dragLeave = new CustomEvent('sp-dropzone-dragleave', {\n                bubbles: true,\n                composed: true,\n                detail: event,\n            });\n            this.dispatchEvent(dragLeave);\n        }, 100);\n    }\n\n    public onDrop(event: DragEvent): void {\n        event.preventDefault();\n\n        this.clearDebouncedDragLeave();\n\n        this.isDragged = false;\n        const dropEvent = new CustomEvent('sp-dropzone-drop', {\n            bubbles: true,\n            composed: true,\n            detail: event,\n        });\n        this.dispatchEvent(dropEvent);\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <slot></slot>\n        `;\n    }\n\n    protected clearDebouncedDragLeave(): void {\n        if (this.debouncedDragLeave) {\n            clearTimeout(this.debouncedDragLeave);\n            this.debouncedDragLeave = null;\n        }\n    }\n}\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        'sp-dropzone:should-accept': CustomEvent<DragEvent>;\n        'sp-dropzone:dragover': CustomEvent<DragEvent>;\n        'sp-dropzone:dragleave': CustomEvent<DragEvent>;\n        'sp-dropzone:drop': CustomEvent<DragEvent>;\n    }\n}\n"],
-  "mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,OAEG;AACP,SAAS,gBAAgB;AAEzB,OAAO,oBAAoB;AAoBpB,aAAM,iBAAiB,gBAAgB;AAAA,EAAvC;AAAA;AAkBH,SAAQ,cAA2B;AAGnC,SAAO,YAAY;AAEnB,SAAQ,qBAAoC;AAAA;AAAA,EAtB5C,WAA2B,SAAyB;AAChD,WAAO,CAAC,cAAc;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAW,aAA0B;AACjC,WAAO,KAAK;AAAA,EAChB;AAAA,EACA,IAAW,WAAW,OAAoB;AACtC,QAAI,CAAC,QAAQ,QAAQ,QAAQ,MAAM,EAAE,SAAS,KAAK,GAAG;AAClD,WAAK,cAAc;AAAA,IACvB;AAAA,EACJ;AAAA,EAQgB,oBAA0B;AACtC,UAAM,kBAAkB;AAExB,SAAK,iBAAiB,QAAQ,KAAK,MAAM;AACzC,SAAK,iBAAiB,YAAY,KAAK,UAAU;AACjD,SAAK,iBAAiB,aAAa,KAAK,WAAW;AAAA,EACvD;AAAA,EAEgB,uBAA6B;AACzC,UAAM,qBAAqB;AAE3B,SAAK,oBAAoB,QAAQ,KAAK,MAAM;AAC5C,SAAK,oBAAoB,YAAY,KAAK,UAAU;AACpD,SAAK,oBAAoB,aAAa,KAAK,WAAW;AAAA,EAC1D;AAAA,EAEO,WAAW,OAAwB;AACtC,UAAM,oBAAoB,IAAI,YAAY,6BAA6B;AAAA,MACnE,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,QAAQ;AAAA,IACZ,CAAC;AACD,UAAM,eAAe,KAAK,cAAc,iBAAiB;AACzD,QAAI,CAAC,MAAM,cAAc;AACrB;AAAA,IACJ;AACA,QAAI,CAAC,cAAc;AACf,YAAM,aAAa,aAAa;AAChC;AAAA,IACJ;AAEA,UAAM,eAAe;AAErB,SAAK,wBAAwB;AAE7B,SAAK,YAAY;AAEjB,UAAM,aAAa,aAAa,KAAK;AACrC,UAAM,gBAAgB,IAAI,YAAY,wBAAwB;AAAA,MAC1D,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IACZ,CAAC;AACD,SAAK,cAAc,aAAa;AAAA,EACpC;AAAA,EAEO,YAAY,OAAwB;AACvC,SAAK,wBAAwB;AAE7B,SAAK,qBAAqB,OAAO,WAAW,MAAM;AAC9C,WAAK,YAAY;AAEjB,YAAM,YAAY,IAAI,YAAY,yBAAyB;AAAA,QACvD,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ;AAAA,MACZ,CAAC;AACD,WAAK,cAAc,SAAS;AAAA,IAChC,GAAG,GAAG;AAAA,EACV;AAAA,EAEO,OAAO,OAAwB;AAClC,UAAM,eAAe;AAErB,SAAK,wBAAwB;AAE7B,SAAK,YAAY;AACjB,UAAM,YAAY,IAAI,YAAY,oBAAoB;AAAA,MAClD,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IACZ,CAAC;AACD,SAAK,cAAc,SAAS;AAAA,EAChC;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA,EAGX;AAAA,EAEU,0BAAgC;AACtC,QAAI,KAAK,oBAAoB;AACzB,mBAAa,KAAK,kBAAkB;AACpC,WAAK,qBAAqB;AAAA,IAC9B;AAAA,EACJ;AACJ;AA5FW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,UAAU,CAAC;AAAA,GApBvD,SAqBF;",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport dropzoneStyles from './dropzone.css.js';\n\nexport type DropzoneEventDetail = DragEvent;\n\nexport type DropEffects = 'copy' | 'move' | 'link' | 'none';\n\n/**\n * @element sp-dropzone\n *\n * @slot - The default slot on an `sp-dropzone` is a great place to place upload instructions\n * built with an `sp-illustrated-message` or other information, possibly even built from data\n * provided by the upload, to support users successfully interacting with the drag and drop\n * based features of your application\n *\n * @fires sp-dropzone-should-accept - A cancellable event that confirms whether or not\n * a file dropped on the UI should be accepted.\n * @fires sp-dropzone-dragover - Announces when files have been dragged over the UI, but not yet dropped.\n * @fires sp-dropzone-dragleave - Announces when dragged files have been moved out of the UI without having been dropped.\n * @fires sp-dropzone-drop - Announces when dragged files have been dropped on the UI.\n */\nexport class Dropzone extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [dropzoneStyles];\n    }\n\n    /**\n     * Controls the feedback (typically visual) the user is given during a drag and drop operation\n     * @attr\n     * @type {'copy' | 'move' | 'link' | 'none'}\n     */\n    public get dropEffect(): DropEffects {\n        return this._dropEffect;\n    }\n    public set dropEffect(value: DropEffects) {\n        if (['copy', 'move', 'link', 'none'].includes(value)) {\n            this._dropEffect = value;\n        }\n    }\n    private _dropEffect: DropEffects = 'copy';\n\n    /**\n     * Indicates that files are currently being dragged over the dropzone.\n     */\n    @property({ type: Boolean, reflect: true, attribute: 'dragged' })\n    public isDragged = false;\n\n    /**\n     * Set this property to indicate that the component is in a filled state.\n     */\n    @property({ type: Boolean, attribute: 'filled' })\n    public isFilled = false;\n\n    private debouncedDragLeave: number | null = null;\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n\n        this.addEventListener('drop', this.onDrop);\n        this.addEventListener('dragover', this.onDragOver);\n        this.addEventListener('dragleave', this.onDragLeave);\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n\n        this.removeEventListener('drop', this.onDrop);\n        this.removeEventListener('dragover', this.onDragOver);\n        this.removeEventListener('dragleave', this.onDragLeave);\n    }\n\n    public onDragOver(event: DragEvent): void {\n        const shouldAcceptEvent = new CustomEvent('sp-dropzone-should-accept', {\n            bubbles: true,\n            cancelable: true,\n            composed: true,\n            detail: event,\n        });\n        const shouldAccept = this.dispatchEvent(shouldAcceptEvent);\n        if (!event.dataTransfer) {\n            return;\n        }\n        if (!shouldAccept) {\n            event.dataTransfer.dropEffect = 'none';\n            return;\n        }\n\n        event.preventDefault();\n\n        this.clearDebouncedDragLeave();\n\n        this.isDragged = true;\n\n        event.dataTransfer.dropEffect = this.dropEffect;\n        const dragOverEvent = new CustomEvent('sp-dropzone-dragover', {\n            bubbles: true,\n            composed: true,\n            detail: event,\n        });\n        this.dispatchEvent(dragOverEvent);\n    }\n\n    public onDragLeave(event: DragEvent): void {\n        this.clearDebouncedDragLeave();\n\n        this.debouncedDragLeave = window.setTimeout(() => {\n            this.isDragged = false;\n\n            const dragLeave = new CustomEvent('sp-dropzone-dragleave', {\n                bubbles: true,\n                composed: true,\n                detail: event,\n            });\n            this.dispatchEvent(dragLeave);\n        }, 100);\n    }\n\n    public onDrop(event: DragEvent): void {\n        event.preventDefault();\n\n        this.clearDebouncedDragLeave();\n\n        this.isDragged = false;\n        const dropEvent = new CustomEvent('sp-dropzone-drop', {\n            bubbles: true,\n            composed: true,\n            detail: event,\n        });\n        this.dispatchEvent(dropEvent);\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <slot></slot>\n        `;\n    }\n\n    protected clearDebouncedDragLeave(): void {\n        if (this.debouncedDragLeave) {\n            clearTimeout(this.debouncedDragLeave);\n            this.debouncedDragLeave = null;\n        }\n    }\n}\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        'sp-dropzone:should-accept': CustomEvent<DragEvent>;\n        'sp-dropzone:dragover': CustomEvent<DragEvent>;\n        'sp-dropzone:dragleave': CustomEvent<DragEvent>;\n        'sp-dropzone:drop': CustomEvent<DragEvent>;\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,OAEG;AACP,SAAS,gBAAgB;AAEzB,OAAO,oBAAoB;AAoBpB,aAAM,iBAAiB,gBAAgB;AAAA,EAAvC;AAAA;AAkBH,SAAQ,cAA2B;AAMnC,SAAO,YAAY;AAMnB,SAAO,WAAW;AAElB,SAAQ,qBAAoC;AAAA;AAAA,EA/B5C,WAA2B,SAAyB;AAChD,WAAO,CAAC,cAAc;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAW,aAA0B;AACjC,WAAO,KAAK;AAAA,EAChB;AAAA,EACA,IAAW,WAAW,OAAoB;AACtC,QAAI,CAAC,QAAQ,QAAQ,QAAQ,MAAM,EAAE,SAAS,KAAK,GAAG;AAClD,WAAK,cAAc;AAAA,IACvB;AAAA,EACJ;AAAA,EAiBgB,oBAA0B;AACtC,UAAM,kBAAkB;AAExB,SAAK,iBAAiB,QAAQ,KAAK,MAAM;AACzC,SAAK,iBAAiB,YAAY,KAAK,UAAU;AACjD,SAAK,iBAAiB,aAAa,KAAK,WAAW;AAAA,EACvD;AAAA,EAEgB,uBAA6B;AACzC,UAAM,qBAAqB;AAE3B,SAAK,oBAAoB,QAAQ,KAAK,MAAM;AAC5C,SAAK,oBAAoB,YAAY,KAAK,UAAU;AACpD,SAAK,oBAAoB,aAAa,KAAK,WAAW;AAAA,EAC1D;AAAA,EAEO,WAAW,OAAwB;AACtC,UAAM,oBAAoB,IAAI,YAAY,6BAA6B;AAAA,MACnE,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,QAAQ;AAAA,IACZ,CAAC;AACD,UAAM,eAAe,KAAK,cAAc,iBAAiB;AACzD,QAAI,CAAC,MAAM,cAAc;AACrB;AAAA,IACJ;AACA,QAAI,CAAC,cAAc;AACf,YAAM,aAAa,aAAa;AAChC;AAAA,IACJ;AAEA,UAAM,eAAe;AAErB,SAAK,wBAAwB;AAE7B,SAAK,YAAY;AAEjB,UAAM,aAAa,aAAa,KAAK;AACrC,UAAM,gBAAgB,IAAI,YAAY,wBAAwB;AAAA,MAC1D,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IACZ,CAAC;AACD,SAAK,cAAc,aAAa;AAAA,EACpC;AAAA,EAEO,YAAY,OAAwB;AACvC,SAAK,wBAAwB;AAE7B,SAAK,qBAAqB,OAAO,WAAW,MAAM;AAC9C,WAAK,YAAY;AAEjB,YAAM,YAAY,IAAI,YAAY,yBAAyB;AAAA,QACvD,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ;AAAA,MACZ,CAAC;AACD,WAAK,cAAc,SAAS;AAAA,IAChC,GAAG,GAAG;AAAA,EACV;AAAA,EAEO,OAAO,OAAwB;AAClC,UAAM,eAAe;AAErB,SAAK,wBAAwB;AAE7B,SAAK,YAAY;AACjB,UAAM,YAAY,IAAI,YAAY,oBAAoB;AAAA,MAClD,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IACZ,CAAC;AACD,SAAK,cAAc,SAAS;AAAA,EAChC;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA;AAAA;AAAA,EAGX;AAAA,EAEU,0BAAgC;AACtC,QAAI,KAAK,oBAAoB;AACzB,mBAAa,KAAK,kBAAkB;AACpC,WAAK,qBAAqB;AAAA,IAC9B;AAAA,EACJ;AACJ;AAlGW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,UAAU,CAAC;AAAA,GAvBvD,SAwBF;AAMA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,WAAW,SAAS,CAAC;AAAA,GA7BvC,SA8BF;",
   "names": []
 }

package/src/Dropzone.js

@@ -1,4 +1,4 @@
-"use strict";var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=(n,o,e,t)=>{for(var r=t>1?void 0:t?p(o,e):o,a=n.length-1,s;a>=0;a--)(s=n[a])&&(r=(t?s(o,e,r):s(r))||r);return t&&r&&i(o,e,r),r};import{html as c,SpectrumElement as l}from"@spectrum-web-components/base";import{property as v}from"@spectrum-web-components/base/src/decorators.js";import u from"./dropzone.css.js";export class Dropzone extends l{constructor(){super(...arguments);this._dropEffect="copy";this.isDragged=!1;this.debouncedDragLeave=null}static get styles(){return[u]}get dropEffect(){return this._dropEffect}set dropEffect(e){["copy","move","link","none"].includes(e)&&(this._dropEffect=e)}connectedCallback(){super.connectedCallback(),this.addEventListener("drop",this.onDrop),this.addEventListener("dragover",this.onDragOver),this.addEventListener("dragleave",this.onDragLeave)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("drop",this.onDrop),this.removeEventListener("dragover",this.onDragOver),this.removeEventListener("dragleave",this.onDragLeave)}onDragOver(e){const t=new CustomEvent("sp-dropzone-should-accept",{bubbles:!0,cancelable:!0,composed:!0,detail:e}),r=this.dispatchEvent(t);if(!e.dataTransfer)return;if(!r){e.dataTransfer.dropEffect="none";return}e.preventDefault(),this.clearDebouncedDragLeave(),this.isDragged=!0,e.dataTransfer.dropEffect=this.dropEffect;const a=new CustomEvent("sp-dropzone-dragover",{bubbles:!0,composed:!0,detail:e});this.dispatchEvent(a)}onDragLeave(e){this.clearDebouncedDragLeave(),this.debouncedDragLeave=window.setTimeout(()=>{this.isDragged=!1;const t=new CustomEvent("sp-dropzone-dragleave",{bubbles:!0,composed:!0,detail:e});this.dispatchEvent(t)},100)}onDrop(e){e.preventDefault(),this.clearDebouncedDragLeave(),this.isDragged=!1;const t=new CustomEvent("sp-dropzone-drop",{bubbles:!0,composed:!0,detail:e});this.dispatchEvent(t)}render(){return c`
+"use strict";var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(s,o,e,t)=>{for(var r=t>1?void 0:t?c(o,e):o,a=s.length-1,n;a>=0;a--)(n=s[a])&&(r=(t?n(o,e,r):n(r))||r);return t&&r&&p(o,e,r),r};import{html as l,SpectrumElement as v}from"@spectrum-web-components/base";import{property as i}from"@spectrum-web-components/base/src/decorators.js";import u from"./dropzone.css.js";export class Dropzone extends v{constructor(){super(...arguments);this._dropEffect="copy";this.isDragged=!1;this.isFilled=!1;this.debouncedDragLeave=null}static get styles(){return[u]}get dropEffect(){return this._dropEffect}set dropEffect(e){["copy","move","link","none"].includes(e)&&(this._dropEffect=e)}connectedCallback(){super.connectedCallback(),this.addEventListener("drop",this.onDrop),this.addEventListener("dragover",this.onDragOver),this.addEventListener("dragleave",this.onDragLeave)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("drop",this.onDrop),this.removeEventListener("dragover",this.onDragOver),this.removeEventListener("dragleave",this.onDragLeave)}onDragOver(e){const t=new CustomEvent("sp-dropzone-should-accept",{bubbles:!0,cancelable:!0,composed:!0,detail:e}),r=this.dispatchEvent(t);if(!e.dataTransfer)return;if(!r){e.dataTransfer.dropEffect="none";return}e.preventDefault(),this.clearDebouncedDragLeave(),this.isDragged=!0,e.dataTransfer.dropEffect=this.dropEffect;const a=new CustomEvent("sp-dropzone-dragover",{bubbles:!0,composed:!0,detail:e});this.dispatchEvent(a)}onDragLeave(e){this.clearDebouncedDragLeave(),this.debouncedDragLeave=window.setTimeout(()=>{this.isDragged=!1;const t=new CustomEvent("sp-dropzone-dragleave",{bubbles:!0,composed:!0,detail:e});this.dispatchEvent(t)},100)}onDrop(e){e.preventDefault(),this.clearDebouncedDragLeave(),this.isDragged=!1;const t=new CustomEvent("sp-dropzone-drop",{bubbles:!0,composed:!0,detail:e});this.dispatchEvent(t)}render(){return l`
             <slot></slot>
-        `}clearDebouncedDragLeave(){this.debouncedDragLeave&&(clearTimeout(this.debouncedDragLeave),this.debouncedDragLeave=null)}}d([v({type:Boolean,reflect:!0,attribute:"dragged"})],Dropzone.prototype,"isDragged",2);
+        `}clearDebouncedDragLeave(){this.debouncedDragLeave&&(clearTimeout(this.debouncedDragLeave),this.debouncedDragLeave=null)}}d([i({type:Boolean,reflect:!0,attribute:"dragged"})],Dropzone.prototype,"isDragged",2),d([i({type:Boolean,attribute:"filled"})],Dropzone.prototype,"isFilled",2);
 //# sourceMappingURL=Dropzone.js.map

package/src/Dropzone.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["Dropzone.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport dropzoneStyles from './dropzone.css.js';\n\nexport type DropzoneEventDetail = DragEvent;\n\nexport type DropEffects = 'copy' | 'move' | 'link' | 'none';\n\n/**\n * @element sp-dropzone\n *\n * @slot - The default slot on an `sp-dropzone` is a great place to place upload instructions\n * built with an `sp-illustrated-message` or other information, possibly even built from data\n * provided by the upload, to support users successfully interacting with the drag and drop\n * based features of your application\n *\n * @fires sp-dropzone-should-accept - A cancellable event that confirms whether or not\n * a file dropped on the UI should be accepted.\n * @fires sp-dropzone-dragover - Announces when files have been dragged over the UI, but not yet dropped.\n * @fires sp-dropzone-dragleave - Announces when dragged files have been moved out of the UI without having been dropped.\n * @fires sp-dropzone-drop - Announces when dragged files have been dropped on the UI.\n */\nexport class Dropzone extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [dropzoneStyles];\n    }\n\n    /**\n     * Controls the feedback (typically visual) the user is given during a drag and drop operation\n     * @attr\n     * @type {'copy' | 'move' | 'link' | 'none'}\n     */\n    public get dropEffect(): DropEffects {\n        return this._dropEffect;\n    }\n    public set dropEffect(value: DropEffects) {\n        if (['copy', 'move', 'link', 'none'].includes(value)) {\n            this._dropEffect = value;\n        }\n    }\n    private _dropEffect: DropEffects = 'copy';\n\n    @property({ type: Boolean, reflect: true, attribute: 'dragged' })\n    public isDragged = false;\n\n    private debouncedDragLeave: number | null = null;\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n\n        this.addEventListener('drop', this.onDrop);\n        this.addEventListener('dragover', this.onDragOver);\n        this.addEventListener('dragleave', this.onDragLeave);\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n\n        this.removeEventListener('drop', this.onDrop);\n        this.removeEventListener('dragover', this.onDragOver);\n        this.removeEventListener('dragleave', this.onDragLeave);\n    }\n\n    public onDragOver(event: DragEvent): void {\n        const shouldAcceptEvent = new CustomEvent('sp-dropzone-should-accept', {\n            bubbles: true,\n            cancelable: true,\n            composed: true,\n            detail: event,\n        });\n        const shouldAccept = this.dispatchEvent(shouldAcceptEvent);\n        if (!event.dataTransfer) {\n            return;\n        }\n        if (!shouldAccept) {\n            event.dataTransfer.dropEffect = 'none';\n            return;\n        }\n\n        event.preventDefault();\n\n        this.clearDebouncedDragLeave();\n\n        this.isDragged = true;\n\n        event.dataTransfer.dropEffect = this.dropEffect;\n        const dragOverEvent = new CustomEvent('sp-dropzone-dragover', {\n            bubbles: true,\n            composed: true,\n            detail: event,\n        });\n        this.dispatchEvent(dragOverEvent);\n    }\n\n    public onDragLeave(event: DragEvent): void {\n        this.clearDebouncedDragLeave();\n\n        this.debouncedDragLeave = window.setTimeout(() => {\n            this.isDragged = false;\n\n            const dragLeave = new CustomEvent('sp-dropzone-dragleave', {\n                bubbles: true,\n                composed: true,\n                detail: event,\n            });\n            this.dispatchEvent(dragLeave);\n        }, 100);\n    }\n\n    public onDrop(event: DragEvent): void {\n        event.preventDefault();\n\n        this.clearDebouncedDragLeave();\n\n        this.isDragged = false;\n        const dropEvent = new CustomEvent('sp-dropzone-drop', {\n            bubbles: true,\n            composed: true,\n            detail: event,\n        });\n        this.dispatchEvent(dropEvent);\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <slot></slot>\n        `;\n    }\n\n    protected clearDebouncedDragLeave(): void {\n        if (this.debouncedDragLeave) {\n            clearTimeout(this.debouncedDragLeave);\n            this.debouncedDragLeave = null;\n        }\n    }\n}\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        'sp-dropzone:should-accept': CustomEvent<DragEvent>;\n        'sp-dropzone:dragover': CustomEvent<DragEvent>;\n        'sp-dropzone:dragleave': CustomEvent<DragEvent>;\n        'sp-dropzone:drop': CustomEvent<DragEvent>;\n    }\n}\n"],
-  "mappings": "qNAYA,OAEI,QAAAA,EACA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDAEzB,OAAOC,MAAoB,oBAoBpB,aAAM,iBAAiBF,CAAgB,CAAvC,kCAkBH,KAAQ,YAA2B,OAGnC,KAAO,UAAY,GAEnB,KAAQ,mBAAoC,KAtB5C,WAA2B,QAAyB,CAChD,MAAO,CAACE,CAAc,CAC1B,CAOA,IAAW,YAA0B,CACjC,OAAO,KAAK,WAChB,CACA,IAAW,WAAWC,EAAoB,CAClC,CAAC,OAAQ,OAAQ,OAAQ,MAAM,EAAE,SAASA,CAAK,IAC/C,KAAK,YAAcA,EAE3B,CAQgB,mBAA0B,CACtC,MAAM,kBAAkB,EAExB,KAAK,iBAAiB,OAAQ,KAAK,MAAM,EACzC,KAAK,iBAAiB,WAAY,KAAK,UAAU,EACjD,KAAK,iBAAiB,YAAa,KAAK,WAAW,CACvD,CAEgB,sBAA6B,CACzC,MAAM,qBAAqB,EAE3B,KAAK,oBAAoB,OAAQ,KAAK,MAAM,EAC5C,KAAK,oBAAoB,WAAY,KAAK,UAAU,EACpD,KAAK,oBAAoB,YAAa,KAAK,WAAW,CAC1D,CAEO,WAAWC,EAAwB,CACtC,MAAMC,EAAoB,IAAI,YAAY,4BAA6B,CACnE,QAAS,GACT,WAAY,GACZ,SAAU,GACV,OAAQD,CACZ,CAAC,EACKE,EAAe,KAAK,cAAcD,CAAiB,EACzD,GAAI,CAACD,EAAM,aACP,OAEJ,GAAI,CAACE,EAAc,CACfF,EAAM,aAAa,WAAa,OAChC,MACJ,CAEAA,EAAM,eAAe,EAErB,KAAK,wBAAwB,EAE7B,KAAK,UAAY,GAEjBA,EAAM,aAAa,WAAa,KAAK,WACrC,MAAMG,EAAgB,IAAI,YAAY,uBAAwB,CAC1D,QAAS,GACT,SAAU,GACV,OAAQH,CACZ,CAAC,EACD,KAAK,cAAcG,CAAa,CACpC,CAEO,YAAYH,EAAwB,CACvC,KAAK,wBAAwB,EAE7B,KAAK,mBAAqB,OAAO,WAAW,IAAM,CAC9C,KAAK,UAAY,GAEjB,MAAMI,EAAY,IAAI,YAAY,wBAAyB,CACvD,QAAS,GACT,SAAU,GACV,OAAQJ,CACZ,CAAC,EACD,KAAK,cAAcI,CAAS,CAChC,EAAG,GAAG,CACV,CAEO,OAAOJ,EAAwB,CAClCA,EAAM,eAAe,EAErB,KAAK,wBAAwB,EAE7B,KAAK,UAAY,GACjB,MAAMK,EAAY,IAAI,YAAY,mBAAoB,CAClD,QAAS,GACT,SAAU,GACV,OAAQL,CACZ,CAAC,EACD,KAAK,cAAcK,CAAS,CAChC,CAEmB,QAAyB,CACxC,OAAOV;AAAA;AAAA,SAGX,CAEU,yBAAgC,CAClC,KAAK,qBACL,aAAa,KAAK,kBAAkB,EACpC,KAAK,mBAAqB,KAElC,CACJ,CA5FWW,EAAA,CADNT,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,SAAU,CAAC,GApBvD,SAqBF",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport dropzoneStyles from './dropzone.css.js';\n\nexport type DropzoneEventDetail = DragEvent;\n\nexport type DropEffects = 'copy' | 'move' | 'link' | 'none';\n\n/**\n * @element sp-dropzone\n *\n * @slot - The default slot on an `sp-dropzone` is a great place to place upload instructions\n * built with an `sp-illustrated-message` or other information, possibly even built from data\n * provided by the upload, to support users successfully interacting with the drag and drop\n * based features of your application\n *\n * @fires sp-dropzone-should-accept - A cancellable event that confirms whether or not\n * a file dropped on the UI should be accepted.\n * @fires sp-dropzone-dragover - Announces when files have been dragged over the UI, but not yet dropped.\n * @fires sp-dropzone-dragleave - Announces when dragged files have been moved out of the UI without having been dropped.\n * @fires sp-dropzone-drop - Announces when dragged files have been dropped on the UI.\n */\nexport class Dropzone extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [dropzoneStyles];\n    }\n\n    /**\n     * Controls the feedback (typically visual) the user is given during a drag and drop operation\n     * @attr\n     * @type {'copy' | 'move' | 'link' | 'none'}\n     */\n    public get dropEffect(): DropEffects {\n        return this._dropEffect;\n    }\n    public set dropEffect(value: DropEffects) {\n        if (['copy', 'move', 'link', 'none'].includes(value)) {\n            this._dropEffect = value;\n        }\n    }\n    private _dropEffect: DropEffects = 'copy';\n\n    /**\n     * Indicates that files are currently being dragged over the dropzone.\n     */\n    @property({ type: Boolean, reflect: true, attribute: 'dragged' })\n    public isDragged = false;\n\n    /**\n     * Set this property to indicate that the component is in a filled state.\n     */\n    @property({ type: Boolean, attribute: 'filled' })\n    public isFilled = false;\n\n    private debouncedDragLeave: number | null = null;\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n\n        this.addEventListener('drop', this.onDrop);\n        this.addEventListener('dragover', this.onDragOver);\n        this.addEventListener('dragleave', this.onDragLeave);\n    }\n\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n\n        this.removeEventListener('drop', this.onDrop);\n        this.removeEventListener('dragover', this.onDragOver);\n        this.removeEventListener('dragleave', this.onDragLeave);\n    }\n\n    public onDragOver(event: DragEvent): void {\n        const shouldAcceptEvent = new CustomEvent('sp-dropzone-should-accept', {\n            bubbles: true,\n            cancelable: true,\n            composed: true,\n            detail: event,\n        });\n        const shouldAccept = this.dispatchEvent(shouldAcceptEvent);\n        if (!event.dataTransfer) {\n            return;\n        }\n        if (!shouldAccept) {\n            event.dataTransfer.dropEffect = 'none';\n            return;\n        }\n\n        event.preventDefault();\n\n        this.clearDebouncedDragLeave();\n\n        this.isDragged = true;\n\n        event.dataTransfer.dropEffect = this.dropEffect;\n        const dragOverEvent = new CustomEvent('sp-dropzone-dragover', {\n            bubbles: true,\n            composed: true,\n            detail: event,\n        });\n        this.dispatchEvent(dragOverEvent);\n    }\n\n    public onDragLeave(event: DragEvent): void {\n        this.clearDebouncedDragLeave();\n\n        this.debouncedDragLeave = window.setTimeout(() => {\n            this.isDragged = false;\n\n            const dragLeave = new CustomEvent('sp-dropzone-dragleave', {\n                bubbles: true,\n                composed: true,\n                detail: event,\n            });\n            this.dispatchEvent(dragLeave);\n        }, 100);\n    }\n\n    public onDrop(event: DragEvent): void {\n        event.preventDefault();\n\n        this.clearDebouncedDragLeave();\n\n        this.isDragged = false;\n        const dropEvent = new CustomEvent('sp-dropzone-drop', {\n            bubbles: true,\n            composed: true,\n            detail: event,\n        });\n        this.dispatchEvent(dropEvent);\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <slot></slot>\n        `;\n    }\n\n    protected clearDebouncedDragLeave(): void {\n        if (this.debouncedDragLeave) {\n            clearTimeout(this.debouncedDragLeave);\n            this.debouncedDragLeave = null;\n        }\n    }\n}\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        'sp-dropzone:should-accept': CustomEvent<DragEvent>;\n        'sp-dropzone:dragover': CustomEvent<DragEvent>;\n        'sp-dropzone:dragleave': CustomEvent<DragEvent>;\n        'sp-dropzone:drop': CustomEvent<DragEvent>;\n    }\n}\n"],
+  "mappings": "qNAYA,OAEI,QAAAA,EACA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDAEzB,OAAOC,MAAoB,oBAoBpB,aAAM,iBAAiBF,CAAgB,CAAvC,kCAkBH,KAAQ,YAA2B,OAMnC,KAAO,UAAY,GAMnB,KAAO,SAAW,GAElB,KAAQ,mBAAoC,KA/B5C,WAA2B,QAAyB,CAChD,MAAO,CAACE,CAAc,CAC1B,CAOA,IAAW,YAA0B,CACjC,OAAO,KAAK,WAChB,CACA,IAAW,WAAWC,EAAoB,CAClC,CAAC,OAAQ,OAAQ,OAAQ,MAAM,EAAE,SAASA,CAAK,IAC/C,KAAK,YAAcA,EAE3B,CAiBgB,mBAA0B,CACtC,MAAM,kBAAkB,EAExB,KAAK,iBAAiB,OAAQ,KAAK,MAAM,EACzC,KAAK,iBAAiB,WAAY,KAAK,UAAU,EACjD,KAAK,iBAAiB,YAAa,KAAK,WAAW,CACvD,CAEgB,sBAA6B,CACzC,MAAM,qBAAqB,EAE3B,KAAK,oBAAoB,OAAQ,KAAK,MAAM,EAC5C,KAAK,oBAAoB,WAAY,KAAK,UAAU,EACpD,KAAK,oBAAoB,YAAa,KAAK,WAAW,CAC1D,CAEO,WAAWC,EAAwB,CACtC,MAAMC,EAAoB,IAAI,YAAY,4BAA6B,CACnE,QAAS,GACT,WAAY,GACZ,SAAU,GACV,OAAQD,CACZ,CAAC,EACKE,EAAe,KAAK,cAAcD,CAAiB,EACzD,GAAI,CAACD,EAAM,aACP,OAEJ,GAAI,CAACE,EAAc,CACfF,EAAM,aAAa,WAAa,OAChC,MACJ,CAEAA,EAAM,eAAe,EAErB,KAAK,wBAAwB,EAE7B,KAAK,UAAY,GAEjBA,EAAM,aAAa,WAAa,KAAK,WACrC,MAAMG,EAAgB,IAAI,YAAY,uBAAwB,CAC1D,QAAS,GACT,SAAU,GACV,OAAQH,CACZ,CAAC,EACD,KAAK,cAAcG,CAAa,CACpC,CAEO,YAAYH,EAAwB,CACvC,KAAK,wBAAwB,EAE7B,KAAK,mBAAqB,OAAO,WAAW,IAAM,CAC9C,KAAK,UAAY,GAEjB,MAAMI,EAAY,IAAI,YAAY,wBAAyB,CACvD,QAAS,GACT,SAAU,GACV,OAAQJ,CACZ,CAAC,EACD,KAAK,cAAcI,CAAS,CAChC,EAAG,GAAG,CACV,CAEO,OAAOJ,EAAwB,CAClCA,EAAM,eAAe,EAErB,KAAK,wBAAwB,EAE7B,KAAK,UAAY,GACjB,MAAMK,EAAY,IAAI,YAAY,mBAAoB,CAClD,QAAS,GACT,SAAU,GACV,OAAQL,CACZ,CAAC,EACD,KAAK,cAAcK,CAAS,CAChC,CAEmB,QAAyB,CACxC,OAAOV;AAAA;AAAA,SAGX,CAEU,yBAAgC,CAClC,KAAK,qBACL,aAAa,KAAK,kBAAkB,EACpC,KAAK,mBAAqB,KAElC,CACJ,CAlGWW,EAAA,CADNT,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,SAAU,CAAC,GAvBvD,SAwBF,yBAMAS,EAAA,CADNT,EAAS,CAAE,KAAM,QAAS,UAAW,QAAS,CAAC,GA7BvC,SA8BF",
   "names": ["html", "SpectrumElement", "property", "dropzoneStyles", "value", "event", "shouldAcceptEvent", "shouldAccept", "dragOverEvent", "dragLeave", "dropEvent", "__decorateClass"]
 }

package/src/dropzone.css.dev.js

@@ -1,7 +1,7 @@
 "use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-    :host{--spectrum-drop-zone-padding:var(--spectrum-spacing-400);--spectrum-drop-zone-illustration-to-heading:var(--spectrum-spacing-400);--spectrum-drop-zone-heading-to-body:var(--spectrum-spacing-75);--spectrum-drop-zone-border-width:var(--spectrum-border-width-200);--spectrum-drop-zone-corner-radius:var(--spectrum-corner-radius-100);--spectrum-drop-zone-border-color:var(--spectrum-gray-300);--spectrum-drop-zone-heading-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-heading-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-drop-zone-heading-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-title-size);--spectrum-drop-zone-heading-line-height:var(--spectrum-heading-line-height);--spectrum-drop-zone-heading-color:var(--spectrum-heading-color);--spectrum-drop-zone-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-drop-zone-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-drop-zone-body-font-size:var(--spectrum-drop-zone-body-size);--spectrum-drop-zone-body-line-height:var(--spectrum-body-line-height);--spectrum-drop-zone-body-color:var(--spectrum-body-color);--spectrum-drop-zone-background-color:var(--spectrum-drop-zone-background-color-rgb);--spectrum-drop-zone-border-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-drop-zone-illustration-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-height:var(--spectrum-component-height-300);--spectrum-drop-zone-content-max-width:var(--spectrum-drop-zone-content-maximum-width);--spectrum-drop-zone-content-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-drop-zone-content-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-drop-zone-content-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-drop-zone-content-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-content-font-weight:var(--spectrum-bold-font-weight);--spectrum-drop-zone-content-font-style:var(--spectrum-default-font-style);--spectrum-drop-zone-content-font-size:var(--spectrum-font-size-300);--spectrum-drop-zone-content-line-height:var(--spectrum-line-height-100);--spectrum-drop-zone-content-background-color:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-color:var(--spectrum-white);--mod-illustrated-message-content-maximum-width:var(--mod-drop-zone-content-maximum-width,var(--spectrum-drop-zone-content-maximum-width));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color,var(--spectrum-drop-zone-illustration-color));--mod-illustrated-message-title-to-heading:var(--mod-drop-zone-illustration-to-heading,var(--spectrum-drop-zone-illustration-to-heading));--mod-illustrated-message-heading-to-body:var(--mod-drop-zone-heading-to-body,var(--spectrum-drop-zone-heading-to-body));--mod-illustrated-message-title-font-family:var(--mod-drop-zone-heading-font-family,var(--spectrum-drop-zone-heading-font-family));--mod-illustrated-message-title-font-weight:var(--mod-drop-zone-heading-font-weight,var(--spectrum-drop-zone-heading-font-weight));--mod-illustrated-message-title-font-style:var(--mod-drop-zone-heading-font-style,var(--spectrum-drop-zone-heading-font-style));--mod-illustrated-message-title-font-size:var(--mod-drop-zone-heading-font-size,var(--spectrum-drop-zone-heading-font-size));--mod-illustrated-message-title-line-height:var(--mod-drop-zone-heading-line-height,var(--spectrum-drop-zone-heading-line-height));--mod-illustrated-message-title-color:var(--mod-drop-zone-heading-color,var(--spectrum-drop-zone-heading-color));--mod-illustrated-message-description-position:relative;--mod-illustrated-message-description-z-index:1;--mod-illustrated-message-heading-to-description:0;--mod-illustrated-message-description-font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));--mod-illustrated-message-description-font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));--mod-illustrated-message-description-font-style:var(--mod-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));--mod-illustrated-message-description-font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));--mod-illustrated-message-description-line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));--mod-illustrated-message-description-color:var(--mod-drop-zone-body-color,var(--spectrum-drop-zone-body-color));--mod-actionbutton-font-size:var(--mod-drop-zone-content-font-size,var(--spectrum-drop-zone-content-font-size));--mod-actionbutton-label-color:var(--mod-drop-zone-content-color,var(--spectrum-drop-zone-content-color));--mod-actionbutton-edge-to-text:var(--mod-drop-zone-content-edge-to-text,var(--spectrum-drop-zone-content-edge-to-text))}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-cjk-title-size)}:host{box-sizing:border-box;inline-size:var(--mod-drop-zone-width,var(--spectrum-drop-zone-width));padding:calc(var(--mod-drop-zone-padding,var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width)));text-align:center;border-color:var(--mod-drop-zone-border-color,var(--spectrum-drop-zone-border-color));border-width:var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width));border-radius:var(--mod-drop-zone-corner-radius,var(--spectrum-drop-zone-corner-radius));border-style:var(--mod-drop-zone-border-style,dashed);background-size:cover;background-color:var(--mod-drop-zone-background-color,var(--spectrum-drop-zone-background-color))}:host([dragged]){--mod-drop-zone-border-style:var(--mod-drop-zone-border-style--dragged,var(--mod-drop-zone-border-style-dragged,solid));--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity,var(--spectrum-drop-zone-background-color-opacity)));--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color-hover,var(--spectrum-drop-zone-illustration-color-hover))}:host .is-filled{--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity-filled,var(--spectrum-drop-zone-background-color-opacity-filled)));--mod-illustrated-message-display:none}:host([dragged]) .is-filled{--mod-drop-zone-content-display:flex}:host(:focus-visible){--mod-drop-zone-border-style:solid;--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));outline:0}.spectrum-DropZone-content{display:var(--mod-drop-zone-content-display,none);z-index:1;justify-content:center;align-items:center;block-size:100%;position:relative}.spectrum-DropZone-button{box-sizing:border-box;block-size:var(--mod-drop-zone-content-height,var(--spectrum-drop-zone-content-height));max-inline-size:var(--mod-drop-zone-content-max-width,var(--spectrum-drop-zone-content-max-width));font-family:var(--mod-drop-zone-content-font-family,var(--spectrum-drop-zone-content-font-family));font-weight:var(--mod-drop-zone-content-font-weight,var(--spectrum-drop-zone-content-font-weight));font-style:var(--mod-drop-zone-content-font-style,var(--spectrum-drop-zone-content-font-style));line-height:var(--mod-drop-zone-content-line-height,var(--spectrum-drop-zone-content-line-height));border:none;padding-block-start:var(--mod-drop-zone-content-top-to-text,var(--spectrum-drop-zone-content-top-to-text));padding-block-end:var(--mod-drop-zone-content-bottom-to-text,var(--spectrum-drop-zone-content-bottom-to-text))}.spectrum-DropZone-button,.spectrum-DropZone-button:focus{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}@media (hover:hover){.spectrum-DropZone-button:hover{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}}@media (forced-colors:active){:host{--highcontrast-drop-zone-illustration-color:CanvasText;--highcontrast-drop-zone-border-color-hover:Highlight;--highcontrast-illustrated-message-illustration-color:var(--highcontrast-drop-zone-illustration-color)}}:host{display:block}::slotted(*){font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));font-style:var(--spectrum-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));margin-top:0;margin-bottom:0}
+    :host{--spectrum-drop-zone-padding:var(--spectrum-spacing-400);--spectrum-drop-zone-illustration-to-heading:var(--spectrum-spacing-400);--spectrum-drop-zone-heading-to-body:var(--spectrum-spacing-75);--spectrum-drop-zone-border-width:var(--spectrum-border-width-200);--spectrum-drop-zone-corner-radius:var(--spectrum-corner-radius-100);--spectrum-drop-zone-border-color:var(--spectrum-gray-300);--spectrum-drop-zone-heading-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-heading-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-drop-zone-heading-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-title-size);--spectrum-drop-zone-heading-line-height:var(--spectrum-heading-line-height);--spectrum-drop-zone-heading-color:var(--spectrum-heading-color);--spectrum-drop-zone-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-drop-zone-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-drop-zone-body-font-size:var(--spectrum-drop-zone-body-size);--spectrum-drop-zone-body-line-height:var(--spectrum-body-line-height);--spectrum-drop-zone-body-color:var(--spectrum-body-color);--spectrum-drop-zone-background-color:var(--spectrum-drop-zone-background-color-rgb);--spectrum-drop-zone-border-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-drop-zone-illustration-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-height:var(--spectrum-component-height-300);--spectrum-drop-zone-content-max-width:var(--spectrum-drop-zone-content-maximum-width);--spectrum-drop-zone-content-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-drop-zone-content-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-drop-zone-content-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-drop-zone-content-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-content-font-weight:var(--spectrum-bold-font-weight);--spectrum-drop-zone-content-font-style:var(--spectrum-default-font-style);--spectrum-drop-zone-content-font-size:var(--spectrum-font-size-300);--spectrum-drop-zone-content-line-height:var(--spectrum-line-height-100);--spectrum-drop-zone-content-background-color:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-color:var(--spectrum-white);--mod-illustrated-message-content-maximum-width:var(--mod-drop-zone-content-maximum-width,var(--spectrum-drop-zone-content-maximum-width));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color,var(--spectrum-drop-zone-illustration-color));--mod-illustrated-message-title-to-heading:var(--mod-drop-zone-illustration-to-heading,var(--spectrum-drop-zone-illustration-to-heading));--mod-illustrated-message-heading-to-body:var(--mod-drop-zone-heading-to-body,var(--spectrum-drop-zone-heading-to-body));--mod-illustrated-message-title-font-family:var(--mod-drop-zone-heading-font-family,var(--spectrum-drop-zone-heading-font-family));--mod-illustrated-message-title-font-weight:var(--mod-drop-zone-heading-font-weight,var(--spectrum-drop-zone-heading-font-weight));--mod-illustrated-message-title-font-style:var(--mod-drop-zone-heading-font-style,var(--spectrum-drop-zone-heading-font-style));--mod-illustrated-message-title-font-size:var(--mod-drop-zone-heading-font-size,var(--spectrum-drop-zone-heading-font-size));--mod-illustrated-message-title-line-height:var(--mod-drop-zone-heading-line-height,var(--spectrum-drop-zone-heading-line-height));--mod-illustrated-message-title-color:var(--mod-drop-zone-heading-color,var(--spectrum-drop-zone-heading-color));--mod-illustrated-message-description-position:relative;--mod-illustrated-message-description-z-index:1;--mod-illustrated-message-heading-to-description:0;--mod-illustrated-message-description-font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));--mod-illustrated-message-description-font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));--mod-illustrated-message-description-font-style:var(--mod-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));--mod-illustrated-message-description-font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));--mod-illustrated-message-description-line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));--mod-illustrated-message-description-color:var(--mod-drop-zone-body-color,var(--spectrum-drop-zone-body-color));--mod-actionbutton-font-size:var(--mod-drop-zone-content-font-size,var(--spectrum-drop-zone-content-font-size));--mod-actionbutton-label-color:var(--mod-drop-zone-content-color,var(--spectrum-drop-zone-content-color));--mod-actionbutton-edge-to-text:var(--mod-drop-zone-content-edge-to-text,var(--spectrum-drop-zone-content-edge-to-text))}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-cjk-title-size)}:host{box-sizing:border-box;inline-size:var(--mod-drop-zone-width,var(--spectrum-drop-zone-width));padding:calc(var(--mod-drop-zone-padding,var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width)));text-align:center;border-color:var(--mod-drop-zone-border-color,var(--spectrum-drop-zone-border-color));border-width:var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width));border-radius:var(--mod-drop-zone-corner-radius,var(--spectrum-drop-zone-corner-radius));border-style:var(--mod-drop-zone-border-style,dashed);background-size:cover;background-color:var(--mod-drop-zone-background-color,var(--spectrum-drop-zone-background-color))}:host([dragged]){--mod-drop-zone-border-style:var(--mod-drop-zone-border-style--dragged,var(--mod-drop-zone-border-style-dragged,solid));--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity,var(--spectrum-drop-zone-background-color-opacity)));--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color-hover,var(--spectrum-drop-zone-illustration-color-hover))}:host([filled]){--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity-filled,var(--spectrum-drop-zone-background-color-opacity-filled)));--mod-illustrated-message-display:none}:host([filled][dragged]){--mod-drop-zone-content-display:flex}:host(:focus-visible){--mod-drop-zone-border-style:solid;--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));outline:0}.spectrum-DropZone-content{display:var(--mod-drop-zone-content-display,none);block-size:100%;z-index:1;justify-content:center;align-items:center;position:relative}.spectrum-DropZone-button{box-sizing:border-box;block-size:var(--mod-drop-zone-content-height,var(--spectrum-drop-zone-content-height));max-inline-size:var(--mod-drop-zone-content-max-width,var(--spectrum-drop-zone-content-max-width));font-family:var(--mod-drop-zone-content-font-family,var(--spectrum-drop-zone-content-font-family));font-weight:var(--mod-drop-zone-content-font-weight,var(--spectrum-drop-zone-content-font-weight));font-style:var(--mod-drop-zone-content-font-style,var(--spectrum-drop-zone-content-font-style));line-height:var(--mod-drop-zone-content-line-height,var(--spectrum-drop-zone-content-line-height));border:none;padding-block-start:var(--mod-drop-zone-content-top-to-text,var(--spectrum-drop-zone-content-top-to-text));padding-block-end:var(--mod-drop-zone-content-bottom-to-text,var(--spectrum-drop-zone-content-bottom-to-text))}.spectrum-DropZone-button,.spectrum-DropZone-button:focus{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}@media (hover:hover){.spectrum-DropZone-button:hover{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}}@media (forced-colors:active){:host{--highcontrast-drop-zone-illustration-color:CanvasText;--highcontrast-drop-zone-border-color-hover:Highlight;--highcontrast-illustrated-message-illustration-color:var(--highcontrast-drop-zone-illustration-color)}}:host{display:block}::slotted(*){font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));font-style:var(--spectrum-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));margin-top:0;margin-bottom:0}
 `;
 export default styles;
 //# sourceMappingURL=dropzone.css.dev.js.map

package/src/dropzone.css.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["dropzone.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--spectrum-drop-zone-padding:var(--spectrum-spacing-400);--spectrum-drop-zone-illustration-to-heading:var(--spectrum-spacing-400);--spectrum-drop-zone-heading-to-body:var(--spectrum-spacing-75);--spectrum-drop-zone-border-width:var(--spectrum-border-width-200);--spectrum-drop-zone-corner-radius:var(--spectrum-corner-radius-100);--spectrum-drop-zone-border-color:var(--spectrum-gray-300);--spectrum-drop-zone-heading-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-heading-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-drop-zone-heading-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-title-size);--spectrum-drop-zone-heading-line-height:var(--spectrum-heading-line-height);--spectrum-drop-zone-heading-color:var(--spectrum-heading-color);--spectrum-drop-zone-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-drop-zone-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-drop-zone-body-font-size:var(--spectrum-drop-zone-body-size);--spectrum-drop-zone-body-line-height:var(--spectrum-body-line-height);--spectrum-drop-zone-body-color:var(--spectrum-body-color);--spectrum-drop-zone-background-color:var(--spectrum-drop-zone-background-color-rgb);--spectrum-drop-zone-border-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-drop-zone-illustration-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-height:var(--spectrum-component-height-300);--spectrum-drop-zone-content-max-width:var(--spectrum-drop-zone-content-maximum-width);--spectrum-drop-zone-content-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-drop-zone-content-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-drop-zone-content-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-drop-zone-content-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-content-font-weight:var(--spectrum-bold-font-weight);--spectrum-drop-zone-content-font-style:var(--spectrum-default-font-style);--spectrum-drop-zone-content-font-size:var(--spectrum-font-size-300);--spectrum-drop-zone-content-line-height:var(--spectrum-line-height-100);--spectrum-drop-zone-content-background-color:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-color:var(--spectrum-white);--mod-illustrated-message-content-maximum-width:var(--mod-drop-zone-content-maximum-width,var(--spectrum-drop-zone-content-maximum-width));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color,var(--spectrum-drop-zone-illustration-color));--mod-illustrated-message-title-to-heading:var(--mod-drop-zone-illustration-to-heading,var(--spectrum-drop-zone-illustration-to-heading));--mod-illustrated-message-heading-to-body:var(--mod-drop-zone-heading-to-body,var(--spectrum-drop-zone-heading-to-body));--mod-illustrated-message-title-font-family:var(--mod-drop-zone-heading-font-family,var(--spectrum-drop-zone-heading-font-family));--mod-illustrated-message-title-font-weight:var(--mod-drop-zone-heading-font-weight,var(--spectrum-drop-zone-heading-font-weight));--mod-illustrated-message-title-font-style:var(--mod-drop-zone-heading-font-style,var(--spectrum-drop-zone-heading-font-style));--mod-illustrated-message-title-font-size:var(--mod-drop-zone-heading-font-size,var(--spectrum-drop-zone-heading-font-size));--mod-illustrated-message-title-line-height:var(--mod-drop-zone-heading-line-height,var(--spectrum-drop-zone-heading-line-height));--mod-illustrated-message-title-color:var(--mod-drop-zone-heading-color,var(--spectrum-drop-zone-heading-color));--mod-illustrated-message-description-position:relative;--mod-illustrated-message-description-z-index:1;--mod-illustrated-message-heading-to-description:0;--mod-illustrated-message-description-font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));--mod-illustrated-message-description-font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));--mod-illustrated-message-description-font-style:var(--mod-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));--mod-illustrated-message-description-font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));--mod-illustrated-message-description-line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));--mod-illustrated-message-description-color:var(--mod-drop-zone-body-color,var(--spectrum-drop-zone-body-color));--mod-actionbutton-font-size:var(--mod-drop-zone-content-font-size,var(--spectrum-drop-zone-content-font-size));--mod-actionbutton-label-color:var(--mod-drop-zone-content-color,var(--spectrum-drop-zone-content-color));--mod-actionbutton-edge-to-text:var(--mod-drop-zone-content-edge-to-text,var(--spectrum-drop-zone-content-edge-to-text))}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-cjk-title-size)}:host{box-sizing:border-box;inline-size:var(--mod-drop-zone-width,var(--spectrum-drop-zone-width));padding:calc(var(--mod-drop-zone-padding,var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width)));text-align:center;border-color:var(--mod-drop-zone-border-color,var(--spectrum-drop-zone-border-color));border-width:var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width));border-radius:var(--mod-drop-zone-corner-radius,var(--spectrum-drop-zone-corner-radius));border-style:var(--mod-drop-zone-border-style,dashed);background-size:cover;background-color:var(--mod-drop-zone-background-color,var(--spectrum-drop-zone-background-color))}:host([dragged]){--mod-drop-zone-border-style:var(--mod-drop-zone-border-style--dragged,var(--mod-drop-zone-border-style-dragged,solid));--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity,var(--spectrum-drop-zone-background-color-opacity)));--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color-hover,var(--spectrum-drop-zone-illustration-color-hover))}:host .is-filled{--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity-filled,var(--spectrum-drop-zone-background-color-opacity-filled)));--mod-illustrated-message-display:none}:host([dragged]) .is-filled{--mod-drop-zone-content-display:flex}:host(:focus-visible){--mod-drop-zone-border-style:solid;--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));outline:0}.spectrum-DropZone-content{display:var(--mod-drop-zone-content-display,none);z-index:1;justify-content:center;align-items:center;block-size:100%;position:relative}.spectrum-DropZone-button{box-sizing:border-box;block-size:var(--mod-drop-zone-content-height,var(--spectrum-drop-zone-content-height));max-inline-size:var(--mod-drop-zone-content-max-width,var(--spectrum-drop-zone-content-max-width));font-family:var(--mod-drop-zone-content-font-family,var(--spectrum-drop-zone-content-font-family));font-weight:var(--mod-drop-zone-content-font-weight,var(--spectrum-drop-zone-content-font-weight));font-style:var(--mod-drop-zone-content-font-style,var(--spectrum-drop-zone-content-font-style));line-height:var(--mod-drop-zone-content-line-height,var(--spectrum-drop-zone-content-line-height));border:none;padding-block-start:var(--mod-drop-zone-content-top-to-text,var(--spectrum-drop-zone-content-top-to-text));padding-block-end:var(--mod-drop-zone-content-bottom-to-text,var(--spectrum-drop-zone-content-bottom-to-text))}.spectrum-DropZone-button,.spectrum-DropZone-button:focus{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}@media (hover:hover){.spectrum-DropZone-button:hover{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}}@media (forced-colors:active){:host{--highcontrast-drop-zone-illustration-color:CanvasText;--highcontrast-drop-zone-border-color-hover:Highlight;--highcontrast-illustrated-message-illustration-color:var(--highcontrast-drop-zone-illustration-color)}}:host{display:block}::slotted(*){font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));font-style:var(--spectrum-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));margin-top:0;margin-bottom:0}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--spectrum-drop-zone-padding:var(--spectrum-spacing-400);--spectrum-drop-zone-illustration-to-heading:var(--spectrum-spacing-400);--spectrum-drop-zone-heading-to-body:var(--spectrum-spacing-75);--spectrum-drop-zone-border-width:var(--spectrum-border-width-200);--spectrum-drop-zone-corner-radius:var(--spectrum-corner-radius-100);--spectrum-drop-zone-border-color:var(--spectrum-gray-300);--spectrum-drop-zone-heading-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-heading-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-drop-zone-heading-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-title-size);--spectrum-drop-zone-heading-line-height:var(--spectrum-heading-line-height);--spectrum-drop-zone-heading-color:var(--spectrum-heading-color);--spectrum-drop-zone-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-drop-zone-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-drop-zone-body-font-size:var(--spectrum-drop-zone-body-size);--spectrum-drop-zone-body-line-height:var(--spectrum-body-line-height);--spectrum-drop-zone-body-color:var(--spectrum-body-color);--spectrum-drop-zone-background-color:var(--spectrum-drop-zone-background-color-rgb);--spectrum-drop-zone-border-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-drop-zone-illustration-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-height:var(--spectrum-component-height-300);--spectrum-drop-zone-content-max-width:var(--spectrum-drop-zone-content-maximum-width);--spectrum-drop-zone-content-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-drop-zone-content-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-drop-zone-content-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-drop-zone-content-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-content-font-weight:var(--spectrum-bold-font-weight);--spectrum-drop-zone-content-font-style:var(--spectrum-default-font-style);--spectrum-drop-zone-content-font-size:var(--spectrum-font-size-300);--spectrum-drop-zone-content-line-height:var(--spectrum-line-height-100);--spectrum-drop-zone-content-background-color:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-color:var(--spectrum-white);--mod-illustrated-message-content-maximum-width:var(--mod-drop-zone-content-maximum-width,var(--spectrum-drop-zone-content-maximum-width));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color,var(--spectrum-drop-zone-illustration-color));--mod-illustrated-message-title-to-heading:var(--mod-drop-zone-illustration-to-heading,var(--spectrum-drop-zone-illustration-to-heading));--mod-illustrated-message-heading-to-body:var(--mod-drop-zone-heading-to-body,var(--spectrum-drop-zone-heading-to-body));--mod-illustrated-message-title-font-family:var(--mod-drop-zone-heading-font-family,var(--spectrum-drop-zone-heading-font-family));--mod-illustrated-message-title-font-weight:var(--mod-drop-zone-heading-font-weight,var(--spectrum-drop-zone-heading-font-weight));--mod-illustrated-message-title-font-style:var(--mod-drop-zone-heading-font-style,var(--spectrum-drop-zone-heading-font-style));--mod-illustrated-message-title-font-size:var(--mod-drop-zone-heading-font-size,var(--spectrum-drop-zone-heading-font-size));--mod-illustrated-message-title-line-height:var(--mod-drop-zone-heading-line-height,var(--spectrum-drop-zone-heading-line-height));--mod-illustrated-message-title-color:var(--mod-drop-zone-heading-color,var(--spectrum-drop-zone-heading-color));--mod-illustrated-message-description-position:relative;--mod-illustrated-message-description-z-index:1;--mod-illustrated-message-heading-to-description:0;--mod-illustrated-message-description-font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));--mod-illustrated-message-description-font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));--mod-illustrated-message-description-font-style:var(--mod-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));--mod-illustrated-message-description-font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));--mod-illustrated-message-description-line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));--mod-illustrated-message-description-color:var(--mod-drop-zone-body-color,var(--spectrum-drop-zone-body-color));--mod-actionbutton-font-size:var(--mod-drop-zone-content-font-size,var(--spectrum-drop-zone-content-font-size));--mod-actionbutton-label-color:var(--mod-drop-zone-content-color,var(--spectrum-drop-zone-content-color));--mod-actionbutton-edge-to-text:var(--mod-drop-zone-content-edge-to-text,var(--spectrum-drop-zone-content-edge-to-text))}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-cjk-title-size)}:host{box-sizing:border-box;inline-size:var(--mod-drop-zone-width,var(--spectrum-drop-zone-width));padding:calc(var(--mod-drop-zone-padding,var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width)));text-align:center;border-color:var(--mod-drop-zone-border-color,var(--spectrum-drop-zone-border-color));border-width:var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width));border-radius:var(--mod-drop-zone-corner-radius,var(--spectrum-drop-zone-corner-radius));border-style:var(--mod-drop-zone-border-style,dashed);background-size:cover;background-color:var(--mod-drop-zone-background-color,var(--spectrum-drop-zone-background-color))}:host([dragged]){--mod-drop-zone-border-style:var(--mod-drop-zone-border-style--dragged,var(--mod-drop-zone-border-style-dragged,solid));--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity,var(--spectrum-drop-zone-background-color-opacity)));--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color-hover,var(--spectrum-drop-zone-illustration-color-hover))}:host([filled]){--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity-filled,var(--spectrum-drop-zone-background-color-opacity-filled)));--mod-illustrated-message-display:none}:host([filled][dragged]){--mod-drop-zone-content-display:flex}:host(:focus-visible){--mod-drop-zone-border-style:solid;--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));outline:0}.spectrum-DropZone-content{display:var(--mod-drop-zone-content-display,none);block-size:100%;z-index:1;justify-content:center;align-items:center;position:relative}.spectrum-DropZone-button{box-sizing:border-box;block-size:var(--mod-drop-zone-content-height,var(--spectrum-drop-zone-content-height));max-inline-size:var(--mod-drop-zone-content-max-width,var(--spectrum-drop-zone-content-max-width));font-family:var(--mod-drop-zone-content-font-family,var(--spectrum-drop-zone-content-font-family));font-weight:var(--mod-drop-zone-content-font-weight,var(--spectrum-drop-zone-content-font-weight));font-style:var(--mod-drop-zone-content-font-style,var(--spectrum-drop-zone-content-font-style));line-height:var(--mod-drop-zone-content-line-height,var(--spectrum-drop-zone-content-line-height));border:none;padding-block-start:var(--mod-drop-zone-content-top-to-text,var(--spectrum-drop-zone-content-top-to-text));padding-block-end:var(--mod-drop-zone-content-bottom-to-text,var(--spectrum-drop-zone-content-bottom-to-text))}.spectrum-DropZone-button,.spectrum-DropZone-button:focus{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}@media (hover:hover){.spectrum-DropZone-button:hover{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}}@media (forced-colors:active){:host{--highcontrast-drop-zone-illustration-color:CanvasText;--highcontrast-drop-zone-border-color-hover:Highlight;--highcontrast-illustrated-message-illustration-color:var(--highcontrast-drop-zone-illustration-color)}}:host{display:block}::slotted(*){font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));font-style:var(--spectrum-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));margin-top:0;margin-bottom:0}\n`;\nexport default styles;"],
   "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
   "names": []
 }

package/src/dropzone.css.js

@@ -1,4 +1,4 @@
 "use strict";import{css as o}from"@spectrum-web-components/base";const e=o`
-    :host{--spectrum-drop-zone-padding:var(--spectrum-spacing-400);--spectrum-drop-zone-illustration-to-heading:var(--spectrum-spacing-400);--spectrum-drop-zone-heading-to-body:var(--spectrum-spacing-75);--spectrum-drop-zone-border-width:var(--spectrum-border-width-200);--spectrum-drop-zone-corner-radius:var(--spectrum-corner-radius-100);--spectrum-drop-zone-border-color:var(--spectrum-gray-300);--spectrum-drop-zone-heading-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-heading-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-drop-zone-heading-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-title-size);--spectrum-drop-zone-heading-line-height:var(--spectrum-heading-line-height);--spectrum-drop-zone-heading-color:var(--spectrum-heading-color);--spectrum-drop-zone-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-drop-zone-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-drop-zone-body-font-size:var(--spectrum-drop-zone-body-size);--spectrum-drop-zone-body-line-height:var(--spectrum-body-line-height);--spectrum-drop-zone-body-color:var(--spectrum-body-color);--spectrum-drop-zone-background-color:var(--spectrum-drop-zone-background-color-rgb);--spectrum-drop-zone-border-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-drop-zone-illustration-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-height:var(--spectrum-component-height-300);--spectrum-drop-zone-content-max-width:var(--spectrum-drop-zone-content-maximum-width);--spectrum-drop-zone-content-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-drop-zone-content-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-drop-zone-content-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-drop-zone-content-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-content-font-weight:var(--spectrum-bold-font-weight);--spectrum-drop-zone-content-font-style:var(--spectrum-default-font-style);--spectrum-drop-zone-content-font-size:var(--spectrum-font-size-300);--spectrum-drop-zone-content-line-height:var(--spectrum-line-height-100);--spectrum-drop-zone-content-background-color:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-color:var(--spectrum-white);--mod-illustrated-message-content-maximum-width:var(--mod-drop-zone-content-maximum-width,var(--spectrum-drop-zone-content-maximum-width));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color,var(--spectrum-drop-zone-illustration-color));--mod-illustrated-message-title-to-heading:var(--mod-drop-zone-illustration-to-heading,var(--spectrum-drop-zone-illustration-to-heading));--mod-illustrated-message-heading-to-body:var(--mod-drop-zone-heading-to-body,var(--spectrum-drop-zone-heading-to-body));--mod-illustrated-message-title-font-family:var(--mod-drop-zone-heading-font-family,var(--spectrum-drop-zone-heading-font-family));--mod-illustrated-message-title-font-weight:var(--mod-drop-zone-heading-font-weight,var(--spectrum-drop-zone-heading-font-weight));--mod-illustrated-message-title-font-style:var(--mod-drop-zone-heading-font-style,var(--spectrum-drop-zone-heading-font-style));--mod-illustrated-message-title-font-size:var(--mod-drop-zone-heading-font-size,var(--spectrum-drop-zone-heading-font-size));--mod-illustrated-message-title-line-height:var(--mod-drop-zone-heading-line-height,var(--spectrum-drop-zone-heading-line-height));--mod-illustrated-message-title-color:var(--mod-drop-zone-heading-color,var(--spectrum-drop-zone-heading-color));--mod-illustrated-message-description-position:relative;--mod-illustrated-message-description-z-index:1;--mod-illustrated-message-heading-to-description:0;--mod-illustrated-message-description-font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));--mod-illustrated-message-description-font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));--mod-illustrated-message-description-font-style:var(--mod-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));--mod-illustrated-message-description-font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));--mod-illustrated-message-description-line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));--mod-illustrated-message-description-color:var(--mod-drop-zone-body-color,var(--spectrum-drop-zone-body-color));--mod-actionbutton-font-size:var(--mod-drop-zone-content-font-size,var(--spectrum-drop-zone-content-font-size));--mod-actionbutton-label-color:var(--mod-drop-zone-content-color,var(--spectrum-drop-zone-content-color));--mod-actionbutton-edge-to-text:var(--mod-drop-zone-content-edge-to-text,var(--spectrum-drop-zone-content-edge-to-text))}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-cjk-title-size)}:host{box-sizing:border-box;inline-size:var(--mod-drop-zone-width,var(--spectrum-drop-zone-width));padding:calc(var(--mod-drop-zone-padding,var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width)));text-align:center;border-color:var(--mod-drop-zone-border-color,var(--spectrum-drop-zone-border-color));border-width:var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width));border-radius:var(--mod-drop-zone-corner-radius,var(--spectrum-drop-zone-corner-radius));border-style:var(--mod-drop-zone-border-style,dashed);background-size:cover;background-color:var(--mod-drop-zone-background-color,var(--spectrum-drop-zone-background-color))}:host([dragged]){--mod-drop-zone-border-style:var(--mod-drop-zone-border-style--dragged,var(--mod-drop-zone-border-style-dragged,solid));--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity,var(--spectrum-drop-zone-background-color-opacity)));--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color-hover,var(--spectrum-drop-zone-illustration-color-hover))}:host .is-filled{--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity-filled,var(--spectrum-drop-zone-background-color-opacity-filled)));--mod-illustrated-message-display:none}:host([dragged]) .is-filled{--mod-drop-zone-content-display:flex}:host(:focus-visible){--mod-drop-zone-border-style:solid;--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));outline:0}.spectrum-DropZone-content{display:var(--mod-drop-zone-content-display,none);z-index:1;justify-content:center;align-items:center;block-size:100%;position:relative}.spectrum-DropZone-button{box-sizing:border-box;block-size:var(--mod-drop-zone-content-height,var(--spectrum-drop-zone-content-height));max-inline-size:var(--mod-drop-zone-content-max-width,var(--spectrum-drop-zone-content-max-width));font-family:var(--mod-drop-zone-content-font-family,var(--spectrum-drop-zone-content-font-family));font-weight:var(--mod-drop-zone-content-font-weight,var(--spectrum-drop-zone-content-font-weight));font-style:var(--mod-drop-zone-content-font-style,var(--spectrum-drop-zone-content-font-style));line-height:var(--mod-drop-zone-content-line-height,var(--spectrum-drop-zone-content-line-height));border:none;padding-block-start:var(--mod-drop-zone-content-top-to-text,var(--spectrum-drop-zone-content-top-to-text));padding-block-end:var(--mod-drop-zone-content-bottom-to-text,var(--spectrum-drop-zone-content-bottom-to-text))}.spectrum-DropZone-button,.spectrum-DropZone-button:focus{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}@media (hover:hover){.spectrum-DropZone-button:hover{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}}@media (forced-colors:active){:host{--highcontrast-drop-zone-illustration-color:CanvasText;--highcontrast-drop-zone-border-color-hover:Highlight;--highcontrast-illustrated-message-illustration-color:var(--highcontrast-drop-zone-illustration-color)}}:host{display:block}::slotted(*){font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));font-style:var(--spectrum-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));margin-top:0;margin-bottom:0}
+    :host{--spectrum-drop-zone-padding:var(--spectrum-spacing-400);--spectrum-drop-zone-illustration-to-heading:var(--spectrum-spacing-400);--spectrum-drop-zone-heading-to-body:var(--spectrum-spacing-75);--spectrum-drop-zone-border-width:var(--spectrum-border-width-200);--spectrum-drop-zone-corner-radius:var(--spectrum-corner-radius-100);--spectrum-drop-zone-border-color:var(--spectrum-gray-300);--spectrum-drop-zone-heading-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-heading-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-drop-zone-heading-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-title-size);--spectrum-drop-zone-heading-line-height:var(--spectrum-heading-line-height);--spectrum-drop-zone-heading-color:var(--spectrum-heading-color);--spectrum-drop-zone-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-drop-zone-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-drop-zone-body-font-size:var(--spectrum-drop-zone-body-size);--spectrum-drop-zone-body-line-height:var(--spectrum-body-line-height);--spectrum-drop-zone-body-color:var(--spectrum-body-color);--spectrum-drop-zone-background-color:var(--spectrum-drop-zone-background-color-rgb);--spectrum-drop-zone-border-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-drop-zone-illustration-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-height:var(--spectrum-component-height-300);--spectrum-drop-zone-content-max-width:var(--spectrum-drop-zone-content-maximum-width);--spectrum-drop-zone-content-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-drop-zone-content-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-drop-zone-content-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-drop-zone-content-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-content-font-weight:var(--spectrum-bold-font-weight);--spectrum-drop-zone-content-font-style:var(--spectrum-default-font-style);--spectrum-drop-zone-content-font-size:var(--spectrum-font-size-300);--spectrum-drop-zone-content-line-height:var(--spectrum-line-height-100);--spectrum-drop-zone-content-background-color:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-color:var(--spectrum-white);--mod-illustrated-message-content-maximum-width:var(--mod-drop-zone-content-maximum-width,var(--spectrum-drop-zone-content-maximum-width));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color,var(--spectrum-drop-zone-illustration-color));--mod-illustrated-message-title-to-heading:var(--mod-drop-zone-illustration-to-heading,var(--spectrum-drop-zone-illustration-to-heading));--mod-illustrated-message-heading-to-body:var(--mod-drop-zone-heading-to-body,var(--spectrum-drop-zone-heading-to-body));--mod-illustrated-message-title-font-family:var(--mod-drop-zone-heading-font-family,var(--spectrum-drop-zone-heading-font-family));--mod-illustrated-message-title-font-weight:var(--mod-drop-zone-heading-font-weight,var(--spectrum-drop-zone-heading-font-weight));--mod-illustrated-message-title-font-style:var(--mod-drop-zone-heading-font-style,var(--spectrum-drop-zone-heading-font-style));--mod-illustrated-message-title-font-size:var(--mod-drop-zone-heading-font-size,var(--spectrum-drop-zone-heading-font-size));--mod-illustrated-message-title-line-height:var(--mod-drop-zone-heading-line-height,var(--spectrum-drop-zone-heading-line-height));--mod-illustrated-message-title-color:var(--mod-drop-zone-heading-color,var(--spectrum-drop-zone-heading-color));--mod-illustrated-message-description-position:relative;--mod-illustrated-message-description-z-index:1;--mod-illustrated-message-heading-to-description:0;--mod-illustrated-message-description-font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));--mod-illustrated-message-description-font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));--mod-illustrated-message-description-font-style:var(--mod-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));--mod-illustrated-message-description-font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));--mod-illustrated-message-description-line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));--mod-illustrated-message-description-color:var(--mod-drop-zone-body-color,var(--spectrum-drop-zone-body-color));--mod-actionbutton-font-size:var(--mod-drop-zone-content-font-size,var(--spectrum-drop-zone-content-font-size));--mod-actionbutton-label-color:var(--mod-drop-zone-content-color,var(--spectrum-drop-zone-content-color));--mod-actionbutton-edge-to-text:var(--mod-drop-zone-content-edge-to-text,var(--spectrum-drop-zone-content-edge-to-text))}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-cjk-title-size)}:host{box-sizing:border-box;inline-size:var(--mod-drop-zone-width,var(--spectrum-drop-zone-width));padding:calc(var(--mod-drop-zone-padding,var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width)));text-align:center;border-color:var(--mod-drop-zone-border-color,var(--spectrum-drop-zone-border-color));border-width:var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width));border-radius:var(--mod-drop-zone-corner-radius,var(--spectrum-drop-zone-corner-radius));border-style:var(--mod-drop-zone-border-style,dashed);background-size:cover;background-color:var(--mod-drop-zone-background-color,var(--spectrum-drop-zone-background-color))}:host([dragged]){--mod-drop-zone-border-style:var(--mod-drop-zone-border-style--dragged,var(--mod-drop-zone-border-style-dragged,solid));--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity,var(--spectrum-drop-zone-background-color-opacity)));--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color-hover,var(--spectrum-drop-zone-illustration-color-hover))}:host([filled]){--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity-filled,var(--spectrum-drop-zone-background-color-opacity-filled)));--mod-illustrated-message-display:none}:host([filled][dragged]){--mod-drop-zone-content-display:flex}:host(:focus-visible){--mod-drop-zone-border-style:solid;--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));outline:0}.spectrum-DropZone-content{display:var(--mod-drop-zone-content-display,none);block-size:100%;z-index:1;justify-content:center;align-items:center;position:relative}.spectrum-DropZone-button{box-sizing:border-box;block-size:var(--mod-drop-zone-content-height,var(--spectrum-drop-zone-content-height));max-inline-size:var(--mod-drop-zone-content-max-width,var(--spectrum-drop-zone-content-max-width));font-family:var(--mod-drop-zone-content-font-family,var(--spectrum-drop-zone-content-font-family));font-weight:var(--mod-drop-zone-content-font-weight,var(--spectrum-drop-zone-content-font-weight));font-style:var(--mod-drop-zone-content-font-style,var(--spectrum-drop-zone-content-font-style));line-height:var(--mod-drop-zone-content-line-height,var(--spectrum-drop-zone-content-line-height));border:none;padding-block-start:var(--mod-drop-zone-content-top-to-text,var(--spectrum-drop-zone-content-top-to-text));padding-block-end:var(--mod-drop-zone-content-bottom-to-text,var(--spectrum-drop-zone-content-bottom-to-text))}.spectrum-DropZone-button,.spectrum-DropZone-button:focus{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}@media (hover:hover){.spectrum-DropZone-button:hover{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}}@media (forced-colors:active){:host{--highcontrast-drop-zone-illustration-color:CanvasText;--highcontrast-drop-zone-border-color-hover:Highlight;--highcontrast-illustrated-message-illustration-color:var(--highcontrast-drop-zone-illustration-color)}}:host{display:block}::slotted(*){font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));font-style:var(--spectrum-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));margin-top:0;margin-bottom:0}
 `;export default e;
 //# sourceMappingURL=dropzone.css.js.map

package/src/dropzone.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["dropzone.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--spectrum-drop-zone-padding:var(--spectrum-spacing-400);--spectrum-drop-zone-illustration-to-heading:var(--spectrum-spacing-400);--spectrum-drop-zone-heading-to-body:var(--spectrum-spacing-75);--spectrum-drop-zone-border-width:var(--spectrum-border-width-200);--spectrum-drop-zone-corner-radius:var(--spectrum-corner-radius-100);--spectrum-drop-zone-border-color:var(--spectrum-gray-300);--spectrum-drop-zone-heading-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-heading-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-drop-zone-heading-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-title-size);--spectrum-drop-zone-heading-line-height:var(--spectrum-heading-line-height);--spectrum-drop-zone-heading-color:var(--spectrum-heading-color);--spectrum-drop-zone-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-drop-zone-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-drop-zone-body-font-size:var(--spectrum-drop-zone-body-size);--spectrum-drop-zone-body-line-height:var(--spectrum-body-line-height);--spectrum-drop-zone-body-color:var(--spectrum-body-color);--spectrum-drop-zone-background-color:var(--spectrum-drop-zone-background-color-rgb);--spectrum-drop-zone-border-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-drop-zone-illustration-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-height:var(--spectrum-component-height-300);--spectrum-drop-zone-content-max-width:var(--spectrum-drop-zone-content-maximum-width);--spectrum-drop-zone-content-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-drop-zone-content-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-drop-zone-content-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-drop-zone-content-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-content-font-weight:var(--spectrum-bold-font-weight);--spectrum-drop-zone-content-font-style:var(--spectrum-default-font-style);--spectrum-drop-zone-content-font-size:var(--spectrum-font-size-300);--spectrum-drop-zone-content-line-height:var(--spectrum-line-height-100);--spectrum-drop-zone-content-background-color:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-color:var(--spectrum-white);--mod-illustrated-message-content-maximum-width:var(--mod-drop-zone-content-maximum-width,var(--spectrum-drop-zone-content-maximum-width));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color,var(--spectrum-drop-zone-illustration-color));--mod-illustrated-message-title-to-heading:var(--mod-drop-zone-illustration-to-heading,var(--spectrum-drop-zone-illustration-to-heading));--mod-illustrated-message-heading-to-body:var(--mod-drop-zone-heading-to-body,var(--spectrum-drop-zone-heading-to-body));--mod-illustrated-message-title-font-family:var(--mod-drop-zone-heading-font-family,var(--spectrum-drop-zone-heading-font-family));--mod-illustrated-message-title-font-weight:var(--mod-drop-zone-heading-font-weight,var(--spectrum-drop-zone-heading-font-weight));--mod-illustrated-message-title-font-style:var(--mod-drop-zone-heading-font-style,var(--spectrum-drop-zone-heading-font-style));--mod-illustrated-message-title-font-size:var(--mod-drop-zone-heading-font-size,var(--spectrum-drop-zone-heading-font-size));--mod-illustrated-message-title-line-height:var(--mod-drop-zone-heading-line-height,var(--spectrum-drop-zone-heading-line-height));--mod-illustrated-message-title-color:var(--mod-drop-zone-heading-color,var(--spectrum-drop-zone-heading-color));--mod-illustrated-message-description-position:relative;--mod-illustrated-message-description-z-index:1;--mod-illustrated-message-heading-to-description:0;--mod-illustrated-message-description-font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));--mod-illustrated-message-description-font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));--mod-illustrated-message-description-font-style:var(--mod-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));--mod-illustrated-message-description-font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));--mod-illustrated-message-description-line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));--mod-illustrated-message-description-color:var(--mod-drop-zone-body-color,var(--spectrum-drop-zone-body-color));--mod-actionbutton-font-size:var(--mod-drop-zone-content-font-size,var(--spectrum-drop-zone-content-font-size));--mod-actionbutton-label-color:var(--mod-drop-zone-content-color,var(--spectrum-drop-zone-content-color));--mod-actionbutton-edge-to-text:var(--mod-drop-zone-content-edge-to-text,var(--spectrum-drop-zone-content-edge-to-text))}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-cjk-title-size)}:host{box-sizing:border-box;inline-size:var(--mod-drop-zone-width,var(--spectrum-drop-zone-width));padding:calc(var(--mod-drop-zone-padding,var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width)));text-align:center;border-color:var(--mod-drop-zone-border-color,var(--spectrum-drop-zone-border-color));border-width:var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width));border-radius:var(--mod-drop-zone-corner-radius,var(--spectrum-drop-zone-corner-radius));border-style:var(--mod-drop-zone-border-style,dashed);background-size:cover;background-color:var(--mod-drop-zone-background-color,var(--spectrum-drop-zone-background-color))}:host([dragged]){--mod-drop-zone-border-style:var(--mod-drop-zone-border-style--dragged,var(--mod-drop-zone-border-style-dragged,solid));--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity,var(--spectrum-drop-zone-background-color-opacity)));--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color-hover,var(--spectrum-drop-zone-illustration-color-hover))}:host .is-filled{--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity-filled,var(--spectrum-drop-zone-background-color-opacity-filled)));--mod-illustrated-message-display:none}:host([dragged]) .is-filled{--mod-drop-zone-content-display:flex}:host(:focus-visible){--mod-drop-zone-border-style:solid;--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));outline:0}.spectrum-DropZone-content{display:var(--mod-drop-zone-content-display,none);z-index:1;justify-content:center;align-items:center;block-size:100%;position:relative}.spectrum-DropZone-button{box-sizing:border-box;block-size:var(--mod-drop-zone-content-height,var(--spectrum-drop-zone-content-height));max-inline-size:var(--mod-drop-zone-content-max-width,var(--spectrum-drop-zone-content-max-width));font-family:var(--mod-drop-zone-content-font-family,var(--spectrum-drop-zone-content-font-family));font-weight:var(--mod-drop-zone-content-font-weight,var(--spectrum-drop-zone-content-font-weight));font-style:var(--mod-drop-zone-content-font-style,var(--spectrum-drop-zone-content-font-style));line-height:var(--mod-drop-zone-content-line-height,var(--spectrum-drop-zone-content-line-height));border:none;padding-block-start:var(--mod-drop-zone-content-top-to-text,var(--spectrum-drop-zone-content-top-to-text));padding-block-end:var(--mod-drop-zone-content-bottom-to-text,var(--spectrum-drop-zone-content-bottom-to-text))}.spectrum-DropZone-button,.spectrum-DropZone-button:focus{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}@media (hover:hover){.spectrum-DropZone-button:hover{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}}@media (forced-colors:active){:host{--highcontrast-drop-zone-illustration-color:CanvasText;--highcontrast-drop-zone-border-color-hover:Highlight;--highcontrast-illustrated-message-illustration-color:var(--highcontrast-drop-zone-illustration-color)}}:host{display:block}::slotted(*){font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));font-style:var(--spectrum-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));margin-top:0;margin-bottom:0}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--spectrum-drop-zone-padding:var(--spectrum-spacing-400);--spectrum-drop-zone-illustration-to-heading:var(--spectrum-spacing-400);--spectrum-drop-zone-heading-to-body:var(--spectrum-spacing-75);--spectrum-drop-zone-border-width:var(--spectrum-border-width-200);--spectrum-drop-zone-corner-radius:var(--spectrum-corner-radius-100);--spectrum-drop-zone-border-color:var(--spectrum-gray-300);--spectrum-drop-zone-heading-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-heading-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-drop-zone-heading-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-title-size);--spectrum-drop-zone-heading-line-height:var(--spectrum-heading-line-height);--spectrum-drop-zone-heading-color:var(--spectrum-heading-color);--spectrum-drop-zone-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-drop-zone-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-drop-zone-body-font-size:var(--spectrum-drop-zone-body-size);--spectrum-drop-zone-body-line-height:var(--spectrum-body-line-height);--spectrum-drop-zone-body-color:var(--spectrum-body-color);--spectrum-drop-zone-background-color:var(--spectrum-drop-zone-background-color-rgb);--spectrum-drop-zone-border-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-drop-zone-illustration-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-height:var(--spectrum-component-height-300);--spectrum-drop-zone-content-max-width:var(--spectrum-drop-zone-content-maximum-width);--spectrum-drop-zone-content-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-drop-zone-content-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-drop-zone-content-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-drop-zone-content-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-content-font-weight:var(--spectrum-bold-font-weight);--spectrum-drop-zone-content-font-style:var(--spectrum-default-font-style);--spectrum-drop-zone-content-font-size:var(--spectrum-font-size-300);--spectrum-drop-zone-content-line-height:var(--spectrum-line-height-100);--spectrum-drop-zone-content-background-color:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-color:var(--spectrum-white);--mod-illustrated-message-content-maximum-width:var(--mod-drop-zone-content-maximum-width,var(--spectrum-drop-zone-content-maximum-width));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color,var(--spectrum-drop-zone-illustration-color));--mod-illustrated-message-title-to-heading:var(--mod-drop-zone-illustration-to-heading,var(--spectrum-drop-zone-illustration-to-heading));--mod-illustrated-message-heading-to-body:var(--mod-drop-zone-heading-to-body,var(--spectrum-drop-zone-heading-to-body));--mod-illustrated-message-title-font-family:var(--mod-drop-zone-heading-font-family,var(--spectrum-drop-zone-heading-font-family));--mod-illustrated-message-title-font-weight:var(--mod-drop-zone-heading-font-weight,var(--spectrum-drop-zone-heading-font-weight));--mod-illustrated-message-title-font-style:var(--mod-drop-zone-heading-font-style,var(--spectrum-drop-zone-heading-font-style));--mod-illustrated-message-title-font-size:var(--mod-drop-zone-heading-font-size,var(--spectrum-drop-zone-heading-font-size));--mod-illustrated-message-title-line-height:var(--mod-drop-zone-heading-line-height,var(--spectrum-drop-zone-heading-line-height));--mod-illustrated-message-title-color:var(--mod-drop-zone-heading-color,var(--spectrum-drop-zone-heading-color));--mod-illustrated-message-description-position:relative;--mod-illustrated-message-description-z-index:1;--mod-illustrated-message-heading-to-description:0;--mod-illustrated-message-description-font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));--mod-illustrated-message-description-font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));--mod-illustrated-message-description-font-style:var(--mod-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));--mod-illustrated-message-description-font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));--mod-illustrated-message-description-line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));--mod-illustrated-message-description-color:var(--mod-drop-zone-body-color,var(--spectrum-drop-zone-body-color));--mod-actionbutton-font-size:var(--mod-drop-zone-content-font-size,var(--spectrum-drop-zone-content-font-size));--mod-actionbutton-label-color:var(--mod-drop-zone-content-color,var(--spectrum-drop-zone-content-color));--mod-actionbutton-edge-to-text:var(--mod-drop-zone-content-edge-to-text,var(--spectrum-drop-zone-content-edge-to-text))}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-cjk-title-size)}:host{box-sizing:border-box;inline-size:var(--mod-drop-zone-width,var(--spectrum-drop-zone-width));padding:calc(var(--mod-drop-zone-padding,var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width)));text-align:center;border-color:var(--mod-drop-zone-border-color,var(--spectrum-drop-zone-border-color));border-width:var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width));border-radius:var(--mod-drop-zone-corner-radius,var(--spectrum-drop-zone-corner-radius));border-style:var(--mod-drop-zone-border-style,dashed);background-size:cover;background-color:var(--mod-drop-zone-background-color,var(--spectrum-drop-zone-background-color))}:host([dragged]){--mod-drop-zone-border-style:var(--mod-drop-zone-border-style--dragged,var(--mod-drop-zone-border-style-dragged,solid));--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity,var(--spectrum-drop-zone-background-color-opacity)));--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color-hover,var(--spectrum-drop-zone-illustration-color-hover))}:host([filled]){--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity-filled,var(--spectrum-drop-zone-background-color-opacity-filled)));--mod-illustrated-message-display:none}:host([filled][dragged]){--mod-drop-zone-content-display:flex}:host(:focus-visible){--mod-drop-zone-border-style:solid;--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));outline:0}.spectrum-DropZone-content{display:var(--mod-drop-zone-content-display,none);block-size:100%;z-index:1;justify-content:center;align-items:center;position:relative}.spectrum-DropZone-button{box-sizing:border-box;block-size:var(--mod-drop-zone-content-height,var(--spectrum-drop-zone-content-height));max-inline-size:var(--mod-drop-zone-content-max-width,var(--spectrum-drop-zone-content-max-width));font-family:var(--mod-drop-zone-content-font-family,var(--spectrum-drop-zone-content-font-family));font-weight:var(--mod-drop-zone-content-font-weight,var(--spectrum-drop-zone-content-font-weight));font-style:var(--mod-drop-zone-content-font-style,var(--spectrum-drop-zone-content-font-style));line-height:var(--mod-drop-zone-content-line-height,var(--spectrum-drop-zone-content-line-height));border:none;padding-block-start:var(--mod-drop-zone-content-top-to-text,var(--spectrum-drop-zone-content-top-to-text));padding-block-end:var(--mod-drop-zone-content-bottom-to-text,var(--spectrum-drop-zone-content-bottom-to-text))}.spectrum-DropZone-button,.spectrum-DropZone-button:focus{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}@media (hover:hover){.spectrum-DropZone-button:hover{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}}@media (forced-colors:active){:host{--highcontrast-drop-zone-illustration-color:CanvasText;--highcontrast-drop-zone-border-color-hover:Highlight;--highcontrast-illustrated-message-illustration-color:var(--highcontrast-drop-zone-illustration-color)}}:host{display:block}::slotted(*){font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));font-style:var(--spectrum-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));margin-top:0;margin-bottom:0}\n`;\nexport default styles;"],
   "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
   "names": ["css", "styles"]
 }

package/src/spectrum-config.js

@@ -27,6 +27,7 @@ const config = {
             components: [
                 converter.classToHost(),
                 converter.classToAttribute('is-dragged', 'dragged'),
+                converter.classToAttribute('is-filled', 'filled'),
                 converter.classToSlotted(
                     'spectrum-IllustratedMessage-illustration'
                 ),

package/src/spectrum-dropzone.css.dev.js

@@ -1,7 +1,7 @@
 "use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-    :host{--spectrum-drop-zone-padding:var(--spectrum-spacing-400);--spectrum-drop-zone-illustration-to-heading:var(--spectrum-spacing-400);--spectrum-drop-zone-heading-to-body:var(--spectrum-spacing-75);--spectrum-drop-zone-border-width:var(--spectrum-border-width-200);--spectrum-drop-zone-corner-radius:var(--spectrum-corner-radius-100);--spectrum-drop-zone-border-color:var(--spectrum-gray-300);--spectrum-drop-zone-heading-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-heading-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-drop-zone-heading-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-title-size);--spectrum-drop-zone-heading-line-height:var(--spectrum-heading-line-height);--spectrum-drop-zone-heading-color:var(--spectrum-heading-color);--spectrum-drop-zone-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-drop-zone-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-drop-zone-body-font-size:var(--spectrum-drop-zone-body-size);--spectrum-drop-zone-body-line-height:var(--spectrum-body-line-height);--spectrum-drop-zone-body-color:var(--spectrum-body-color);--spectrum-drop-zone-background-color:var(--spectrum-drop-zone-background-color-rgb);--spectrum-drop-zone-border-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-drop-zone-illustration-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-height:var(--spectrum-component-height-300);--spectrum-drop-zone-content-max-width:var(--spectrum-drop-zone-content-maximum-width);--spectrum-drop-zone-content-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-drop-zone-content-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-drop-zone-content-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-drop-zone-content-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-content-font-weight:var(--spectrum-bold-font-weight);--spectrum-drop-zone-content-font-style:var(--spectrum-default-font-style);--spectrum-drop-zone-content-font-size:var(--spectrum-font-size-300);--spectrum-drop-zone-content-line-height:var(--spectrum-line-height-100);--spectrum-drop-zone-content-background-color:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-color:var(--spectrum-white);--mod-illustrated-message-content-maximum-width:var(--mod-drop-zone-content-maximum-width,var(--spectrum-drop-zone-content-maximum-width));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color,var(--spectrum-drop-zone-illustration-color));--mod-illustrated-message-title-to-heading:var(--mod-drop-zone-illustration-to-heading,var(--spectrum-drop-zone-illustration-to-heading));--mod-illustrated-message-heading-to-body:var(--mod-drop-zone-heading-to-body,var(--spectrum-drop-zone-heading-to-body));--mod-illustrated-message-title-font-family:var(--mod-drop-zone-heading-font-family,var(--spectrum-drop-zone-heading-font-family));--mod-illustrated-message-title-font-weight:var(--mod-drop-zone-heading-font-weight,var(--spectrum-drop-zone-heading-font-weight));--mod-illustrated-message-title-font-style:var(--mod-drop-zone-heading-font-style,var(--spectrum-drop-zone-heading-font-style));--mod-illustrated-message-title-font-size:var(--mod-drop-zone-heading-font-size,var(--spectrum-drop-zone-heading-font-size));--mod-illustrated-message-title-line-height:var(--mod-drop-zone-heading-line-height,var(--spectrum-drop-zone-heading-line-height));--mod-illustrated-message-title-color:var(--mod-drop-zone-heading-color,var(--spectrum-drop-zone-heading-color));--mod-illustrated-message-description-position:relative;--mod-illustrated-message-description-z-index:1;--mod-illustrated-message-heading-to-description:0;--mod-illustrated-message-description-font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));--mod-illustrated-message-description-font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));--mod-illustrated-message-description-font-style:var(--mod-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));--mod-illustrated-message-description-font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));--mod-illustrated-message-description-line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));--mod-illustrated-message-description-color:var(--mod-drop-zone-body-color,var(--spectrum-drop-zone-body-color));--mod-actionbutton-font-size:var(--mod-drop-zone-content-font-size,var(--spectrum-drop-zone-content-font-size));--mod-actionbutton-label-color:var(--mod-drop-zone-content-color,var(--spectrum-drop-zone-content-color));--mod-actionbutton-edge-to-text:var(--mod-drop-zone-content-edge-to-text,var(--spectrum-drop-zone-content-edge-to-text))}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-cjk-title-size)}:host{box-sizing:border-box;inline-size:var(--mod-drop-zone-width,var(--spectrum-drop-zone-width));padding:calc(var(--mod-drop-zone-padding,var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width)));text-align:center;border-color:var(--mod-drop-zone-border-color,var(--spectrum-drop-zone-border-color));border-width:var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width));border-radius:var(--mod-drop-zone-corner-radius,var(--spectrum-drop-zone-corner-radius));border-style:var(--mod-drop-zone-border-style,dashed);background-size:cover;background-color:var(--mod-drop-zone-background-color,var(--spectrum-drop-zone-background-color))}:host([dragged]){--mod-drop-zone-border-style:var(--mod-drop-zone-border-style--dragged,var(--mod-drop-zone-border-style-dragged,solid));--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity,var(--spectrum-drop-zone-background-color-opacity)));--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color-hover,var(--spectrum-drop-zone-illustration-color-hover))}:host .is-filled{--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity-filled,var(--spectrum-drop-zone-background-color-opacity-filled)));--mod-illustrated-message-display:none}:host([dragged]) .is-filled{--mod-drop-zone-content-display:flex}:host(:focus-visible){--mod-drop-zone-border-style:solid;--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));outline:0}.spectrum-DropZone-content{display:var(--mod-drop-zone-content-display,none);z-index:1;justify-content:center;align-items:center;block-size:100%;position:relative}.spectrum-DropZone-button{box-sizing:border-box;block-size:var(--mod-drop-zone-content-height,var(--spectrum-drop-zone-content-height));max-inline-size:var(--mod-drop-zone-content-max-width,var(--spectrum-drop-zone-content-max-width));font-family:var(--mod-drop-zone-content-font-family,var(--spectrum-drop-zone-content-font-family));font-weight:var(--mod-drop-zone-content-font-weight,var(--spectrum-drop-zone-content-font-weight));font-style:var(--mod-drop-zone-content-font-style,var(--spectrum-drop-zone-content-font-style));line-height:var(--mod-drop-zone-content-line-height,var(--spectrum-drop-zone-content-line-height));border:none;padding-block-start:var(--mod-drop-zone-content-top-to-text,var(--spectrum-drop-zone-content-top-to-text));padding-block-end:var(--mod-drop-zone-content-bottom-to-text,var(--spectrum-drop-zone-content-bottom-to-text))}.spectrum-DropZone-button,.spectrum-DropZone-button:focus{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}@media (hover:hover){.spectrum-DropZone-button:hover{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}}@media (forced-colors:active){:host{--highcontrast-drop-zone-illustration-color:CanvasText;--highcontrast-drop-zone-border-color-hover:Highlight;--highcontrast-illustrated-message-illustration-color:var(--highcontrast-drop-zone-illustration-color)}}
+    :host{--spectrum-drop-zone-padding:var(--spectrum-spacing-400);--spectrum-drop-zone-illustration-to-heading:var(--spectrum-spacing-400);--spectrum-drop-zone-heading-to-body:var(--spectrum-spacing-75);--spectrum-drop-zone-border-width:var(--spectrum-border-width-200);--spectrum-drop-zone-corner-radius:var(--spectrum-corner-radius-100);--spectrum-drop-zone-border-color:var(--spectrum-gray-300);--spectrum-drop-zone-heading-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-heading-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-drop-zone-heading-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-title-size);--spectrum-drop-zone-heading-line-height:var(--spectrum-heading-line-height);--spectrum-drop-zone-heading-color:var(--spectrum-heading-color);--spectrum-drop-zone-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-drop-zone-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-drop-zone-body-font-size:var(--spectrum-drop-zone-body-size);--spectrum-drop-zone-body-line-height:var(--spectrum-body-line-height);--spectrum-drop-zone-body-color:var(--spectrum-body-color);--spectrum-drop-zone-background-color:var(--spectrum-drop-zone-background-color-rgb);--spectrum-drop-zone-border-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-drop-zone-illustration-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-height:var(--spectrum-component-height-300);--spectrum-drop-zone-content-max-width:var(--spectrum-drop-zone-content-maximum-width);--spectrum-drop-zone-content-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-drop-zone-content-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-drop-zone-content-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-drop-zone-content-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-content-font-weight:var(--spectrum-bold-font-weight);--spectrum-drop-zone-content-font-style:var(--spectrum-default-font-style);--spectrum-drop-zone-content-font-size:var(--spectrum-font-size-300);--spectrum-drop-zone-content-line-height:var(--spectrum-line-height-100);--spectrum-drop-zone-content-background-color:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-color:var(--spectrum-white);--mod-illustrated-message-content-maximum-width:var(--mod-drop-zone-content-maximum-width,var(--spectrum-drop-zone-content-maximum-width));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color,var(--spectrum-drop-zone-illustration-color));--mod-illustrated-message-title-to-heading:var(--mod-drop-zone-illustration-to-heading,var(--spectrum-drop-zone-illustration-to-heading));--mod-illustrated-message-heading-to-body:var(--mod-drop-zone-heading-to-body,var(--spectrum-drop-zone-heading-to-body));--mod-illustrated-message-title-font-family:var(--mod-drop-zone-heading-font-family,var(--spectrum-drop-zone-heading-font-family));--mod-illustrated-message-title-font-weight:var(--mod-drop-zone-heading-font-weight,var(--spectrum-drop-zone-heading-font-weight));--mod-illustrated-message-title-font-style:var(--mod-drop-zone-heading-font-style,var(--spectrum-drop-zone-heading-font-style));--mod-illustrated-message-title-font-size:var(--mod-drop-zone-heading-font-size,var(--spectrum-drop-zone-heading-font-size));--mod-illustrated-message-title-line-height:var(--mod-drop-zone-heading-line-height,var(--spectrum-drop-zone-heading-line-height));--mod-illustrated-message-title-color:var(--mod-drop-zone-heading-color,var(--spectrum-drop-zone-heading-color));--mod-illustrated-message-description-position:relative;--mod-illustrated-message-description-z-index:1;--mod-illustrated-message-heading-to-description:0;--mod-illustrated-message-description-font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));--mod-illustrated-message-description-font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));--mod-illustrated-message-description-font-style:var(--mod-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));--mod-illustrated-message-description-font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));--mod-illustrated-message-description-line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));--mod-illustrated-message-description-color:var(--mod-drop-zone-body-color,var(--spectrum-drop-zone-body-color));--mod-actionbutton-font-size:var(--mod-drop-zone-content-font-size,var(--spectrum-drop-zone-content-font-size));--mod-actionbutton-label-color:var(--mod-drop-zone-content-color,var(--spectrum-drop-zone-content-color));--mod-actionbutton-edge-to-text:var(--mod-drop-zone-content-edge-to-text,var(--spectrum-drop-zone-content-edge-to-text))}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-cjk-title-size)}:host{box-sizing:border-box;inline-size:var(--mod-drop-zone-width,var(--spectrum-drop-zone-width));padding:calc(var(--mod-drop-zone-padding,var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width)));text-align:center;border-color:var(--mod-drop-zone-border-color,var(--spectrum-drop-zone-border-color));border-width:var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width));border-radius:var(--mod-drop-zone-corner-radius,var(--spectrum-drop-zone-corner-radius));border-style:var(--mod-drop-zone-border-style,dashed);background-size:cover;background-color:var(--mod-drop-zone-background-color,var(--spectrum-drop-zone-background-color))}:host([dragged]){--mod-drop-zone-border-style:var(--mod-drop-zone-border-style--dragged,var(--mod-drop-zone-border-style-dragged,solid));--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity,var(--spectrum-drop-zone-background-color-opacity)));--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color-hover,var(--spectrum-drop-zone-illustration-color-hover))}:host([filled]){--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity-filled,var(--spectrum-drop-zone-background-color-opacity-filled)));--mod-illustrated-message-display:none}:host([filled][dragged]){--mod-drop-zone-content-display:flex}:host(:focus-visible){--mod-drop-zone-border-style:solid;--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));outline:0}.spectrum-DropZone-content{display:var(--mod-drop-zone-content-display,none);block-size:100%;z-index:1;justify-content:center;align-items:center;position:relative}.spectrum-DropZone-button{box-sizing:border-box;block-size:var(--mod-drop-zone-content-height,var(--spectrum-drop-zone-content-height));max-inline-size:var(--mod-drop-zone-content-max-width,var(--spectrum-drop-zone-content-max-width));font-family:var(--mod-drop-zone-content-font-family,var(--spectrum-drop-zone-content-font-family));font-weight:var(--mod-drop-zone-content-font-weight,var(--spectrum-drop-zone-content-font-weight));font-style:var(--mod-drop-zone-content-font-style,var(--spectrum-drop-zone-content-font-style));line-height:var(--mod-drop-zone-content-line-height,var(--spectrum-drop-zone-content-line-height));border:none;padding-block-start:var(--mod-drop-zone-content-top-to-text,var(--spectrum-drop-zone-content-top-to-text));padding-block-end:var(--mod-drop-zone-content-bottom-to-text,var(--spectrum-drop-zone-content-bottom-to-text))}.spectrum-DropZone-button,.spectrum-DropZone-button:focus{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}@media (hover:hover){.spectrum-DropZone-button:hover{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}}@media (forced-colors:active){:host{--highcontrast-drop-zone-illustration-color:CanvasText;--highcontrast-drop-zone-border-color-hover:Highlight;--highcontrast-illustrated-message-illustration-color:var(--highcontrast-drop-zone-illustration-color)}}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-dropzone.css.dev.js.map

package/src/spectrum-dropzone.css.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-dropzone.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--spectrum-drop-zone-padding:var(--spectrum-spacing-400);--spectrum-drop-zone-illustration-to-heading:var(--spectrum-spacing-400);--spectrum-drop-zone-heading-to-body:var(--spectrum-spacing-75);--spectrum-drop-zone-border-width:var(--spectrum-border-width-200);--spectrum-drop-zone-corner-radius:var(--spectrum-corner-radius-100);--spectrum-drop-zone-border-color:var(--spectrum-gray-300);--spectrum-drop-zone-heading-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-heading-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-drop-zone-heading-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-title-size);--spectrum-drop-zone-heading-line-height:var(--spectrum-heading-line-height);--spectrum-drop-zone-heading-color:var(--spectrum-heading-color);--spectrum-drop-zone-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-drop-zone-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-drop-zone-body-font-size:var(--spectrum-drop-zone-body-size);--spectrum-drop-zone-body-line-height:var(--spectrum-body-line-height);--spectrum-drop-zone-body-color:var(--spectrum-body-color);--spectrum-drop-zone-background-color:var(--spectrum-drop-zone-background-color-rgb);--spectrum-drop-zone-border-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-drop-zone-illustration-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-height:var(--spectrum-component-height-300);--spectrum-drop-zone-content-max-width:var(--spectrum-drop-zone-content-maximum-width);--spectrum-drop-zone-content-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-drop-zone-content-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-drop-zone-content-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-drop-zone-content-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-content-font-weight:var(--spectrum-bold-font-weight);--spectrum-drop-zone-content-font-style:var(--spectrum-default-font-style);--spectrum-drop-zone-content-font-size:var(--spectrum-font-size-300);--spectrum-drop-zone-content-line-height:var(--spectrum-line-height-100);--spectrum-drop-zone-content-background-color:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-color:var(--spectrum-white);--mod-illustrated-message-content-maximum-width:var(--mod-drop-zone-content-maximum-width,var(--spectrum-drop-zone-content-maximum-width));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color,var(--spectrum-drop-zone-illustration-color));--mod-illustrated-message-title-to-heading:var(--mod-drop-zone-illustration-to-heading,var(--spectrum-drop-zone-illustration-to-heading));--mod-illustrated-message-heading-to-body:var(--mod-drop-zone-heading-to-body,var(--spectrum-drop-zone-heading-to-body));--mod-illustrated-message-title-font-family:var(--mod-drop-zone-heading-font-family,var(--spectrum-drop-zone-heading-font-family));--mod-illustrated-message-title-font-weight:var(--mod-drop-zone-heading-font-weight,var(--spectrum-drop-zone-heading-font-weight));--mod-illustrated-message-title-font-style:var(--mod-drop-zone-heading-font-style,var(--spectrum-drop-zone-heading-font-style));--mod-illustrated-message-title-font-size:var(--mod-drop-zone-heading-font-size,var(--spectrum-drop-zone-heading-font-size));--mod-illustrated-message-title-line-height:var(--mod-drop-zone-heading-line-height,var(--spectrum-drop-zone-heading-line-height));--mod-illustrated-message-title-color:var(--mod-drop-zone-heading-color,var(--spectrum-drop-zone-heading-color));--mod-illustrated-message-description-position:relative;--mod-illustrated-message-description-z-index:1;--mod-illustrated-message-heading-to-description:0;--mod-illustrated-message-description-font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));--mod-illustrated-message-description-font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));--mod-illustrated-message-description-font-style:var(--mod-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));--mod-illustrated-message-description-font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));--mod-illustrated-message-description-line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));--mod-illustrated-message-description-color:var(--mod-drop-zone-body-color,var(--spectrum-drop-zone-body-color));--mod-actionbutton-font-size:var(--mod-drop-zone-content-font-size,var(--spectrum-drop-zone-content-font-size));--mod-actionbutton-label-color:var(--mod-drop-zone-content-color,var(--spectrum-drop-zone-content-color));--mod-actionbutton-edge-to-text:var(--mod-drop-zone-content-edge-to-text,var(--spectrum-drop-zone-content-edge-to-text))}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-cjk-title-size)}:host{box-sizing:border-box;inline-size:var(--mod-drop-zone-width,var(--spectrum-drop-zone-width));padding:calc(var(--mod-drop-zone-padding,var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width)));text-align:center;border-color:var(--mod-drop-zone-border-color,var(--spectrum-drop-zone-border-color));border-width:var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width));border-radius:var(--mod-drop-zone-corner-radius,var(--spectrum-drop-zone-corner-radius));border-style:var(--mod-drop-zone-border-style,dashed);background-size:cover;background-color:var(--mod-drop-zone-background-color,var(--spectrum-drop-zone-background-color))}:host([dragged]){--mod-drop-zone-border-style:var(--mod-drop-zone-border-style--dragged,var(--mod-drop-zone-border-style-dragged,solid));--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity,var(--spectrum-drop-zone-background-color-opacity)));--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color-hover,var(--spectrum-drop-zone-illustration-color-hover))}:host .is-filled{--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity-filled,var(--spectrum-drop-zone-background-color-opacity-filled)));--mod-illustrated-message-display:none}:host([dragged]) .is-filled{--mod-drop-zone-content-display:flex}:host(:focus-visible){--mod-drop-zone-border-style:solid;--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));outline:0}.spectrum-DropZone-content{display:var(--mod-drop-zone-content-display,none);z-index:1;justify-content:center;align-items:center;block-size:100%;position:relative}.spectrum-DropZone-button{box-sizing:border-box;block-size:var(--mod-drop-zone-content-height,var(--spectrum-drop-zone-content-height));max-inline-size:var(--mod-drop-zone-content-max-width,var(--spectrum-drop-zone-content-max-width));font-family:var(--mod-drop-zone-content-font-family,var(--spectrum-drop-zone-content-font-family));font-weight:var(--mod-drop-zone-content-font-weight,var(--spectrum-drop-zone-content-font-weight));font-style:var(--mod-drop-zone-content-font-style,var(--spectrum-drop-zone-content-font-style));line-height:var(--mod-drop-zone-content-line-height,var(--spectrum-drop-zone-content-line-height));border:none;padding-block-start:var(--mod-drop-zone-content-top-to-text,var(--spectrum-drop-zone-content-top-to-text));padding-block-end:var(--mod-drop-zone-content-bottom-to-text,var(--spectrum-drop-zone-content-bottom-to-text))}.spectrum-DropZone-button,.spectrum-DropZone-button:focus{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}@media (hover:hover){.spectrum-DropZone-button:hover{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}}@media (forced-colors:active){:host{--highcontrast-drop-zone-illustration-color:CanvasText;--highcontrast-drop-zone-border-color-hover:Highlight;--highcontrast-illustrated-message-illustration-color:var(--highcontrast-drop-zone-illustration-color)}}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--spectrum-drop-zone-padding:var(--spectrum-spacing-400);--spectrum-drop-zone-illustration-to-heading:var(--spectrum-spacing-400);--spectrum-drop-zone-heading-to-body:var(--spectrum-spacing-75);--spectrum-drop-zone-border-width:var(--spectrum-border-width-200);--spectrum-drop-zone-corner-radius:var(--spectrum-corner-radius-100);--spectrum-drop-zone-border-color:var(--spectrum-gray-300);--spectrum-drop-zone-heading-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-heading-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-drop-zone-heading-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-title-size);--spectrum-drop-zone-heading-line-height:var(--spectrum-heading-line-height);--spectrum-drop-zone-heading-color:var(--spectrum-heading-color);--spectrum-drop-zone-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-drop-zone-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-drop-zone-body-font-size:var(--spectrum-drop-zone-body-size);--spectrum-drop-zone-body-line-height:var(--spectrum-body-line-height);--spectrum-drop-zone-body-color:var(--spectrum-body-color);--spectrum-drop-zone-background-color:var(--spectrum-drop-zone-background-color-rgb);--spectrum-drop-zone-border-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-drop-zone-illustration-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-height:var(--spectrum-component-height-300);--spectrum-drop-zone-content-max-width:var(--spectrum-drop-zone-content-maximum-width);--spectrum-drop-zone-content-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-drop-zone-content-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-drop-zone-content-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-drop-zone-content-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-content-font-weight:var(--spectrum-bold-font-weight);--spectrum-drop-zone-content-font-style:var(--spectrum-default-font-style);--spectrum-drop-zone-content-font-size:var(--spectrum-font-size-300);--spectrum-drop-zone-content-line-height:var(--spectrum-line-height-100);--spectrum-drop-zone-content-background-color:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-color:var(--spectrum-white);--mod-illustrated-message-content-maximum-width:var(--mod-drop-zone-content-maximum-width,var(--spectrum-drop-zone-content-maximum-width));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color,var(--spectrum-drop-zone-illustration-color));--mod-illustrated-message-title-to-heading:var(--mod-drop-zone-illustration-to-heading,var(--spectrum-drop-zone-illustration-to-heading));--mod-illustrated-message-heading-to-body:var(--mod-drop-zone-heading-to-body,var(--spectrum-drop-zone-heading-to-body));--mod-illustrated-message-title-font-family:var(--mod-drop-zone-heading-font-family,var(--spectrum-drop-zone-heading-font-family));--mod-illustrated-message-title-font-weight:var(--mod-drop-zone-heading-font-weight,var(--spectrum-drop-zone-heading-font-weight));--mod-illustrated-message-title-font-style:var(--mod-drop-zone-heading-font-style,var(--spectrum-drop-zone-heading-font-style));--mod-illustrated-message-title-font-size:var(--mod-drop-zone-heading-font-size,var(--spectrum-drop-zone-heading-font-size));--mod-illustrated-message-title-line-height:var(--mod-drop-zone-heading-line-height,var(--spectrum-drop-zone-heading-line-height));--mod-illustrated-message-title-color:var(--mod-drop-zone-heading-color,var(--spectrum-drop-zone-heading-color));--mod-illustrated-message-description-position:relative;--mod-illustrated-message-description-z-index:1;--mod-illustrated-message-heading-to-description:0;--mod-illustrated-message-description-font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));--mod-illustrated-message-description-font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));--mod-illustrated-message-description-font-style:var(--mod-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));--mod-illustrated-message-description-font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));--mod-illustrated-message-description-line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));--mod-illustrated-message-description-color:var(--mod-drop-zone-body-color,var(--spectrum-drop-zone-body-color));--mod-actionbutton-font-size:var(--mod-drop-zone-content-font-size,var(--spectrum-drop-zone-content-font-size));--mod-actionbutton-label-color:var(--mod-drop-zone-content-color,var(--spectrum-drop-zone-content-color));--mod-actionbutton-edge-to-text:var(--mod-drop-zone-content-edge-to-text,var(--spectrum-drop-zone-content-edge-to-text))}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-cjk-title-size)}:host{box-sizing:border-box;inline-size:var(--mod-drop-zone-width,var(--spectrum-drop-zone-width));padding:calc(var(--mod-drop-zone-padding,var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width)));text-align:center;border-color:var(--mod-drop-zone-border-color,var(--spectrum-drop-zone-border-color));border-width:var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width));border-radius:var(--mod-drop-zone-corner-radius,var(--spectrum-drop-zone-corner-radius));border-style:var(--mod-drop-zone-border-style,dashed);background-size:cover;background-color:var(--mod-drop-zone-background-color,var(--spectrum-drop-zone-background-color))}:host([dragged]){--mod-drop-zone-border-style:var(--mod-drop-zone-border-style--dragged,var(--mod-drop-zone-border-style-dragged,solid));--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity,var(--spectrum-drop-zone-background-color-opacity)));--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color-hover,var(--spectrum-drop-zone-illustration-color-hover))}:host([filled]){--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity-filled,var(--spectrum-drop-zone-background-color-opacity-filled)));--mod-illustrated-message-display:none}:host([filled][dragged]){--mod-drop-zone-content-display:flex}:host(:focus-visible){--mod-drop-zone-border-style:solid;--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));outline:0}.spectrum-DropZone-content{display:var(--mod-drop-zone-content-display,none);block-size:100%;z-index:1;justify-content:center;align-items:center;position:relative}.spectrum-DropZone-button{box-sizing:border-box;block-size:var(--mod-drop-zone-content-height,var(--spectrum-drop-zone-content-height));max-inline-size:var(--mod-drop-zone-content-max-width,var(--spectrum-drop-zone-content-max-width));font-family:var(--mod-drop-zone-content-font-family,var(--spectrum-drop-zone-content-font-family));font-weight:var(--mod-drop-zone-content-font-weight,var(--spectrum-drop-zone-content-font-weight));font-style:var(--mod-drop-zone-content-font-style,var(--spectrum-drop-zone-content-font-style));line-height:var(--mod-drop-zone-content-line-height,var(--spectrum-drop-zone-content-line-height));border:none;padding-block-start:var(--mod-drop-zone-content-top-to-text,var(--spectrum-drop-zone-content-top-to-text));padding-block-end:var(--mod-drop-zone-content-bottom-to-text,var(--spectrum-drop-zone-content-bottom-to-text))}.spectrum-DropZone-button,.spectrum-DropZone-button:focus{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}@media (hover:hover){.spectrum-DropZone-button:hover{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}}@media (forced-colors:active){:host{--highcontrast-drop-zone-illustration-color:CanvasText;--highcontrast-drop-zone-border-color-hover:Highlight;--highcontrast-illustrated-message-illustration-color:var(--highcontrast-drop-zone-illustration-color)}}\n`;\nexport default styles;"],
   "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
   "names": []
 }

package/src/spectrum-dropzone.css.js

@@ -1,4 +1,4 @@
 "use strict";import{css as o}from"@spectrum-web-components/base";const e=o`
-    :host{--spectrum-drop-zone-padding:var(--spectrum-spacing-400);--spectrum-drop-zone-illustration-to-heading:var(--spectrum-spacing-400);--spectrum-drop-zone-heading-to-body:var(--spectrum-spacing-75);--spectrum-drop-zone-border-width:var(--spectrum-border-width-200);--spectrum-drop-zone-corner-radius:var(--spectrum-corner-radius-100);--spectrum-drop-zone-border-color:var(--spectrum-gray-300);--spectrum-drop-zone-heading-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-heading-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-drop-zone-heading-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-title-size);--spectrum-drop-zone-heading-line-height:var(--spectrum-heading-line-height);--spectrum-drop-zone-heading-color:var(--spectrum-heading-color);--spectrum-drop-zone-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-drop-zone-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-drop-zone-body-font-size:var(--spectrum-drop-zone-body-size);--spectrum-drop-zone-body-line-height:var(--spectrum-body-line-height);--spectrum-drop-zone-body-color:var(--spectrum-body-color);--spectrum-drop-zone-background-color:var(--spectrum-drop-zone-background-color-rgb);--spectrum-drop-zone-border-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-drop-zone-illustration-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-height:var(--spectrum-component-height-300);--spectrum-drop-zone-content-max-width:var(--spectrum-drop-zone-content-maximum-width);--spectrum-drop-zone-content-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-drop-zone-content-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-drop-zone-content-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-drop-zone-content-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-content-font-weight:var(--spectrum-bold-font-weight);--spectrum-drop-zone-content-font-style:var(--spectrum-default-font-style);--spectrum-drop-zone-content-font-size:var(--spectrum-font-size-300);--spectrum-drop-zone-content-line-height:var(--spectrum-line-height-100);--spectrum-drop-zone-content-background-color:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-color:var(--spectrum-white);--mod-illustrated-message-content-maximum-width:var(--mod-drop-zone-content-maximum-width,var(--spectrum-drop-zone-content-maximum-width));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color,var(--spectrum-drop-zone-illustration-color));--mod-illustrated-message-title-to-heading:var(--mod-drop-zone-illustration-to-heading,var(--spectrum-drop-zone-illustration-to-heading));--mod-illustrated-message-heading-to-body:var(--mod-drop-zone-heading-to-body,var(--spectrum-drop-zone-heading-to-body));--mod-illustrated-message-title-font-family:var(--mod-drop-zone-heading-font-family,var(--spectrum-drop-zone-heading-font-family));--mod-illustrated-message-title-font-weight:var(--mod-drop-zone-heading-font-weight,var(--spectrum-drop-zone-heading-font-weight));--mod-illustrated-message-title-font-style:var(--mod-drop-zone-heading-font-style,var(--spectrum-drop-zone-heading-font-style));--mod-illustrated-message-title-font-size:var(--mod-drop-zone-heading-font-size,var(--spectrum-drop-zone-heading-font-size));--mod-illustrated-message-title-line-height:var(--mod-drop-zone-heading-line-height,var(--spectrum-drop-zone-heading-line-height));--mod-illustrated-message-title-color:var(--mod-drop-zone-heading-color,var(--spectrum-drop-zone-heading-color));--mod-illustrated-message-description-position:relative;--mod-illustrated-message-description-z-index:1;--mod-illustrated-message-heading-to-description:0;--mod-illustrated-message-description-font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));--mod-illustrated-message-description-font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));--mod-illustrated-message-description-font-style:var(--mod-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));--mod-illustrated-message-description-font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));--mod-illustrated-message-description-line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));--mod-illustrated-message-description-color:var(--mod-drop-zone-body-color,var(--spectrum-drop-zone-body-color));--mod-actionbutton-font-size:var(--mod-drop-zone-content-font-size,var(--spectrum-drop-zone-content-font-size));--mod-actionbutton-label-color:var(--mod-drop-zone-content-color,var(--spectrum-drop-zone-content-color));--mod-actionbutton-edge-to-text:var(--mod-drop-zone-content-edge-to-text,var(--spectrum-drop-zone-content-edge-to-text))}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-cjk-title-size)}:host{box-sizing:border-box;inline-size:var(--mod-drop-zone-width,var(--spectrum-drop-zone-width));padding:calc(var(--mod-drop-zone-padding,var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width)));text-align:center;border-color:var(--mod-drop-zone-border-color,var(--spectrum-drop-zone-border-color));border-width:var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width));border-radius:var(--mod-drop-zone-corner-radius,var(--spectrum-drop-zone-corner-radius));border-style:var(--mod-drop-zone-border-style,dashed);background-size:cover;background-color:var(--mod-drop-zone-background-color,var(--spectrum-drop-zone-background-color))}:host([dragged]){--mod-drop-zone-border-style:var(--mod-drop-zone-border-style--dragged,var(--mod-drop-zone-border-style-dragged,solid));--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity,var(--spectrum-drop-zone-background-color-opacity)));--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color-hover,var(--spectrum-drop-zone-illustration-color-hover))}:host .is-filled{--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity-filled,var(--spectrum-drop-zone-background-color-opacity-filled)));--mod-illustrated-message-display:none}:host([dragged]) .is-filled{--mod-drop-zone-content-display:flex}:host(:focus-visible){--mod-drop-zone-border-style:solid;--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));outline:0}.spectrum-DropZone-content{display:var(--mod-drop-zone-content-display,none);z-index:1;justify-content:center;align-items:center;block-size:100%;position:relative}.spectrum-DropZone-button{box-sizing:border-box;block-size:var(--mod-drop-zone-content-height,var(--spectrum-drop-zone-content-height));max-inline-size:var(--mod-drop-zone-content-max-width,var(--spectrum-drop-zone-content-max-width));font-family:var(--mod-drop-zone-content-font-family,var(--spectrum-drop-zone-content-font-family));font-weight:var(--mod-drop-zone-content-font-weight,var(--spectrum-drop-zone-content-font-weight));font-style:var(--mod-drop-zone-content-font-style,var(--spectrum-drop-zone-content-font-style));line-height:var(--mod-drop-zone-content-line-height,var(--spectrum-drop-zone-content-line-height));border:none;padding-block-start:var(--mod-drop-zone-content-top-to-text,var(--spectrum-drop-zone-content-top-to-text));padding-block-end:var(--mod-drop-zone-content-bottom-to-text,var(--spectrum-drop-zone-content-bottom-to-text))}.spectrum-DropZone-button,.spectrum-DropZone-button:focus{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}@media (hover:hover){.spectrum-DropZone-button:hover{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}}@media (forced-colors:active){:host{--highcontrast-drop-zone-illustration-color:CanvasText;--highcontrast-drop-zone-border-color-hover:Highlight;--highcontrast-illustrated-message-illustration-color:var(--highcontrast-drop-zone-illustration-color)}}
+    :host{--spectrum-drop-zone-padding:var(--spectrum-spacing-400);--spectrum-drop-zone-illustration-to-heading:var(--spectrum-spacing-400);--spectrum-drop-zone-heading-to-body:var(--spectrum-spacing-75);--spectrum-drop-zone-border-width:var(--spectrum-border-width-200);--spectrum-drop-zone-corner-radius:var(--spectrum-corner-radius-100);--spectrum-drop-zone-border-color:var(--spectrum-gray-300);--spectrum-drop-zone-heading-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-heading-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-drop-zone-heading-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-title-size);--spectrum-drop-zone-heading-line-height:var(--spectrum-heading-line-height);--spectrum-drop-zone-heading-color:var(--spectrum-heading-color);--spectrum-drop-zone-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-drop-zone-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-drop-zone-body-font-size:var(--spectrum-drop-zone-body-size);--spectrum-drop-zone-body-line-height:var(--spectrum-body-line-height);--spectrum-drop-zone-body-color:var(--spectrum-body-color);--spectrum-drop-zone-background-color:var(--spectrum-drop-zone-background-color-rgb);--spectrum-drop-zone-border-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-drop-zone-illustration-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-height:var(--spectrum-component-height-300);--spectrum-drop-zone-content-max-width:var(--spectrum-drop-zone-content-maximum-width);--spectrum-drop-zone-content-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-drop-zone-content-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-drop-zone-content-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-drop-zone-content-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-content-font-weight:var(--spectrum-bold-font-weight);--spectrum-drop-zone-content-font-style:var(--spectrum-default-font-style);--spectrum-drop-zone-content-font-size:var(--spectrum-font-size-300);--spectrum-drop-zone-content-line-height:var(--spectrum-line-height-100);--spectrum-drop-zone-content-background-color:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-color:var(--spectrum-white);--mod-illustrated-message-content-maximum-width:var(--mod-drop-zone-content-maximum-width,var(--spectrum-drop-zone-content-maximum-width));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color,var(--spectrum-drop-zone-illustration-color));--mod-illustrated-message-title-to-heading:var(--mod-drop-zone-illustration-to-heading,var(--spectrum-drop-zone-illustration-to-heading));--mod-illustrated-message-heading-to-body:var(--mod-drop-zone-heading-to-body,var(--spectrum-drop-zone-heading-to-body));--mod-illustrated-message-title-font-family:var(--mod-drop-zone-heading-font-family,var(--spectrum-drop-zone-heading-font-family));--mod-illustrated-message-title-font-weight:var(--mod-drop-zone-heading-font-weight,var(--spectrum-drop-zone-heading-font-weight));--mod-illustrated-message-title-font-style:var(--mod-drop-zone-heading-font-style,var(--spectrum-drop-zone-heading-font-style));--mod-illustrated-message-title-font-size:var(--mod-drop-zone-heading-font-size,var(--spectrum-drop-zone-heading-font-size));--mod-illustrated-message-title-line-height:var(--mod-drop-zone-heading-line-height,var(--spectrum-drop-zone-heading-line-height));--mod-illustrated-message-title-color:var(--mod-drop-zone-heading-color,var(--spectrum-drop-zone-heading-color));--mod-illustrated-message-description-position:relative;--mod-illustrated-message-description-z-index:1;--mod-illustrated-message-heading-to-description:0;--mod-illustrated-message-description-font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));--mod-illustrated-message-description-font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));--mod-illustrated-message-description-font-style:var(--mod-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));--mod-illustrated-message-description-font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));--mod-illustrated-message-description-line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));--mod-illustrated-message-description-color:var(--mod-drop-zone-body-color,var(--spectrum-drop-zone-body-color));--mod-actionbutton-font-size:var(--mod-drop-zone-content-font-size,var(--spectrum-drop-zone-content-font-size));--mod-actionbutton-label-color:var(--mod-drop-zone-content-color,var(--spectrum-drop-zone-content-color));--mod-actionbutton-edge-to-text:var(--mod-drop-zone-content-edge-to-text,var(--spectrum-drop-zone-content-edge-to-text))}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-cjk-title-size)}:host{box-sizing:border-box;inline-size:var(--mod-drop-zone-width,var(--spectrum-drop-zone-width));padding:calc(var(--mod-drop-zone-padding,var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width)));text-align:center;border-color:var(--mod-drop-zone-border-color,var(--spectrum-drop-zone-border-color));border-width:var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width));border-radius:var(--mod-drop-zone-corner-radius,var(--spectrum-drop-zone-corner-radius));border-style:var(--mod-drop-zone-border-style,dashed);background-size:cover;background-color:var(--mod-drop-zone-background-color,var(--spectrum-drop-zone-background-color))}:host([dragged]){--mod-drop-zone-border-style:var(--mod-drop-zone-border-style--dragged,var(--mod-drop-zone-border-style-dragged,solid));--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity,var(--spectrum-drop-zone-background-color-opacity)));--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color-hover,var(--spectrum-drop-zone-illustration-color-hover))}:host([filled]){--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity-filled,var(--spectrum-drop-zone-background-color-opacity-filled)));--mod-illustrated-message-display:none}:host([filled][dragged]){--mod-drop-zone-content-display:flex}:host(:focus-visible){--mod-drop-zone-border-style:solid;--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));outline:0}.spectrum-DropZone-content{display:var(--mod-drop-zone-content-display,none);block-size:100%;z-index:1;justify-content:center;align-items:center;position:relative}.spectrum-DropZone-button{box-sizing:border-box;block-size:var(--mod-drop-zone-content-height,var(--spectrum-drop-zone-content-height));max-inline-size:var(--mod-drop-zone-content-max-width,var(--spectrum-drop-zone-content-max-width));font-family:var(--mod-drop-zone-content-font-family,var(--spectrum-drop-zone-content-font-family));font-weight:var(--mod-drop-zone-content-font-weight,var(--spectrum-drop-zone-content-font-weight));font-style:var(--mod-drop-zone-content-font-style,var(--spectrum-drop-zone-content-font-style));line-height:var(--mod-drop-zone-content-line-height,var(--spectrum-drop-zone-content-line-height));border:none;padding-block-start:var(--mod-drop-zone-content-top-to-text,var(--spectrum-drop-zone-content-top-to-text));padding-block-end:var(--mod-drop-zone-content-bottom-to-text,var(--spectrum-drop-zone-content-bottom-to-text))}.spectrum-DropZone-button,.spectrum-DropZone-button:focus{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}@media (hover:hover){.spectrum-DropZone-button:hover{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}}@media (forced-colors:active){:host{--highcontrast-drop-zone-illustration-color:CanvasText;--highcontrast-drop-zone-border-color-hover:Highlight;--highcontrast-illustrated-message-illustration-color:var(--highcontrast-drop-zone-illustration-color)}}
 `;export default e;
 //# sourceMappingURL=spectrum-dropzone.css.js.map

package/src/spectrum-dropzone.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-dropzone.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--spectrum-drop-zone-padding:var(--spectrum-spacing-400);--spectrum-drop-zone-illustration-to-heading:var(--spectrum-spacing-400);--spectrum-drop-zone-heading-to-body:var(--spectrum-spacing-75);--spectrum-drop-zone-border-width:var(--spectrum-border-width-200);--spectrum-drop-zone-corner-radius:var(--spectrum-corner-radius-100);--spectrum-drop-zone-border-color:var(--spectrum-gray-300);--spectrum-drop-zone-heading-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-heading-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-drop-zone-heading-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-title-size);--spectrum-drop-zone-heading-line-height:var(--spectrum-heading-line-height);--spectrum-drop-zone-heading-color:var(--spectrum-heading-color);--spectrum-drop-zone-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-drop-zone-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-drop-zone-body-font-size:var(--spectrum-drop-zone-body-size);--spectrum-drop-zone-body-line-height:var(--spectrum-body-line-height);--spectrum-drop-zone-body-color:var(--spectrum-body-color);--spectrum-drop-zone-background-color:var(--spectrum-drop-zone-background-color-rgb);--spectrum-drop-zone-border-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-drop-zone-illustration-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-height:var(--spectrum-component-height-300);--spectrum-drop-zone-content-max-width:var(--spectrum-drop-zone-content-maximum-width);--spectrum-drop-zone-content-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-drop-zone-content-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-drop-zone-content-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-drop-zone-content-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-content-font-weight:var(--spectrum-bold-font-weight);--spectrum-drop-zone-content-font-style:var(--spectrum-default-font-style);--spectrum-drop-zone-content-font-size:var(--spectrum-font-size-300);--spectrum-drop-zone-content-line-height:var(--spectrum-line-height-100);--spectrum-drop-zone-content-background-color:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-color:var(--spectrum-white);--mod-illustrated-message-content-maximum-width:var(--mod-drop-zone-content-maximum-width,var(--spectrum-drop-zone-content-maximum-width));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color,var(--spectrum-drop-zone-illustration-color));--mod-illustrated-message-title-to-heading:var(--mod-drop-zone-illustration-to-heading,var(--spectrum-drop-zone-illustration-to-heading));--mod-illustrated-message-heading-to-body:var(--mod-drop-zone-heading-to-body,var(--spectrum-drop-zone-heading-to-body));--mod-illustrated-message-title-font-family:var(--mod-drop-zone-heading-font-family,var(--spectrum-drop-zone-heading-font-family));--mod-illustrated-message-title-font-weight:var(--mod-drop-zone-heading-font-weight,var(--spectrum-drop-zone-heading-font-weight));--mod-illustrated-message-title-font-style:var(--mod-drop-zone-heading-font-style,var(--spectrum-drop-zone-heading-font-style));--mod-illustrated-message-title-font-size:var(--mod-drop-zone-heading-font-size,var(--spectrum-drop-zone-heading-font-size));--mod-illustrated-message-title-line-height:var(--mod-drop-zone-heading-line-height,var(--spectrum-drop-zone-heading-line-height));--mod-illustrated-message-title-color:var(--mod-drop-zone-heading-color,var(--spectrum-drop-zone-heading-color));--mod-illustrated-message-description-position:relative;--mod-illustrated-message-description-z-index:1;--mod-illustrated-message-heading-to-description:0;--mod-illustrated-message-description-font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));--mod-illustrated-message-description-font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));--mod-illustrated-message-description-font-style:var(--mod-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));--mod-illustrated-message-description-font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));--mod-illustrated-message-description-line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));--mod-illustrated-message-description-color:var(--mod-drop-zone-body-color,var(--spectrum-drop-zone-body-color));--mod-actionbutton-font-size:var(--mod-drop-zone-content-font-size,var(--spectrum-drop-zone-content-font-size));--mod-actionbutton-label-color:var(--mod-drop-zone-content-color,var(--spectrum-drop-zone-content-color));--mod-actionbutton-edge-to-text:var(--mod-drop-zone-content-edge-to-text,var(--spectrum-drop-zone-content-edge-to-text))}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-cjk-title-size)}:host{box-sizing:border-box;inline-size:var(--mod-drop-zone-width,var(--spectrum-drop-zone-width));padding:calc(var(--mod-drop-zone-padding,var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width)));text-align:center;border-color:var(--mod-drop-zone-border-color,var(--spectrum-drop-zone-border-color));border-width:var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width));border-radius:var(--mod-drop-zone-corner-radius,var(--spectrum-drop-zone-corner-radius));border-style:var(--mod-drop-zone-border-style,dashed);background-size:cover;background-color:var(--mod-drop-zone-background-color,var(--spectrum-drop-zone-background-color))}:host([dragged]){--mod-drop-zone-border-style:var(--mod-drop-zone-border-style--dragged,var(--mod-drop-zone-border-style-dragged,solid));--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity,var(--spectrum-drop-zone-background-color-opacity)));--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color-hover,var(--spectrum-drop-zone-illustration-color-hover))}:host .is-filled{--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity-filled,var(--spectrum-drop-zone-background-color-opacity-filled)));--mod-illustrated-message-display:none}:host([dragged]) .is-filled{--mod-drop-zone-content-display:flex}:host(:focus-visible){--mod-drop-zone-border-style:solid;--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));outline:0}.spectrum-DropZone-content{display:var(--mod-drop-zone-content-display,none);z-index:1;justify-content:center;align-items:center;block-size:100%;position:relative}.spectrum-DropZone-button{box-sizing:border-box;block-size:var(--mod-drop-zone-content-height,var(--spectrum-drop-zone-content-height));max-inline-size:var(--mod-drop-zone-content-max-width,var(--spectrum-drop-zone-content-max-width));font-family:var(--mod-drop-zone-content-font-family,var(--spectrum-drop-zone-content-font-family));font-weight:var(--mod-drop-zone-content-font-weight,var(--spectrum-drop-zone-content-font-weight));font-style:var(--mod-drop-zone-content-font-style,var(--spectrum-drop-zone-content-font-style));line-height:var(--mod-drop-zone-content-line-height,var(--spectrum-drop-zone-content-line-height));border:none;padding-block-start:var(--mod-drop-zone-content-top-to-text,var(--spectrum-drop-zone-content-top-to-text));padding-block-end:var(--mod-drop-zone-content-bottom-to-text,var(--spectrum-drop-zone-content-bottom-to-text))}.spectrum-DropZone-button,.spectrum-DropZone-button:focus{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}@media (hover:hover){.spectrum-DropZone-button:hover{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}}@media (forced-colors:active){:host{--highcontrast-drop-zone-illustration-color:CanvasText;--highcontrast-drop-zone-border-color-hover:Highlight;--highcontrast-illustrated-message-illustration-color:var(--highcontrast-drop-zone-illustration-color)}}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{--spectrum-drop-zone-padding:var(--spectrum-spacing-400);--spectrum-drop-zone-illustration-to-heading:var(--spectrum-spacing-400);--spectrum-drop-zone-heading-to-body:var(--spectrum-spacing-75);--spectrum-drop-zone-border-width:var(--spectrum-border-width-200);--spectrum-drop-zone-corner-radius:var(--spectrum-corner-radius-100);--spectrum-drop-zone-border-color:var(--spectrum-gray-300);--spectrum-drop-zone-heading-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-heading-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-drop-zone-heading-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-title-size);--spectrum-drop-zone-heading-line-height:var(--spectrum-heading-line-height);--spectrum-drop-zone-heading-color:var(--spectrum-heading-color);--spectrum-drop-zone-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-drop-zone-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-drop-zone-body-font-size:var(--spectrum-drop-zone-body-size);--spectrum-drop-zone-body-line-height:var(--spectrum-body-line-height);--spectrum-drop-zone-body-color:var(--spectrum-body-color);--spectrum-drop-zone-background-color:var(--spectrum-drop-zone-background-color-rgb);--spectrum-drop-zone-border-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-illustration-color:var(--spectrum-neutral-visual-color);--spectrum-drop-zone-illustration-color-hover:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-height:var(--spectrum-component-height-300);--spectrum-drop-zone-content-max-width:var(--spectrum-drop-zone-content-maximum-width);--spectrum-drop-zone-content-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-drop-zone-content-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-drop-zone-content-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-drop-zone-content-font-family:var(--spectrum-sans-font-family-stack);--spectrum-drop-zone-content-font-weight:var(--spectrum-bold-font-weight);--spectrum-drop-zone-content-font-style:var(--spectrum-default-font-style);--spectrum-drop-zone-content-font-size:var(--spectrum-font-size-300);--spectrum-drop-zone-content-line-height:var(--spectrum-line-height-100);--spectrum-drop-zone-content-background-color:var(--spectrum-accent-visual-color);--spectrum-drop-zone-content-color:var(--spectrum-white);--mod-illustrated-message-content-maximum-width:var(--mod-drop-zone-content-maximum-width,var(--spectrum-drop-zone-content-maximum-width));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color,var(--spectrum-drop-zone-illustration-color));--mod-illustrated-message-title-to-heading:var(--mod-drop-zone-illustration-to-heading,var(--spectrum-drop-zone-illustration-to-heading));--mod-illustrated-message-heading-to-body:var(--mod-drop-zone-heading-to-body,var(--spectrum-drop-zone-heading-to-body));--mod-illustrated-message-title-font-family:var(--mod-drop-zone-heading-font-family,var(--spectrum-drop-zone-heading-font-family));--mod-illustrated-message-title-font-weight:var(--mod-drop-zone-heading-font-weight,var(--spectrum-drop-zone-heading-font-weight));--mod-illustrated-message-title-font-style:var(--mod-drop-zone-heading-font-style,var(--spectrum-drop-zone-heading-font-style));--mod-illustrated-message-title-font-size:var(--mod-drop-zone-heading-font-size,var(--spectrum-drop-zone-heading-font-size));--mod-illustrated-message-title-line-height:var(--mod-drop-zone-heading-line-height,var(--spectrum-drop-zone-heading-line-height));--mod-illustrated-message-title-color:var(--mod-drop-zone-heading-color,var(--spectrum-drop-zone-heading-color));--mod-illustrated-message-description-position:relative;--mod-illustrated-message-description-z-index:1;--mod-illustrated-message-heading-to-description:0;--mod-illustrated-message-description-font-family:var(--mod-drop-zone-body-font-family,var(--spectrum-drop-zone-body-font-family));--mod-illustrated-message-description-font-weight:var(--mod-drop-zone-body-font-weight,var(--spectrum-drop-zone-body-font-weight));--mod-illustrated-message-description-font-style:var(--mod-drop-zone-body-font-style,var(--spectrum-drop-zone-body-font-style));--mod-illustrated-message-description-font-size:var(--mod-drop-zone-body-font-size,var(--spectrum-drop-zone-body-font-size));--mod-illustrated-message-description-line-height:var(--mod-drop-zone-body-line-height,var(--spectrum-drop-zone-body-line-height));--mod-illustrated-message-description-color:var(--mod-drop-zone-body-color,var(--spectrum-drop-zone-body-color));--mod-actionbutton-font-size:var(--mod-drop-zone-content-font-size,var(--spectrum-drop-zone-content-font-size));--mod-actionbutton-label-color:var(--mod-drop-zone-content-color,var(--spectrum-drop-zone-content-color));--mod-actionbutton-edge-to-text:var(--mod-drop-zone-content-edge-to-text,var(--spectrum-drop-zone-content-edge-to-text))}:host:lang(ja),:host:lang(ko),:host:lang(zh){--spectrum-drop-zone-heading-font-size:var(--spectrum-drop-zone-cjk-title-size)}:host{box-sizing:border-box;inline-size:var(--mod-drop-zone-width,var(--spectrum-drop-zone-width));padding:calc(var(--mod-drop-zone-padding,var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width)));text-align:center;border-color:var(--mod-drop-zone-border-color,var(--spectrum-drop-zone-border-color));border-width:var(--mod-drop-zone-border-width,var(--spectrum-drop-zone-border-width));border-radius:var(--mod-drop-zone-corner-radius,var(--spectrum-drop-zone-corner-radius));border-style:var(--mod-drop-zone-border-style,dashed);background-size:cover;background-color:var(--mod-drop-zone-background-color,var(--spectrum-drop-zone-background-color))}:host([dragged]){--mod-drop-zone-border-style:var(--mod-drop-zone-border-style--dragged,var(--mod-drop-zone-border-style-dragged,solid));--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity,var(--spectrum-drop-zone-background-color-opacity)));--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));--mod-illustrated-message-illustration-color:var(--mod-drop-zone-illustration-color-hover,var(--spectrum-drop-zone-illustration-color-hover))}:host([filled]){--mod-drop-zone-background-color:rgba(var(--spectrum-drop-zone-background-color),var(--mod-drop-zone-background-color-opacity-filled,var(--spectrum-drop-zone-background-color-opacity-filled)));--mod-illustrated-message-display:none}:host([filled][dragged]){--mod-drop-zone-content-display:flex}:host(:focus-visible){--mod-drop-zone-border-style:solid;--spectrum-drop-zone-border-color:var(--highcontrast-drop-zone-border-color-hover,var(--mod-drop-zone-border-color-hover,var(--spectrum-drop-zone-border-color-hover)));outline:0}.spectrum-DropZone-content{display:var(--mod-drop-zone-content-display,none);block-size:100%;z-index:1;justify-content:center;align-items:center;position:relative}.spectrum-DropZone-button{box-sizing:border-box;block-size:var(--mod-drop-zone-content-height,var(--spectrum-drop-zone-content-height));max-inline-size:var(--mod-drop-zone-content-max-width,var(--spectrum-drop-zone-content-max-width));font-family:var(--mod-drop-zone-content-font-family,var(--spectrum-drop-zone-content-font-family));font-weight:var(--mod-drop-zone-content-font-weight,var(--spectrum-drop-zone-content-font-weight));font-style:var(--mod-drop-zone-content-font-style,var(--spectrum-drop-zone-content-font-style));line-height:var(--mod-drop-zone-content-line-height,var(--spectrum-drop-zone-content-line-height));border:none;padding-block-start:var(--mod-drop-zone-content-top-to-text,var(--spectrum-drop-zone-content-top-to-text));padding-block-end:var(--mod-drop-zone-content-bottom-to-text,var(--spectrum-drop-zone-content-bottom-to-text))}.spectrum-DropZone-button,.spectrum-DropZone-button:focus{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}@media (hover:hover){.spectrum-DropZone-button:hover{background-color:var(--mod-drop-zone-content-background-color,var(--spectrum-drop-zone-content-background-color))}}@media (forced-colors:active){:host{--highcontrast-drop-zone-illustration-color:CanvasText;--highcontrast-drop-zone-border-color-hover:Highlight;--highcontrast-illustrated-message-illustration-color:var(--highcontrast-drop-zone-illustration-color)}}\n`;\nexport default styles;"],
   "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
   "names": ["css", "styles"]
 }

package/stories/dropzone.stories.js

@@ -16,6 +16,7 @@ import {
 import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 import { state } from "@spectrum-web-components/base/src/decorators.js";
 import "@spectrum-web-components/dropzone/sp-dropzone.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
 import { illustration } from "../test/test-svg";
 import "@spectrum-web-components/illustrated-message/sp-illustrated-message.js";
 import "@spectrum-web-components/link/sp-link.js";
@@ -23,7 +24,8 @@ export default {
   component: "sp-dropzone",
   title: "Dropzone",
   args: {
-    isDragged: false
+    isDragged: false,
+    isFilled: false
   },
   argTypes: {
     isDragged: {
@@ -36,6 +38,17 @@ export default {
       control: {
         type: "boolean"
       }
+    },
+    isFilled: {
+      name: "isFilled",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
     }
   }
 };
@@ -96,24 +109,44 @@ export const Dragged = (args) => {
 Dragged.args = {
   isDragged: true
 };
+export const Filled = (args) => {
+  return html`
+        <sp-dropzone id="dropzone" ?filled=${args.isFilled}>
+            Filled dropzone
+        </sp-dropzone>
+    `;
+};
+Filled.args = {
+  isFilled: true
+};
 class ControlledDropzone extends LitElement {
   constructor() {
     super(...arguments);
-    this.fileName = "mock_file.png";
+    this.beingDraggedOver = false;
     this.input = void 0;
   }
   render() {
     return html`
             <span>
-                ${this.renderMockFile()}
+                <sp-action-button
+                    draggable="true"
+                    style="margin-block-end: 16px;"
+                >
+                    Drag me
+                </sp-action-button>
                 <sp-dropzone
                     tabindex="0"
                     id="dropzone"
                     drop-effect="copy"
-                    ?dragged=${this.input !== void 0}
+                    ?filled=${this.input !== void 0}
                     @sp-dropzone-drop=${this.onChange}
+                    @sp-dropzone-dragover=${this.onDragOver}
+                    @sp-dropzone-dragleave=${this.onDragLeave}
                 >
-                    <sp-illustrated-message heading="Drag and Drop Your File">
+                    <sp-illustrated-message
+                        style="--mod-illustrated-message-display: flex;"
+                        heading=${this.input !== void 0 ? this.beingDraggedOver ? "Drop here to replace!" : "You dropped something!" : "Drag and drop your file"}
+                    >
                         ${illustration}
                     </sp-illustrated-message>
                     <div>
@@ -133,36 +166,24 @@ class ControlledDropzone extends LitElement {
                             @change=${this.onChange}
                         />
                     </div>
-                    ${this.renderUploadButton()}
                 </sp-dropzone>
             </span>
         `;
   }
-  renderMockFile() {
-    return this.input === void 0 ? html`
-                  <sp-action-button
-                      draggable="true"
-                      style="margin-bottom: 16px;"
-                  >
-                      Drag ${this.fileName}
-                  </sp-action-button>
-              ` : html`
-                  <sp-action-button style="margin-bottom: 16px;">
-                      Added ${this.fileName}
-                  </sp-action-button>
-              `;
+  onChange() {
+    this.input = "mock-file";
+    this.beingDraggedOver = false;
   }
-  renderUploadButton() {
-    return this.input === void 0 ? null : html`
-                  <sp-action-button autofocus style="margin-top: 16px;">
-                      Upload ${this.fileName}
-                  </sp-action-button>
-              `;
+  onDragOver() {
+    this.beingDraggedOver = true;
   }
-  onChange() {
-    this.input = this.fileName;
+  onDragLeave() {
+    this.beingDraggedOver = false;
   }
 }
+__decorateClass([
+  state()
+], ControlledDropzone.prototype, "beingDraggedOver", 2);
 __decorateClass([
   state()
 ], ControlledDropzone.prototype, "input", 2);

package/stories/dropzone.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["dropzone.stories.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n    html,\n    LitElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\n\nimport '@spectrum-web-components/dropzone/sp-dropzone.js';\nimport { illustration } from '../test/test-svg';\nimport '@spectrum-web-components/illustrated-message/sp-illustrated-message.js';\nimport '@spectrum-web-components/link/sp-link.js';\n\nexport default {\n    component: 'sp-dropzone',\n    title: 'Dropzone',\n    args: {\n        isDragged: false,\n    },\n    argTypes: {\n        isDragged: {\n            name: 'isDragged',\n            type: { name: 'boolean', required: false },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n};\n\ntype StoryArgs = {\n    isDragged?: boolean;\n};\n\nexport const Default = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-dropzone id=\"dropzone\" tabindex=\"0\" ?dragged=${args.isDragged}>\n            <sp-illustrated-message heading=\"Drag and Drop Your File\">\n                ${illustration}\n            </sp-illustrated-message>\n            <div>\n                <label for=\"file-input\">\n                    <sp-link\n                        href=\"javascript:;\"\n                        onclick=\"this.parentElement.nextElementSibling.click()\"\n                    >\n                        Select a File\n                    </sp-link>\n                    from your computer\n                </label>\n                <input type=\"file\" id=\"file-input\" style=\"display: none\" />\n            </div>\n            <div>\n                or\n                <sp-link href=\"http://stock.adobe.com\" target=\"blank\">\n                    Search Adobe Stock\n                </sp-link>\n            </div>\n        </sp-dropzone>\n    `;\n};\n\nexport const Dragged = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-dropzone id=\"dropzone\" tabindex=\"0\" ?dragged=${args.isDragged}>\n            <sp-illustrated-message heading=\"Drag and Drop Your File\">\n                ${illustration}\n            </sp-illustrated-message>\n            <div>\n                <label for=\"file-input\">\n                    <sp-link\n                        href=\"javascript:;\"\n                        onclick=\"this.parentElement.nextElementSibling.click()\"\n                    >\n                        Select a File\n                    </sp-link>\n                    from your computer\n                </label>\n                <input type=\"file\" id=\"file-input\" style=\"display: none\" />\n            </div>\n            <div>\n                or\n                <sp-link href=\"http://stock.adobe.com\" target=\"blank\">\n                    Search Adobe Stock\n                </sp-link>\n            </div>\n        </sp-dropzone>\n    `;\n};\nDragged.args = {\n    isDragged: true,\n};\n\nclass ControlledDropzone extends LitElement {\n    private fileName = 'mock_file.png';\n\n    @state()\n    private input?: string = undefined;\n\n    override render(): TemplateResult {\n        return html`\n            <span>\n                ${this.renderMockFile()}\n                <sp-dropzone\n                    tabindex=\"0\"\n                    id=\"dropzone\"\n                    drop-effect=\"copy\"\n                    ?dragged=${this.input !== undefined}\n                    @sp-dropzone-drop=${this.onChange}\n                >\n                    <sp-illustrated-message heading=\"Drag and Drop Your File\">\n                        ${illustration}\n                    </sp-illustrated-message>\n                    <div>\n                        <label for=\"file-input\">\n                            <sp-link\n                                href=\"javascript:;\"\n                                onclick=\"this.parentElement.nextElementSibling.click()\"\n                            >\n                                Select a File\n                            </sp-link>\n                            from your computer\n                        </label>\n                        <input\n                            type=\"file\"\n                            id=\"file-input\"\n                            style=\"display: none\"\n                            @change=${this.onChange}\n                        />\n                    </div>\n                    ${this.renderUploadButton()}\n                </sp-dropzone>\n            </span>\n        `;\n    }\n\n    private renderMockFile(): TemplateResult {\n        return this.input === undefined\n            ? html`\n                  <sp-action-button\n                      draggable=\"true\"\n                      style=\"margin-bottom: 16px;\"\n                  >\n                      Drag ${this.fileName}\n                  </sp-action-button>\n              `\n            : html`\n                  <sp-action-button style=\"margin-bottom: 16px;\">\n                      Added ${this.fileName}\n                  </sp-action-button>\n              `;\n    }\n\n    private renderUploadButton(): TemplateResult | null {\n        return this.input === undefined\n            ? null\n            : html`\n                  <sp-action-button autofocus style=\"margin-top: 16px;\">\n                      Upload ${this.fileName}\n                  </sp-action-button>\n              `;\n    }\n\n    private onChange(): void {\n        this.input = this.fileName;\n    }\n}\ndefineElement('controlled-dropzone', ControlledDropzone);\n\nexport const Controlled = (): TemplateResult => {\n    return html`\n        <controlled-dropzone></controlled-dropzone>\n    `;\n};\n"],
-  "mappings": ";;;;;;;;;;;AAWA;AAAA,EACI;AAAA,EACA;AAAA,OAEG;AACP,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AAEtB,OAAO;AACP,SAAS,oBAAoB;AAC7B,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,IACF,WAAW;AAAA,EACf;AAAA,EACA,UAAU;AAAA,IACN,WAAW;AAAA,MACP,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,EACJ;AACJ;AAMO,aAAM,UAAU,CAAC,SAAoC;AACxD,SAAO;AAAA,2DACgD,KAAK,SAAS;AAAA;AAAA,kBAEvD,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsB9B;AAEO,aAAM,UAAU,CAAC,SAAoC;AACxD,SAAO;AAAA,2DACgD,KAAK,SAAS;AAAA;AAAA,kBAEvD,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsB9B;AACA,QAAQ,OAAO;AAAA,EACX,WAAW;AACf;AAEA,MAAM,2BAA2B,WAAW;AAAA,EAA5C;AAAA;AACI,SAAQ,WAAW;AAGnB,SAAQ,QAAiB;AAAA;AAAA,EAEhB,SAAyB;AAC9B,WAAO;AAAA;AAAA,kBAEG,KAAK,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,+BAKR,KAAK,UAAU,MAAS;AAAA,wCACf,KAAK,QAAQ;AAAA;AAAA;AAAA,0BAG3B,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAgBA,KAAK,QAAQ;AAAA;AAAA;AAAA,sBAG7B,KAAK,mBAAmB,CAAC;AAAA;AAAA;AAAA;AAAA,EAI3C;AAAA,EAEQ,iBAAiC;AACrC,WAAO,KAAK,UAAU,SAChB;AAAA;AAAA;AAAA;AAAA;AAAA,6BAKe,KAAK,QAAQ;AAAA;AAAA,kBAG5B;AAAA;AAAA,8BAEgB,KAAK,QAAQ;AAAA;AAAA;AAAA,EAGvC;AAAA,EAEQ,qBAA4C;AAChD,WAAO,KAAK,UAAU,SAChB,OACA;AAAA;AAAA,+BAEiB,KAAK,QAAQ;AAAA;AAAA;AAAA,EAGxC;AAAA,EAEQ,WAAiB;AACrB,SAAK,QAAQ,KAAK;AAAA,EACtB;AACJ;AArEY;AAAA,EADP,MAAM;AAAA,GAHL,mBAIM;AAsEZ,cAAc,uBAAuB,kBAAkB;AAEhD,aAAM,aAAa,MAAsB;AAC5C,SAAO;AAAA;AAAA;AAGX;",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n    html,\n    LitElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\n\nimport '@spectrum-web-components/dropzone/sp-dropzone.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { illustration } from '../test/test-svg';\nimport '@spectrum-web-components/illustrated-message/sp-illustrated-message.js';\nimport '@spectrum-web-components/link/sp-link.js';\n\nexport default {\n    component: 'sp-dropzone',\n    title: 'Dropzone',\n    args: {\n        isDragged: false,\n        isFilled: false,\n    },\n    argTypes: {\n        isDragged: {\n            name: 'isDragged',\n            type: { name: 'boolean', required: false },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        isFilled: {\n            name: 'isFilled',\n            type: { name: 'boolean', required: false },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n    },\n};\n\ntype StoryArgs = {\n    isDragged?: boolean;\n    isFilled?: boolean;\n};\n\nexport const Default = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-dropzone id=\"dropzone\" tabindex=\"0\" ?dragged=${args.isDragged}>\n            <sp-illustrated-message heading=\"Drag and Drop Your File\">\n                ${illustration}\n            </sp-illustrated-message>\n            <div>\n                <label for=\"file-input\">\n                    <sp-link\n                        href=\"javascript:;\"\n                        onclick=\"this.parentElement.nextElementSibling.click()\"\n                    >\n                        Select a File\n                    </sp-link>\n                    from your computer\n                </label>\n                <input type=\"file\" id=\"file-input\" style=\"display: none\" />\n            </div>\n            <div>\n                or\n                <sp-link href=\"http://stock.adobe.com\" target=\"blank\">\n                    Search Adobe Stock\n                </sp-link>\n            </div>\n        </sp-dropzone>\n    `;\n};\n\nexport const Dragged = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-dropzone id=\"dropzone\" tabindex=\"0\" ?dragged=${args.isDragged}>\n            <sp-illustrated-message heading=\"Drag and Drop Your File\">\n                ${illustration}\n            </sp-illustrated-message>\n            <div>\n                <label for=\"file-input\">\n                    <sp-link\n                        href=\"javascript:;\"\n                        onclick=\"this.parentElement.nextElementSibling.click()\"\n                    >\n                        Select a File\n                    </sp-link>\n                    from your computer\n                </label>\n                <input type=\"file\" id=\"file-input\" style=\"display: none\" />\n            </div>\n            <div>\n                or\n                <sp-link href=\"http://stock.adobe.com\" target=\"blank\">\n                    Search Adobe Stock\n                </sp-link>\n            </div>\n        </sp-dropzone>\n    `;\n};\nDragged.args = {\n    isDragged: true,\n};\n\nexport const Filled = (args: StoryArgs): TemplateResult => {\n    return html`\n        <sp-dropzone id=\"dropzone\" ?filled=${args.isFilled}>\n            Filled dropzone\n        </sp-dropzone>\n    `;\n};\nFilled.args = {\n    isFilled: true,\n};\n\nclass ControlledDropzone extends LitElement {\n    @state()\n    private beingDraggedOver: boolean = false;\n\n    @state()\n    private input?: string = undefined;\n\n    override render(): TemplateResult {\n        return html`\n            <span>\n                <sp-action-button\n                    draggable=\"true\"\n                    style=\"margin-block-end: 16px;\"\n                >\n                    Drag me\n                </sp-action-button>\n                <sp-dropzone\n                    tabindex=\"0\"\n                    id=\"dropzone\"\n                    drop-effect=\"copy\"\n                    ?filled=${this.input !== undefined}\n                    @sp-dropzone-drop=${this.onChange}\n                    @sp-dropzone-dragover=${this.onDragOver}\n                    @sp-dropzone-dragleave=${this.onDragLeave}\n                >\n                    <sp-illustrated-message\n                        style=\"--mod-illustrated-message-display: flex;\"\n                        heading=${this.input !== undefined\n                            ? this.beingDraggedOver\n                                ? 'Drop here to replace!'\n                                : 'You dropped something!'\n                            : 'Drag and drop your file'}\n                    >\n                        ${illustration}\n                    </sp-illustrated-message>\n                    <div>\n                        <label for=\"file-input\">\n                            <sp-link\n                                href=\"javascript:;\"\n                                onclick=\"this.parentElement.nextElementSibling.click()\"\n                            >\n                                Select a File\n                            </sp-link>\n                            from your computer\n                        </label>\n                        <input\n                            type=\"file\"\n                            id=\"file-input\"\n                            style=\"display: none\"\n                            @change=${this.onChange}\n                        />\n                    </div>\n                </sp-dropzone>\n            </span>\n        `;\n    }\n\n    private onChange(): void {\n        this.input = 'mock-file';\n        this.beingDraggedOver = false;\n    }\n\n    private onDragOver(): void {\n        this.beingDraggedOver = true;\n    }\n\n    private onDragLeave(): void {\n        this.beingDraggedOver = false;\n    }\n}\ndefineElement('controlled-dropzone', ControlledDropzone);\n\nexport const Controlled = (): TemplateResult => {\n    return html`\n        <controlled-dropzone></controlled-dropzone>\n    `;\n};\n"],
+  "mappings": ";;;;;;;;;;;AAWA;AAAA,EACI;AAAA,EACA;AAAA,OAEG;AACP,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AAEtB,OAAO;AACP,OAAO;AACP,SAAS,oBAAoB;AAC7B,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,IACF,WAAW;AAAA,IACX,UAAU;AAAA,EACd;AAAA,EACA,UAAU;AAAA,IACN,WAAW;AAAA,MACP,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,EACJ;AACJ;AAOO,aAAM,UAAU,CAAC,SAAoC;AACxD,SAAO;AAAA,2DACgD,KAAK,SAAS;AAAA;AAAA,kBAEvD,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsB9B;AAEO,aAAM,UAAU,CAAC,SAAoC;AACxD,SAAO;AAAA,2DACgD,KAAK,SAAS;AAAA;AAAA,kBAEvD,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsB9B;AACA,QAAQ,OAAO;AAAA,EACX,WAAW;AACf;AAEO,aAAM,SAAS,CAAC,SAAoC;AACvD,SAAO;AAAA,6CACkC,KAAK,QAAQ;AAAA;AAAA;AAAA;AAI1D;AACA,OAAO,OAAO;AAAA,EACV,UAAU;AACd;AAEA,MAAM,2BAA2B,WAAW;AAAA,EAA5C;AAAA;AAEI,SAAQ,mBAA4B;AAGpC,SAAQ,QAAiB;AAAA;AAAA,EAEhB,SAAyB;AAC9B,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAYe,KAAK,UAAU,MAAS;AAAA,wCACd,KAAK,QAAQ;AAAA,4CACT,KAAK,UAAU;AAAA,6CACd,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA,kCAI3B,KAAK,UAAU,SACnB,KAAK,mBACD,0BACA,2BACJ,yBAAyB;AAAA;AAAA,0BAE7B,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAgBA,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAM/C;AAAA,EAEQ,WAAiB;AACrB,SAAK,QAAQ;AACb,SAAK,mBAAmB;AAAA,EAC5B;AAAA,EAEQ,aAAmB;AACvB,SAAK,mBAAmB;AAAA,EAC5B;AAAA,EAEQ,cAAoB;AACxB,SAAK,mBAAmB;AAAA,EAC5B;AACJ;AAnEY;AAAA,EADP,MAAM;AAAA,GADL,mBAEM;AAGA;AAAA,EADP,MAAM;AAAA,GAJL,mBAKM;AAiEZ,cAAc,uBAAuB,kBAAkB;AAEhD,aAAM,aAAa,MAAsB;AAC5C,SAAO;AAAA;AAAA;AAGX;",
   "names": []
 }

package/test/dropzone.test.js

@@ -5,38 +5,33 @@ import { waitForPredicate } from "../../../test/testing-helpers.js";
 import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
 describe("Dropzone", () => {
   it("loads", async () => {
-    const el = await fixture(
-      html`
-                <sp-dropzone id="dropzone">
-                    <sp-illustrated-message heading="Drag and Drop Your File">
-                        ${illustration}
-                    </sp-illustrated-message>
+    const el = await fixture(html`
+            <sp-dropzone id="dropzone">
+                <sp-illustrated-message heading="Drag and Drop Your File">
+                    ${illustration}
+                </sp-illustrated-message>
 
-                    <div style="color: grey">
-                        <div>
-                            <label for="file-input">
-                                <sp-link>Select a File</sp-link>
-                                from your computer
-                            </label>
-                            <input
-                                type="file"
-                                id="file-input"
-                                style="display: none"
-                            />
-                        </div>
-                        <div>
-                            or
-                            <sp-link
-                                href="http://stock.adobe.com"
-                                target="blank"
-                            >
-                                Search Adobe Stock
-                            </sp-link>
-                        </div>
+                <div style="color: grey">
+                    <div>
+                        <label for="file-input">
+                            <sp-link>Select a File</sp-link>
+                            from your computer
+                        </label>
+                        <input
+                            type="file"
+                            id="file-input"
+                            style="display: none"
+                        />
                     </div>
-                </sp-dropzone>
-            `
-    );
+                    <div>
+                        or
+                        <sp-link href="http://stock.adobe.com" target="blank">
+                            Search Adobe Stock
+                        </sp-link>
+                    </div>
+                </div>
+            </sp-dropzone>
+        `);
     expect(el).to.not.equal(void 0);
     if (!el.shadowRoot) throw new Error("No shadowRoot");
     const slot = el.shadowRoot.querySelector("slot");
@@ -44,11 +39,9 @@ describe("Dropzone", () => {
     return true;
   });
   it("manages `dropEffects`", async () => {
-    const el = await fixture(
-      html`
-                <sp-dropzone id="dropzone"></sp-dropzone>
-            `
-    );
+    const el = await fixture(html`
+            <sp-dropzone id="dropzone"></sp-dropzone>
+        `);
     await elementUpdated(el);
     expect(el.dropEffect).to.equal("copy");
     el.dropEffect = "move";
@@ -56,11 +49,9 @@ describe("Dropzone", () => {
     expect(el.dropEffect).to.equal("move");
   });
   it("manages `dragover` events", async () => {
-    const el = await fixture(
-      html`
-                <sp-dropzone id="dropzone"></sp-dropzone>
-            `
-    );
+    const el = await fixture(html`
+            <sp-dropzone id="dropzone"></sp-dropzone>
+        `);
     await elementUpdated(el);
     expect(el.isDragged).to.be.false;
     el.dispatchEvent(new DragEvent("dragover"));
@@ -82,14 +73,12 @@ describe("Dropzone", () => {
     const canceledDrag = (event) => {
       event.preventDefault();
     };
-    const el = await fixture(
-      html`
-                <sp-dropzone
-                    id="dropzone"
-                    @sp-dropzone-should-accept=${canceledDrag}
-                ></sp-dropzone>
-            `
-    );
+    const el = await fixture(html`
+            <sp-dropzone
+                id="dropzone"
+                @sp-dropzone-should-accept=${canceledDrag}
+            ></sp-dropzone>
+        `);
     await elementUpdated(el);
     expect(el.isDragged).to.be.false;
     let dataTransfer = false;
@@ -112,14 +101,12 @@ describe("Dropzone", () => {
     const onDragLeave = () => {
       dragLeftCount += 1;
     };
-    const el = await fixture(
-      html`
-                <sp-dropzone
-                    id="dropzone"
-                    @sp-dropzone-dragleave=${onDragLeave}
-                ></sp-dropzone>
-            `
-    );
+    const el = await fixture(html`
+            <sp-dropzone
+                id="dropzone"
+                @sp-dropzone-dragleave=${onDragLeave}
+            ></sp-dropzone>
+        `);
     await elementUpdated(el);
     expect(dragLeftCount).to.equal(0);
     el.dispatchEvent(new DragEvent("dragleave"));
@@ -132,18 +119,24 @@ describe("Dropzone", () => {
     const onDrop = () => {
       dropped = true;
     };
-    const el = await fixture(
-      html`
-                <sp-dropzone
-                    id="dropzone"
-                    @sp-dropzone-drop=${onDrop}
-                ></sp-dropzone>
-            `
-    );
+    const el = await fixture(html`
+            <sp-dropzone
+                id="dropzone"
+                @sp-dropzone-drop=${onDrop}
+            ></sp-dropzone>
+        `);
     await elementUpdated(el);
     expect(dropped).to.be.false;
     el.dispatchEvent(new DragEvent("drop"));
     expect(dropped).to.be.true;
   });
+  it("sets `filled` attribute", async () => {
+    const el = await fixture(html`
+            <sp-dropzone id="dropzone" filled></sp-dropzone>
+        `);
+    await elementUpdated(el);
+    expect(el.isFilled).to.be.true;
+    expect(el.hasAttribute("filled")).to.be.true;
+  });
 });
 //# sourceMappingURL=dropzone.test.js.map

package/test/dropzone.test.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["dropzone.test.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport '@spectrum-web-components/dropzone/sp-dropzone.js';\nimport { Dropzone } from '@spectrum-web-components/dropzone';\nimport { illustration } from './test-svg.js';\nimport { waitForPredicate } from '../../../test/testing-helpers.js';\nimport { elementUpdated, expect, fixture, html } from '@open-wc/testing';\n\ndescribe('Dropzone', () => {\n    it('loads', async () => {\n        const el = await fixture<Dropzone>(\n            html`\n                <sp-dropzone id=\"dropzone\">\n                    <sp-illustrated-message heading=\"Drag and Drop Your File\">\n                        ${illustration}\n                    </sp-illustrated-message>\n\n                    <div style=\"color: grey\">\n                        <div>\n                            <label for=\"file-input\">\n                                <sp-link>Select a File</sp-link>\n                                from your computer\n                            </label>\n                            <input\n                                type=\"file\"\n                                id=\"file-input\"\n                                style=\"display: none\"\n                            />\n                        </div>\n                        <div>\n                            or\n                            <sp-link\n                                href=\"http://stock.adobe.com\"\n                                target=\"blank\"\n                            >\n                                Search Adobe Stock\n                            </sp-link>\n                        </div>\n                    </div>\n                </sp-dropzone>\n            `\n        );\n        expect(el).to.not.equal(undefined);\n        if (!el.shadowRoot) throw new Error('No shadowRoot');\n        const slot = el.shadowRoot.querySelector('slot') as HTMLSlotElement;\n        expect(slot).to.not.equal(undefined);\n        return true;\n    });\n    it('manages `dropEffects`', async () => {\n        const el = await fixture<Dropzone>(\n            html`\n                <sp-dropzone id=\"dropzone\"></sp-dropzone>\n            `\n        );\n\n        await elementUpdated(el);\n\n        expect(el.dropEffect).to.equal('copy');\n\n        el.dropEffect = 'move';\n\n        await elementUpdated(el);\n\n        expect(el.dropEffect).to.equal('move');\n    });\n    it('manages `dragover` events', async () => {\n        const el = await fixture<Dropzone>(\n            html`\n                <sp-dropzone id=\"dropzone\"></sp-dropzone>\n            `\n        );\n\n        await elementUpdated(el);\n\n        expect(el.isDragged).to.be.false;\n\n        el.dispatchEvent(new DragEvent('dragover'));\n\n        expect(el.isDragged).to.be.false;\n\n        let dataTransfer: DataTransfer | boolean = false;\n        try {\n            // Safari doesn't like this...\n            dataTransfer = new DataTransfer();\n        } catch (error) {}\n        if (dataTransfer) {\n            const dragOverEvent = new DragEvent('dragover', {\n                dataTransfer,\n            });\n\n            el.dispatchEvent(dragOverEvent);\n\n            expect(el.isDragged).to.be.true;\n            // We should be able to make the following test here:\n            // expect(dataTransfer.dropEffect).to.equal(el.dropEffect);\n            // However, Chrome doesn't like it in the context of a test...\n        }\n    });\n    it('allows `dragover` events to be canceled', async () => {\n        const canceledDrag = (event: DragEvent): void => {\n            event.preventDefault();\n        };\n        const el = await fixture<Dropzone>(\n            html`\n                <sp-dropzone\n                    id=\"dropzone\"\n                    @sp-dropzone-should-accept=${canceledDrag}\n                ></sp-dropzone>\n            `\n        );\n\n        await elementUpdated(el);\n\n        expect(el.isDragged).to.be.false;\n\n        let dataTransfer: DataTransfer | boolean = false;\n        try {\n            // Safari doesn't like this...\n            dataTransfer = new DataTransfer();\n        } catch (error) {}\n        if (dataTransfer) {\n            const dragOverEvent = new DragEvent('dragover', {\n                dataTransfer,\n            });\n\n            el.dispatchEvent(dragOverEvent);\n\n            expect(el.isDragged).to.be.false;\n            expect(dataTransfer.dropEffect).to.not.equal(el.dropEffect);\n            expect(dataTransfer.dropEffect).to.equal('none');\n        }\n    });\n    it('manages `dragleave` events via debounce', async () => {\n        let dragLeftCount = 0;\n        const onDragLeave = (): void => {\n            dragLeftCount += 1;\n        };\n        const el = await fixture<Dropzone>(\n            html`\n                <sp-dropzone\n                    id=\"dropzone\"\n                    @sp-dropzone-dragleave=${onDragLeave}\n                ></sp-dropzone>\n            `\n        );\n\n        await elementUpdated(el);\n\n        expect(dragLeftCount).to.equal(0);\n\n        el.dispatchEvent(new DragEvent('dragleave'));\n        el.dispatchEvent(new DragEvent('dragleave'));\n\n        await waitForPredicate(() => dragLeftCount === 1);\n\n        expect(dragLeftCount).to.equal(1);\n    });\n\n    it('manages `dragleave` events', async () => {\n        let dropped = false;\n        const onDrop = (): void => {\n            dropped = true;\n        };\n        const el = await fixture<Dropzone>(\n            html`\n                <sp-dropzone\n                    id=\"dropzone\"\n                    @sp-dropzone-drop=${onDrop}\n                ></sp-dropzone>\n            `\n        );\n\n        await elementUpdated(el);\n\n        expect(dropped).to.be.false;\n\n        el.dispatchEvent(new DragEvent('drop'));\n\n        expect(dropped).to.be.true;\n    });\n});\n"],
-  "mappings": ";AAWA,OAAO;AAEP,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,gBAAgB,QAAQ,SAAS,YAAY;AAEtD,SAAS,YAAY,MAAM;AACvB,KAAG,SAAS,YAAY;AACpB,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA,0BAGc,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA2B9B;AACA,WAAO,EAAE,EAAE,GAAG,IAAI,MAAM,MAAS;AACjC,QAAI,CAAC,GAAG,WAAY,OAAM,IAAI,MAAM,eAAe;AACnD,UAAM,OAAO,GAAG,WAAW,cAAc,MAAM;AAC/C,WAAO,IAAI,EAAE,GAAG,IAAI,MAAM,MAAS;AACnC,WAAO;AAAA,EACX,CAAC;AACD,KAAG,yBAAyB,YAAY;AACpC,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA,IAGJ;AAEA,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,UAAU,EAAE,GAAG,MAAM,MAAM;AAErC,OAAG,aAAa;AAEhB,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,UAAU,EAAE,GAAG,MAAM,MAAM;AAAA,EACzC,CAAC;AACD,KAAG,6BAA6B,YAAY;AACxC,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA,IAGJ;AAEA,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,SAAS,EAAE,GAAG,GAAG;AAE3B,OAAG,cAAc,IAAI,UAAU,UAAU,CAAC;AAE1C,WAAO,GAAG,SAAS,EAAE,GAAG,GAAG;AAE3B,QAAI,eAAuC;AAC3C,QAAI;AAEA,qBAAe,IAAI,aAAa;AAAA,IACpC,SAAS,OAAO;AAAA,IAAC;AACjB,QAAI,cAAc;AACd,YAAM,gBAAgB,IAAI,UAAU,YAAY;AAAA,QAC5C;AAAA,MACJ,CAAC;AAED,SAAG,cAAc,aAAa;AAE9B,aAAO,GAAG,SAAS,EAAE,GAAG,GAAG;AAAA,IAI/B;AAAA,EACJ,CAAC;AACD,KAAG,2CAA2C,YAAY;AACtD,UAAM,eAAe,CAAC,UAA2B;AAC7C,YAAM,eAAe;AAAA,IACzB;AACA,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA,iDAGqC,YAAY;AAAA;AAAA;AAAA,IAGrD;AAEA,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,SAAS,EAAE,GAAG,GAAG;AAE3B,QAAI,eAAuC;AAC3C,QAAI;AAEA,qBAAe,IAAI,aAAa;AAAA,IACpC,SAAS,OAAO;AAAA,IAAC;AACjB,QAAI,cAAc;AACd,YAAM,gBAAgB,IAAI,UAAU,YAAY;AAAA,QAC5C;AAAA,MACJ,CAAC;AAED,SAAG,cAAc,aAAa;AAE9B,aAAO,GAAG,SAAS,EAAE,GAAG,GAAG;AAC3B,aAAO,aAAa,UAAU,EAAE,GAAG,IAAI,MAAM,GAAG,UAAU;AAC1D,aAAO,aAAa,UAAU,EAAE,GAAG,MAAM,MAAM;AAAA,IACnD;AAAA,EACJ,CAAC;AACD,KAAG,2CAA2C,YAAY;AACtD,QAAI,gBAAgB;AACpB,UAAM,cAAc,MAAY;AAC5B,uBAAiB;AAAA,IACrB;AACA,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA,6CAGiC,WAAW;AAAA;AAAA;AAAA,IAGhD;AAEA,UAAM,eAAe,EAAE;AAEvB,WAAO,aAAa,EAAE,GAAG,MAAM,CAAC;AAEhC,OAAG,cAAc,IAAI,UAAU,WAAW,CAAC;AAC3C,OAAG,cAAc,IAAI,UAAU,WAAW,CAAC;AAE3C,UAAM,iBAAiB,MAAM,kBAAkB,CAAC;AAEhD,WAAO,aAAa,EAAE,GAAG,MAAM,CAAC;AAAA,EACpC,CAAC;AAED,KAAG,8BAA8B,YAAY;AACzC,QAAI,UAAU;AACd,UAAM,SAAS,MAAY;AACvB,gBAAU;AAAA,IACd;AACA,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA,wCAG4B,MAAM;AAAA;AAAA;AAAA,IAGtC;AAEA,UAAM,eAAe,EAAE;AAEvB,WAAO,OAAO,EAAE,GAAG,GAAG;AAEtB,OAAG,cAAc,IAAI,UAAU,MAAM,CAAC;AAEtC,WAAO,OAAO,EAAE,GAAG,GAAG;AAAA,EAC1B,CAAC;AACL,CAAC;",
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport '@spectrum-web-components/dropzone/sp-dropzone.js';\nimport { Dropzone } from '@spectrum-web-components/dropzone';\nimport { illustration } from './test-svg.js';\nimport { waitForPredicate } from '../../../test/testing-helpers.js';\nimport { elementUpdated, expect, fixture, html } from '@open-wc/testing';\n\ndescribe('Dropzone', () => {\n    it('loads', async () => {\n        const el = await fixture<Dropzone>(html`\n            <sp-dropzone id=\"dropzone\">\n                <sp-illustrated-message heading=\"Drag and Drop Your File\">\n                    ${illustration}\n                </sp-illustrated-message>\n\n                <div style=\"color: grey\">\n                    <div>\n                        <label for=\"file-input\">\n                            <sp-link>Select a File</sp-link>\n                            from your computer\n                        </label>\n                        <input\n                            type=\"file\"\n                            id=\"file-input\"\n                            style=\"display: none\"\n                        />\n                    </div>\n                    <div>\n                        or\n                        <sp-link href=\"http://stock.adobe.com\" target=\"blank\">\n                            Search Adobe Stock\n                        </sp-link>\n                    </div>\n                </div>\n            </sp-dropzone>\n        `);\n        expect(el).to.not.equal(undefined);\n        if (!el.shadowRoot) throw new Error('No shadowRoot');\n        const slot = el.shadowRoot.querySelector('slot') as HTMLSlotElement;\n        expect(slot).to.not.equal(undefined);\n        return true;\n    });\n    it('manages `dropEffects`', async () => {\n        const el = await fixture<Dropzone>(html`\n            <sp-dropzone id=\"dropzone\"></sp-dropzone>\n        `);\n\n        await elementUpdated(el);\n\n        expect(el.dropEffect).to.equal('copy');\n\n        el.dropEffect = 'move';\n\n        await elementUpdated(el);\n\n        expect(el.dropEffect).to.equal('move');\n    });\n    it('manages `dragover` events', async () => {\n        const el = await fixture<Dropzone>(html`\n            <sp-dropzone id=\"dropzone\"></sp-dropzone>\n        `);\n\n        await elementUpdated(el);\n\n        expect(el.isDragged).to.be.false;\n\n        el.dispatchEvent(new DragEvent('dragover'));\n\n        expect(el.isDragged).to.be.false;\n\n        let dataTransfer: DataTransfer | boolean = false;\n        try {\n            // Safari doesn't like this...\n            dataTransfer = new DataTransfer();\n        } catch (error) {}\n        if (dataTransfer) {\n            const dragOverEvent = new DragEvent('dragover', {\n                dataTransfer,\n            });\n\n            el.dispatchEvent(dragOverEvent);\n\n            expect(el.isDragged).to.be.true;\n            // We should be able to make the following test here:\n            // expect(dataTransfer.dropEffect).to.equal(el.dropEffect);\n            // However, Chrome doesn't like it in the context of a test...\n        }\n    });\n    it('allows `dragover` events to be canceled', async () => {\n        const canceledDrag = (event: DragEvent): void => {\n            event.preventDefault();\n        };\n        const el = await fixture<Dropzone>(html`\n            <sp-dropzone\n                id=\"dropzone\"\n                @sp-dropzone-should-accept=${canceledDrag}\n            ></sp-dropzone>\n        `);\n\n        await elementUpdated(el);\n\n        expect(el.isDragged).to.be.false;\n\n        let dataTransfer: DataTransfer | boolean = false;\n        try {\n            // Safari doesn't like this...\n            dataTransfer = new DataTransfer();\n        } catch (error) {}\n        if (dataTransfer) {\n            const dragOverEvent = new DragEvent('dragover', {\n                dataTransfer,\n            });\n\n            el.dispatchEvent(dragOverEvent);\n\n            expect(el.isDragged).to.be.false;\n            expect(dataTransfer.dropEffect).to.not.equal(el.dropEffect);\n            expect(dataTransfer.dropEffect).to.equal('none');\n        }\n    });\n    it('manages `dragleave` events via debounce', async () => {\n        let dragLeftCount = 0;\n        const onDragLeave = (): void => {\n            dragLeftCount += 1;\n        };\n        const el = await fixture<Dropzone>(html`\n            <sp-dropzone\n                id=\"dropzone\"\n                @sp-dropzone-dragleave=${onDragLeave}\n            ></sp-dropzone>\n        `);\n\n        await elementUpdated(el);\n\n        expect(dragLeftCount).to.equal(0);\n\n        el.dispatchEvent(new DragEvent('dragleave'));\n        el.dispatchEvent(new DragEvent('dragleave'));\n\n        await waitForPredicate(() => dragLeftCount === 1);\n\n        expect(dragLeftCount).to.equal(1);\n    });\n\n    it('manages `dragleave` events', async () => {\n        let dropped = false;\n        const onDrop = (): void => {\n            dropped = true;\n        };\n        const el = await fixture<Dropzone>(html`\n            <sp-dropzone\n                id=\"dropzone\"\n                @sp-dropzone-drop=${onDrop}\n            ></sp-dropzone>\n        `);\n\n        await elementUpdated(el);\n\n        expect(dropped).to.be.false;\n\n        el.dispatchEvent(new DragEvent('drop'));\n\n        expect(dropped).to.be.true;\n    });\n\n    it('sets `filled` attribute', async () => {\n        const el = await fixture<Dropzone>(html`\n            <sp-dropzone id=\"dropzone\" filled></sp-dropzone>\n        `);\n\n        await elementUpdated(el);\n\n        expect(el.isFilled).to.be.true;\n        expect(el.hasAttribute('filled')).to.be.true;\n    });\n});\n"],
+  "mappings": ";AAWA,OAAO;AAEP,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,gBAAgB,QAAQ,SAAS,YAAY;AAEtD,SAAS,YAAY,MAAM;AACvB,KAAG,SAAS,YAAY;AACpB,UAAM,KAAK,MAAM,QAAkB;AAAA;AAAA;AAAA,sBAGrB,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAuBzB;AACD,WAAO,EAAE,EAAE,GAAG,IAAI,MAAM,MAAS;AACjC,QAAI,CAAC,GAAG,WAAY,OAAM,IAAI,MAAM,eAAe;AACnD,UAAM,OAAO,GAAG,WAAW,cAAc,MAAM;AAC/C,WAAO,IAAI,EAAE,GAAG,IAAI,MAAM,MAAS;AACnC,WAAO;AAAA,EACX,CAAC;AACD,KAAG,yBAAyB,YAAY;AACpC,UAAM,KAAK,MAAM,QAAkB;AAAA;AAAA,SAElC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,UAAU,EAAE,GAAG,MAAM,MAAM;AAErC,OAAG,aAAa;AAEhB,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,UAAU,EAAE,GAAG,MAAM,MAAM;AAAA,EACzC,CAAC;AACD,KAAG,6BAA6B,YAAY;AACxC,UAAM,KAAK,MAAM,QAAkB;AAAA;AAAA,SAElC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,SAAS,EAAE,GAAG,GAAG;AAE3B,OAAG,cAAc,IAAI,UAAU,UAAU,CAAC;AAE1C,WAAO,GAAG,SAAS,EAAE,GAAG,GAAG;AAE3B,QAAI,eAAuC;AAC3C,QAAI;AAEA,qBAAe,IAAI,aAAa;AAAA,IACpC,SAAS,OAAO;AAAA,IAAC;AACjB,QAAI,cAAc;AACd,YAAM,gBAAgB,IAAI,UAAU,YAAY;AAAA,QAC5C;AAAA,MACJ,CAAC;AAED,SAAG,cAAc,aAAa;AAE9B,aAAO,GAAG,SAAS,EAAE,GAAG,GAAG;AAAA,IAI/B;AAAA,EACJ,CAAC;AACD,KAAG,2CAA2C,YAAY;AACtD,UAAM,eAAe,CAAC,UAA2B;AAC7C,YAAM,eAAe;AAAA,IACzB;AACA,UAAM,KAAK,MAAM,QAAkB;AAAA;AAAA;AAAA,6CAGE,YAAY;AAAA;AAAA,SAEhD;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,SAAS,EAAE,GAAG,GAAG;AAE3B,QAAI,eAAuC;AAC3C,QAAI;AAEA,qBAAe,IAAI,aAAa;AAAA,IACpC,SAAS,OAAO;AAAA,IAAC;AACjB,QAAI,cAAc;AACd,YAAM,gBAAgB,IAAI,UAAU,YAAY;AAAA,QAC5C;AAAA,MACJ,CAAC;AAED,SAAG,cAAc,aAAa;AAE9B,aAAO,GAAG,SAAS,EAAE,GAAG,GAAG;AAC3B,aAAO,aAAa,UAAU,EAAE,GAAG,IAAI,MAAM,GAAG,UAAU;AAC1D,aAAO,aAAa,UAAU,EAAE,GAAG,MAAM,MAAM;AAAA,IACnD;AAAA,EACJ,CAAC;AACD,KAAG,2CAA2C,YAAY;AACtD,QAAI,gBAAgB;AACpB,UAAM,cAAc,MAAY;AAC5B,uBAAiB;AAAA,IACrB;AACA,UAAM,KAAK,MAAM,QAAkB;AAAA;AAAA;AAAA,yCAGF,WAAW;AAAA;AAAA,SAE3C;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,aAAa,EAAE,GAAG,MAAM,CAAC;AAEhC,OAAG,cAAc,IAAI,UAAU,WAAW,CAAC;AAC3C,OAAG,cAAc,IAAI,UAAU,WAAW,CAAC;AAE3C,UAAM,iBAAiB,MAAM,kBAAkB,CAAC;AAEhD,WAAO,aAAa,EAAE,GAAG,MAAM,CAAC;AAAA,EACpC,CAAC;AAED,KAAG,8BAA8B,YAAY;AACzC,QAAI,UAAU;AACd,UAAM,SAAS,MAAY;AACvB,gBAAU;AAAA,IACd;AACA,UAAM,KAAK,MAAM,QAAkB;AAAA;AAAA;AAAA,oCAGP,MAAM;AAAA;AAAA,SAEjC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,OAAO,EAAE,GAAG,GAAG;AAEtB,OAAG,cAAc,IAAI,UAAU,MAAM,CAAC;AAEtC,WAAO,OAAO,EAAE,GAAG,GAAG;AAAA,EAC1B,CAAC;AAED,KAAG,2BAA2B,YAAY;AACtC,UAAM,KAAK,MAAM,QAAkB;AAAA;AAAA,SAElC;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,QAAQ,EAAE,GAAG,GAAG;AAC1B,WAAO,GAAG,aAAa,QAAQ,CAAC,EAAE,GAAG,GAAG;AAAA,EAC5C,CAAC;AACL,CAAC;",
   "names": []
 }