q2-tecton-elements 1.71.1 → 1.72.0

package/dist/components/q2-editable-field.js

@@ -10,9 +10,9 @@ import { d as p } from "./q2-btn2.js";
 
 import { d as b } from "./q2-icon2.js";
 
-import { d as m } from "./q2-input2.js";
+import { d as u } from "./q2-input2.js";
 
-import { d as u } from "./q2-loading2.js";
+import { d as m } from "./q2-loading2.js";
 
 const f =  t(class extends e {
   constructor(t) {
@@ -29,16 +29,25 @@ const f =  t(class extends e {
     this.label = "", 
     /** Serves as the visible text while in the read state, and the default value of the input while in the edit state. */
     this.value = "", this.cancelClick = t => {
-      null == t || t.stopPropagation(), h(this, [ "change", "tctChange" ], {
+      null == t || t.stopPropagation();
+      const e = this.emitChangeEvents({
         editing: !1,
         name: "cancel"
-      }), this.innerValue = void 0, this.formattedValue = void 0, this.inputElement.value = "", 
-      this.inputElement.value = this.defaultValue;
+      });
+      queueMicrotask((() => {
+        this.isDefaultPrevented(e) || (this.innerValue = void 0, this.formattedValue = void 0, 
+        this.inputElement.value = "", this.inputElement.value = this.defaultValue, this.inputElement.value = this.value, 
+        this.editing = !1);
+      }));
     }, this.editClick = t => {
-      null == t || t.stopPropagation(), h(this, [ "change", "tctChange" ], {
+      null == t || t.stopPropagation();
+      const e = this.emitChangeEvents({
         editing: !0,
         name: "edit"
       });
+      queueMicrotask((() => {
+        this.isDefaultPrevented(e) || (this.editing = !0);
+      }));
     }, this.inputChange = t => {
       t.stopPropagation();
     }, this.inputClick = t => {
@@ -50,13 +59,16 @@ const f =  t(class extends e {
     void this.cancelClick()) : "Enter" === t.key ? (t.preventDefault(), void this.saveClick()) : void 0, 
     this.saveClick = t => {
       t && t.stopPropagation();
-      const e = this.hostElement.shadowRoot.querySelector("q2-input").value;
-      h(this, [ "change", "tctChange" ], {
+      const e = this.hostElement.shadowRoot.querySelector("q2-input").value, i = this.innerValue || e, s = this.formattedValue || e, a = this.emitChangeEvents({
         editing: !1,
         name: "save",
-        value: this.innerValue || e,
-        formattedValue: this.formattedValue || e
+        value: i,
+        formattedValue: s
       });
+      queueMicrotask((() => {
+        this.isDefaultPrevented(a) || (this.hasErrors ? this.inputElement.focus() : (this.value = i, 
+        this.editing = !1));
+      }));
     };
   }
   // #endregion
@@ -72,26 +84,6 @@ const f =  t(class extends e {
   }
   // #endregion
   // #region Listeners
-  onHostElementChange(t) {
-    o(t, this.hostElement) && !this.hostElement.onchange && queueMicrotask((() => {
-      switch (t.detail.name) {
-       case "save":
-        if (this.hasErrors) {
-          this.inputElement.focus();
-          break;
-        }
-        this.value = t.detail.value, this.editing = t.detail.editing;
-        break;
-
-       case "cancel":
-        this.inputElement.value = this.value, this.editing = t.detail.editing;
-        break;
-
-       case "edit":
-        this.editing = t.detail.editing;
-      }
-    }));
-  }
   delegateFocus(t) {
     o(t, this.hostElement) && this.hostElement.shadowRoot.querySelector(this.editing ? "q2-input" : "q2-btn.begin-edit").focus();
   }
@@ -167,6 +159,9 @@ const f =  t(class extends e {
   get wrapperClass() {
     return "q2-editable-field-wrapper " + (this.editing ? "editing" : "");
   }
+  emitChangeEvents(t) {
+    return [ this.change.emit(t), this.tctChange.emit(t) ];
+  }
   generateEditStateDOM() {
     return s("div", {
       class: this.wrapperClass,
@@ -249,11 +244,14 @@ const f =  t(class extends e {
       type: "edit"
     })));
   }
+  isDefaultPrevented(t) {
+    return null != this.hostElement.onchange || t.some((t => t.defaultPrevented));
+  }
   // #endregion
   // #region Render Methods
   render() {
     return s("div", {
-      key: "bd200b48458ec6c7cb6c6928a1758420dbca66e3"
+      key: "73dfc2198007dc7366243914bb055db3f8ebda3a"
     }, this.generateEditStateDOM(), this.generateReadStateDOM());
   }
   get hostElement() {
@@ -276,7 +274,7 @@ const f =  t(class extends e {
     };
   }
   static get style() {
-    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:inline-block;max-width:100%}.q2-editable-field-wrapper .begin-edit,.q2-editable-field-wrapper .save-edit,.q2-editable-field-wrapper .cancel-edit{flex:0 0 44px;--tct-btn-icon-hover-background:var(--tct-editable-field-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-editable-field-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-editable-field-btn-icon-stroke-secondary, var(--app-gray, #747474))}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}';
+    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:inline-block;max-width:100%}.q2-editable-field-wrapper .begin-edit,.q2-editable-field-wrapper .save-edit,.q2-editable-field-wrapper .cancel-edit{flex:0 0 44px;--tct-icon-size:var(--tct-editable-field-icon-size, var(--const-px-18, 18px));--tct-btn-icon-hover-background:var(--tct-editable-field-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-editable-field-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-editable-field-btn-icon-stroke-secondary, var(--app-gray, #747474))}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}';
   }
 }, [ 1, "q2-editable-field", {
   ariaLabel: [ 1537, "aria-label" ],
@@ -298,7 +296,7 @@ const f =  t(class extends e {
   clickEdit: [ 64 ],
   clickSave: [ 64 ],
   setValue: [ 64 ]
-}, [ [ 0, "change", "onHostElementChange" ], [ 0, "focus", "delegateFocus" ], [ 0, "tctFormatted", "inputFormatted" ] ], {
+}, [ [ 0, "focus", "delegateFocus" ], [ 0, "tctFormatted", "inputFormatted" ] ], {
   ariaLabel: [ {
     ariaLabelObserver: 0
   } ],
@@ -334,11 +332,11 @@ const v = f, defineCustomElement = function() {
       break;
 
      case "q2-input":
-      customElements.get(a(t)) || m();
+      customElements.get(a(t)) || u();
       break;
 
      case "q2-loading":
-      customElements.get(a(t)) || u();
+      customElements.get(a(t)) || m();
     }
   }));
 };

package/dist/components/q2-file-picker.js

@@ -12,9 +12,9 @@ import { d as p } from "./q2-link2.js";
 
 import { d as f } from "./q2-list2.js";
 
-import { d as m } from "./q2-loading2.js";
+import { d as h } from "./q2-loading2.js";
 
-const h =  t(class extends e {
+const m =  t(class extends e {
   constructor(t) {
     super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.tctChange = i(this, "tctChange", 7), 
     // #region Own Properties
@@ -32,6 +32,12 @@ const h =  t(class extends e {
          * The size of the browse button.
          */
     this.buttonSize = "medium", 
+    /**
+         * When `false`, the file name renders as-is and may wrap. Otherwise, long
+         * file names are middle-ellipsized so the beginning and end of the name
+         * remain visible.
+         */
+    this.ellipsizeFileName = !0, 
     /**
          * Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or
          * 'jpg, png, pdf'). When using the attribute, provide a comma-separated
@@ -47,6 +53,10 @@ const h =  t(class extends e {
          * The maximum size (in bytes) of any file that can be selected.
          */
     this.maxFileSize = 1 / 0, 
+    /**
+         * Shows a gradient at the bottom of the file list when more files are available below the visible area.
+         */
+    this.showGradient = !0, 
     /**
          * An array of `ValidFileStatus` objects representing the upload status of
          * files. Each `ValidFileStatus` object contains the following properties:
@@ -77,6 +87,10 @@ const h =  t(class extends e {
       this.browseButtonInput.value = "", this.emitChange(i), this._value = i;
     }, this.highlightDropZone = t => {
       this.disabled || (this.disableEvent(t), this.isDropZoneHighlighted = !0);
+    }, this.updateFileListGradient = () => {
+      if (!this.fileListContainer) return;
+      const {clientHeight: t, scrollHeight: e, scrollTop: i} = this.fileListContainer, r = this.showGradient && e > t && Math.ceil(i) + t < e;
+      this.fileListContainer.classList.toggle("more-files", r);
     }, 
     // #endregion
     // #region Render Methods
@@ -126,6 +140,7 @@ const h =  t(class extends e {
         class: "browse",
         "test-id": "browse"
       }, r("q2-btn", {
+        block: this.isMobileViewport,
         disabled: t || this.areFilesUploading,
         intent: "workflow-primary",
         loading: this.areFilesUploading,
@@ -146,9 +161,12 @@ const h =  t(class extends e {
         multiple: !0,
         tabIndex: -1
       }), r("div", {
-        class: "file-list-container"
+        class: "file-list-container",
+        onScroll: this.updateFileListGradient,
+        ref: t => this.fileListContainer = null != t ? t : this.fileListContainer
       }, r("q2-list", {
-        class: "file-list"
+        class: "file-list",
+        ref: t => this.fileList = null != t ? t : this.fileList
       }, this.displayedFiles.map((e => r("q2-item", {
         class: this.getFileItemClasses(e.file.name),
         key: e.file.name,
@@ -164,9 +182,18 @@ const h =  t(class extends e {
       }) : r("q2-icon", {
         class: "icon-success",
         type: "success"
-      })), r("div", {
+      })), !1 === this.ellipsizeFileName ? r("div", {
+        slot: "header"
+      }, e.file.name) : r("div", {
+        class: "file-name-header",
         slot: "header"
-      }, e.file.name), r("div", {
+      }, r("span", {
+        class: "file-name-leading"
+      }, e.file.name.slice(0, Math.ceil(e.file.name.length / 2))), r("span", {
+        class: "file-name-trailing"
+      }, r("bdo", {
+        dir: "ltr"
+      }, e.file.name.slice(Math.ceil(e.file.name.length / 2))))), r("div", {
         class: "file-item-info",
         slot: "body"
       }, this.getFileItemStatusMessage(e)), r("div", {
@@ -203,7 +230,23 @@ const h =  t(class extends e {
     console.error("Setting the value of this component directly is not allowed.");
   }
   // #endregion
+  // #region Component Lifecycle Events
+  disconnectedCallback() {
+    var t;
+    null === (t = this.fileListResizeObserver) || void 0 === t || t.disconnect();
+  }
+  componentDidLoad() {
+    "function" == typeof ResizeObserver && (this.fileListResizeObserver = new ResizeObserver(this.updateFileListGradient), 
+    this.observeFileListContent());
+  }
+  componentDidRender() {
+    this.observeFileListContent(), this.updateFileListGradient(), "function" == typeof requestAnimationFrame && requestAnimationFrame(this.updateFileListGradient);
+  }
+  // #endregion
   // #region Watchers
+  updateGradientVisibility() {
+    this.updateFileListGradient();
+  }
   updateFileList(t) {
     t.forEach((t => {
       const e = this.queuedFiles.findIndex((e => e.name === t.name));
@@ -245,6 +288,9 @@ const h =  t(class extends e {
   get hasLabelSlotContent() {
     return n(this.el, "label");
   }
+  get isMobileViewport() {
+    return !("undefined" == typeof window || !window.matchMedia) && window.matchMedia("(max-width: 479px)").matches;
+  }
   buildFilesObject(t) {
     const e = [];
     return e.push(...this.extractFilesOfInvalidTypes(t)), e.push(...this.extractFilesOverSizeLimit(t)), 
@@ -353,27 +399,38 @@ const h =  t(class extends e {
   launchFileBrowser() {
     this.browseButtonInput.dispatchEvent(new MouseEvent("click"));
   }
+  observeFileListContent() {
+    this.fileListResizeObserver && this.fileList && (this.fileListResizeObserver.disconnect(), 
+    this.fileListResizeObserver.observe(this.fileList), this.fileList.querySelectorAll("q2-item").forEach((t => {
+      this.fileListResizeObserver.observe(t);
+    })));
+  }
   get el() {
     return this;
   }
   static get watchers() {
     return {
+      showGradient: [ {
+        updateGradientVisibility: 0
+      } ],
       status: [ {
         updateFileList: 0
       } ]
     };
   }
   static get style() {
-    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{--comp-default-file-picker-margin:var(--tct-file-picker-margin-top, var(--t-file-picker-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-file-picker-margin-bottom, var(--t-file-picker-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-file-picker-margin, var(--comp-default-file-picker-margin))}.browse{text-align:left}.drop-zone-text{--tct-link-font-weight:var(--tct-file-picker-browse-link-font-weight, 700);color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{--tct-icon-stroke-primary:var(--tct-file-picker-drop-zone-icon-color, var(--t-text, #4d4d4d));--tct-icon-stroke-secondary:var(--tct-file-picker-drop-zone-icon-color, var(--t-text, #4d4d4d));align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-width:var(--tct-file-picker-drop-zone-border-width, 2px);color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size, var(--const-px-14, 14px)));font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;max-width:var(--tct-file-picker-drop-zone-max-width, 640px);min-width:var(--tct-file-picker-drop-zone-min-width, 320px);padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.drop-zone-disabled{opacity:var(--tct-file-picker-drop-zone-disabled-opacity, var(--app-disabled-opacity, 0.4));cursor:not-allowed}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:var(--tct-file-picker-item-close-btn-border-radius, 4px);--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-info{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);max-width:var(--tct-file-picker-drop-zone-max-width, 640px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, var(--const-px-14, 14px)));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{--tct-btn-icon-width:var(--tct-file-picker-item-close-btn-size, 30px);--tct-btn-icon-height:var(--tct-file-picker-item-close-btn-size, 30px)}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d))}[slot=action]{display:flex;align-items:center}';
+    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{--comp-default-file-picker-margin:var(--tct-file-picker-margin-top, var(--t-file-picker-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-file-picker-margin-bottom, var(--t-file-picker-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-file-picker-margin, var(--comp-default-file-picker-margin))}.browse{text-align:left}.drop-zone-text{--tct-link-font-weight:var(--tct-file-picker-browse-link-font-weight, 700);color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{--tct-icon-stroke-primary:var(--tct-file-picker-drop-zone-icon-color, var(--t-text, #4d4d4d));--tct-icon-stroke-secondary:var(--tct-file-picker-drop-zone-icon-color, var(--t-text, #4d4d4d));align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-width:var(--tct-file-picker-drop-zone-border-width, 2px);color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size, var(--const-px-14, 14px)));font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;max-width:var(--tct-file-picker-drop-zone-max-width, 640px);min-width:var(--tct-file-picker-drop-zone-min-width, 320px);padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.drop-zone-disabled{opacity:var(--tct-file-picker-drop-zone-disabled-opacity, var(--app-disabled-opacity, 0.4));cursor:not-allowed}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:var(--tct-file-picker-item-close-btn-border-radius, 4px);--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-info{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.file-name-header{display:flex;align-items:center;min-width:0;white-space:nowrap;width:100%}.file-name-leading{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.file-name-trailing{direction:rtl;flex:0 0 auto;max-width:50%;overflow:hidden}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);max-width:var(--tct-file-picker-drop-zone-max-width, 640px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-list-container.more-files{-webkit-mask-image:linear-gradient(to bottom, currentColor calc(100% - var(--tct-file-picker-list-gradient-height, var(--app-scale-12x, 60px))), transparent 100%);mask-image:linear-gradient(to bottom, currentColor calc(100% - var(--tct-file-picker-list-gradient-height, var(--app-scale-12x, 60px))), transparent 100%)}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, var(--const-px-14, 14px)));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{--tct-btn-icon-width:var(--tct-file-picker-item-close-btn-size, 30px);--tct-btn-icon-height:var(--tct-file-picker-item-close-btn-size, 30px)}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d))}[slot=action]{display:flex;align-items:center}';
   }
 }, [ 257, "q2-file-picker", {
   buttonSize: [ 513, "button-size" ],
   description: [ 513 ],
   disabled: [ 516 ],
+  ellipsizeFileName: [ 516, "ellipsize-file-name" ],
   fileTypes: [ 513, "file-types" ],
   label: [ 513 ],
   maxFiles: [ 514, "max-files" ],
   maxFileSize: [ 514, "max-file-size" ],
+  showGradient: [ 516, "show-gradient" ],
   status: [ 16 ],
   value: [ 6160 ],
   variant: [ 513 ],
@@ -382,17 +439,20 @@ const h =  t(class extends e {
   isDropZoneHighlighted: [ 32 ],
   refreshCounter: [ 32 ]
 }, void 0, {
+  showGradient: [ {
+    updateGradientVisibility: 0
+  } ],
   status: [ {
     updateFileList: 0
   } ]
 } ]);
 
-const v = h, defineCustomElement = function() {
+const v = m, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-file-picker", "q2-btn", "q2-icon", "q2-item", "q2-link", "q2-list", "q2-loading" ].forEach((t => {
     switch (t) {
      case "q2-file-picker":
-      customElements.get(a(t)) || customElements.define(a(t), h);
+      customElements.get(a(t)) || customElements.define(a(t), m);
       break;
 
      case "q2-btn":
@@ -416,7 +476,7 @@ const v = h, defineCustomElement = function() {
       break;
 
      case "q2-loading":
-      customElements.get(a(t)) || m();
+      customElements.get(a(t)) || h();
     }
   }));
 };