q2-tecton-elements 1.71.4 → 1.73.0

package/dist/components/q2-detail.js

@@ -76,16 +76,16 @@ const r =  t(class extends e {
   // #region Render Methods
   render() {
     return i("div", {
-      key: "0f3654772fe3929f6bf7294f454c774b495a6b62",
+      key: "18da4ca97fe076c40a3d6ef95b73b570cee07649",
       class: this.detailClasses
     }, this.hasLabel && i("div", {
-      key: "3d0507462b8cb995a3f19dccd8bcede903a99800",
+      key: "7b88ffdd3e42abb1313d729874d198642a83e66d",
       class: this.labelClasses,
       "aria-describedby": this.description ? "label-description" : void 0
     }, this.label ? o(this.label) : this.hasLabelSlotContent ? i("slot", {
       name: "label"
     }) : ""), this.hasDescripiton && i("div", {
-      key: "bef3f201c69fdee763fc302aecc15a28fd9940be",
+      key: "9eecdbf3aa2519da9508f1c210d3b3a9129824ce",
       id: "label-description",
       class: this.descriptionClasses
     }, this.description ? o(this.description) : this.hasDefaultSlotContent ? i("slot", null) : ""));

package/dist/components/q2-dropdown.js

@@ -12,9 +12,9 @@ import { d as v } from "./q2-dropdown-item2.js";
 
 import { d as b } from "./q2-icon2.js";
 
-import { d as f } from "./q2-loading2.js";
+import { d as w } from "./q2-loading2.js";
 
-import { d as w } from "./q2-option-list2.js";
+import { d as f } from "./q2-option-list2.js";
 
 import { d as g } from "./q2-popover2.js";
 
@@ -188,7 +188,7 @@ const y =  t(class extends e {
   get toggleButtonProps() {
     const t = [ "primary", "secondary", "neutral" ], e = [ "icon", "fab", "custom", ...t ].includes(this.type) ? this.type : "", o = "icon" === e, i = "fab" === e, n = "custom" === e;
     let s;
-    t.includes(e) && (s = "neutral" === e ? e : "workflow-" + e);
+    t.includes(e) && (s = e);
     return {
       icon: o,
       fab: i,
@@ -264,12 +264,12 @@ const y =  t(class extends e {
   render() {
     const t = this.toggleButtonProps;
     return o("click-elsewhere", {
-      key: "27e7a560b21894fb10175be18c9cb07e37f59db3",
+      key: "45129d88765c097736a818c203418921bc669d2f",
       class: this.open ? "dropdown-open" : "",
       onChange: this.onClickElsewhere,
       "test-id": "dropdownContainer"
     }, o("q2-btn", {
-      key: "b53dace27e75fdbcd87a1689470a1466ad9e07d3",
+      key: "cb76fe56a37af0909e06f267969c0f6605be318d",
       tabIndex: 0,
       ref: t => this.controlElement = t,
       class: t.className,
@@ -297,7 +297,7 @@ const y =  t(class extends e {
     }, c(this.label)), this.icon ? o("q2-icon", {
       type: this.icon
     }) : " ")), o("q2-popover", {
-      key: "4a15e7d6d8f474c8464e39e35437cd8edcc9487d",
+      key: "73bb8792c03313ae6074299d431d913435e95707",
       ref: t => this.popoverElement = t,
       controlElement: this.controlElement,
       open: this.open,
@@ -309,10 +309,10 @@ const y =  t(class extends e {
       mode: this.popoverMode || void 0,
       block: this.block
     }, o("slot", {
-      key: "7854254650f81b8d5a229acbec55aa8beab36882",
+      key: "05fa5e37195ce747ac4e801e1decf55838d9c752",
       name: "popover-top"
     }), o("q2-option-list", {
-      key: "a38c9411306ad8d39456dce81bb50e9af13bf1f6",
+      key: "534b2dfaf2616937933aa2377d1a647688c679c9",
       onPopoverState: this.onPopoverState,
       id: "option-list",
       ref: t => this.optionList = t,
@@ -320,9 +320,9 @@ const y =  t(class extends e {
       label: c("tecton.element.optionList.label", [ this.optionListLabel ]),
       "no-select": !0
     }, o("slot", {
-      key: "7472127d019366f76eff86cd744d050d197b25c1"
+      key: "686b6b14ebc67aad7707e6dc0c0170b117afde4e"
     })), o("slot", {
-      key: "5af670e8f5ed273175100ddc9202c44e2c06f7b3",
+      key: "43b916294d33ac547efc6eeed2b2fc1c87085ad3",
       name: "popover-bottom"
     })));
   }
@@ -358,7 +358,7 @@ const y =  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-flex}:host([block]){display:block}:host([full-width]:not([full-width=false])){display:inline-flex;justify-content:center;width:100%}::slotted([slot=popover-top]){padding:var(--tct-dropdown-popover-top-slot-padding, 0);border-bottom:var(--tct-dropdown-slot-border-top)}::slotted([slot=popover-bottom]){padding:var(--tct-dropdown-popover-bottom-slot-padding, 0);border-top:var(--tct-dropdown-slot-border-bottom)}q2-icon{pointer-events:none;margin-block:-100px}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width));--tct-popover-padding:var(--tct-dropdown-content-padding)}';
+    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-flex}:host([block]){display:block}:host([full-width]:not([full-width=false])){display:inline-flex;justify-content:center;width:100%}::slotted([slot=popover-top]){padding:var(--tct-dropdown-popover-top-slot-padding, 0);border-bottom:var(--tct-dropdown-slot-border-top)}::slotted([slot=popover-bottom]){padding:var(--tct-dropdown-popover-bottom-slot-padding, 0);border-top:var(--tct-dropdown-slot-border-bottom)}q2-icon{pointer-events:none;margin-block:-100px;--tct-icon-size:var(--tct-dropdown-icon-size, var(--const-px-18, 18px))}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width));--tct-popover-padding:var(--tct-dropdown-content-padding)}';
   }
 }, [ 257, "q2-dropdown", {
   additionalContext: [ 513, "additional-context" ],
@@ -441,11 +441,11 @@ const x = y, defineCustomElement = function() {
       break;
 
      case "q2-loading":
-      customElements.get(n(t)) || f();
+      customElements.get(n(t)) || w();
       break;
 
      case "q2-option-list":
-      customElements.get(n(t)) || w();
+      customElements.get(n(t)) || f();
       break;
 
      case "q2-popover":

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) {
@@ -24,21 +24,30 @@ const f =  t(class extends e {
     /**
          * The visible descriptor for the element.
          * Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.
+         * @warning
+         * Required for screen reader compliance even when `hideLabel` is `true`.
          * @localizable
          */
     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.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();
   }
@@ -144,7 +136,7 @@ const f =  t(class extends e {
     n(this);
   }
   observesEditing(t, e) {
-    t !== e && this.scheduledAfterRender.push(this.hostElement.focus);
+    t !== e && (t || this.discardDraft(), this.scheduledAfterRender.push(this.hostElement.focus));
   }
   errorsObserver() {
     const {editing: t, hasErrors: e} = this, i = this.hostElement.shadowRoot.activeElement;
@@ -167,6 +159,20 @@ const f =  t(class extends e {
   get wrapperClass() {
     return "q2-editable-field-wrapper " + (this.editing ? "editing" : "");
   }
+  /**
+     * Drops the in-progress draft and re-syncs the input and the read state display from `value`.
+     *
+     * Runs whenever the field leaves the edit state, including when a consumer drives `editing` itself, so the
+     * read state never renders a discarded draft.
+     */  discardDraft() {
+    this.innerValue = void 0, this.formattedValue = void 0, 
+    // `q2-input` only drops its own draft when its `value` prop actually changes, so bounce through a
+    // throwaway value that is guaranteed to differ from `value` before restoring it.
+    this.inputElement.value = "" === this.value ? " " : "", this.inputElement.value = this.value;
+  }
+  emitChangeEvents(t) {
+    return [ this.change.emit(t), this.tctChange.emit(t) ];
+  }
   generateEditStateDOM() {
     return s("div", {
       class: this.wrapperClass,
@@ -249,11 +255,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: "38f7c5b55e8b6f0590c72ab81a4bb26c93506249"
     }, this.generateEditStateDOM(), this.generateReadStateDOM());
   }
   get hostElement() {
@@ -276,7 +285,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 +307,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 +343,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-example.js

@@ -1,9 +1,9 @@
-import { proxyCustomElement as t, HTMLElement as n, createEvent as e, h as i, Fragment as o, Host as a, transformTag as r } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as e, createEvent as n, h as i, Fragment as o, Host as a, transformTag as r } from "@stencil/core/internal/client";
 
-const s =  t(class extends n {
+const s =  t(class extends e {
   constructor(t) {
-    super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.tctClick = e(this, "tctClick", 7), 
-    this.tctDrag = e(this, "tctDrag", 7), this.tctOpen = e(this, "tctOpen", 7), this.someText = "default", 
+    super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.tctClick = n(this, "tctClick", 7), 
+    this.tctDrag = n(this, "tctDrag", 7), this.tctOpen = n(this, "tctOpen", 7), this.someText = "default", 
     this.status = 0, 
     /**
          * Specifies the menu type.
@@ -20,8 +20,8 @@ const s =  t(class extends n {
   disconnectedCallback() {}
   componentWillLoad() {}
   componentDidLoad() {}
-  componentShouldUpdate(t, n, e) {
-    return "content" === e && t !== n;
+  componentShouldUpdate(t, e, n) {
+    return "content" === n && t !== e;
   }
   componentWillUpdate() {}
   componentDidUpdate() {}
@@ -71,11 +71,11 @@ const s =  t(class extends n {
      *    Methods that are called when a property is updated as specified via
      *    the @Watch() decorator. List in alphabetical order of the property.
      */
-  contentChanged(t, n) {
-    t !== n && this.updateState();
+  contentChanged(t, e) {
+    t !== e && this.updateState();
   }
-  statusChanged(t, n) {
-    t !== n && this.updateState();
+  statusChanged(t, e) {
+    t !== e && this.updateState();
   }
   // #endregion
   // #region Local Methods
@@ -117,7 +117,7 @@ const s =  t(class extends n {
   }
   render() {
     return i(a, {
-      key: "7878622b0f2a455617e109b9aa32290bffc00a92",
+      key: "e7adf64d703f0226f4ee5f5038ddbcda28b27ed2",
       attribute: "navigation"
     }, this.renderMenuInner());
   }

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,8 +140,9 @@ const h =  t(class extends e {
         class: "browse",
         "test-id": "browse"
       }, r("q2-btn", {
+        block: this.isMobileViewport,
         disabled: t || this.areFilesUploading,
-        intent: "workflow-primary",
+        intent: "primary",
         loading: this.areFilesUploading,
         onClick: () => this.launchFileBrowser(),
         size: this.actualButtonSize,
@@ -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();
     }
   }));
 };

package/dist/components/q2-form.js

@@ -1,6 +1,6 @@
-import { proxyCustomElement as t, HTMLElement as n, h as o, transformTag as a } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as n, h as o, transformTag as i } from "@stencil/core/internal/client";
 
-const i =  t(class extends n {
+const a =  t(class extends n {
   constructor(t) {
     super(), !1 !== t && this.__registerHost(), this.__attachShadow(), 
     // #region Public Property API
@@ -11,10 +11,10 @@ const i =  t(class extends n {
   // #region Render Methods
   render() {
     return o("div", {
-      key: "b01b965b3fc436b4155245fa747e4c8922304114",
+      key: "e4a4cee5eb8e69c9fe81423d3942a6299b4d1462",
       class: "container"
     }, o("slot", {
-      key: "039fd27f2a80825f14a6247eb330eac983638389"
+      key: "1d729b1c93148f0a12954688cd33266b24f40f67"
     }));
   }
   static get style() {
@@ -24,10 +24,10 @@ const i =  t(class extends n {
   spacing: [ 513 ]
 } ]);
 
-const e = i, defineCustomElement = function() {
+const e = a, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-form" ].forEach((t => {
-    if ("q2-form" === t) customElements.get(a(t)) || customElements.define(a(t), i);
+    if ("q2-form" === t) customElements.get(i(t)) || customElements.define(i(t), a);
   }));
 };
 

package/dist/components/q2-formatted-text.js

@@ -63,11 +63,11 @@ const r =  t(class extends e {
   render() {
     const {formattedTextClasses: t} = this;
     return i("div", {
-      key: "9345b2829e7ac6dd1e5e308e1b840dcb298dbc0d",
+      key: "bb6f08a7fd5801e7527624b766061019ce931ac5",
       class: t,
       "aria-label": this.formattedValue
     }, i("span", {
-      key: "4687a60218658aeced2507ffd9f5eef6c5c9b40e"
+      key: "44808806b71f4b3783fa38806789bbc91956bdcd"
     }, this.formattedValue));
   }
   static get watchers() {