q2-tecton-elements 1.71.4 → 1.73.0

package/dist/q2-tecton-elements/q2-detail.entry.js

@@ -1,6 +1,6 @@
 import { r as t, h as e, g as i } from "./index-Cqkz7Bnm.js";
 
-import { b as l, h as a, l as o } from "./index-Cps4jSQM.js";
+import { b as l, h as a, l as o } from "./index-CP8pXJ-l.js";
 
 const n = class {
   constructor(e) {
@@ -76,16 +76,16 @@ const n = class {
   // #region Render Methods
   render() {
     return e("div", {
-      key: "0f3654772fe3929f6bf7294f454c774b495a6b62",
+      key: "18da4ca97fe076c40a3d6ef95b73b570cee07649",
       class: this.detailClasses
     }, this.hasLabel && e("div", {
-      key: "3d0507462b8cb995a3f19dccd8bcede903a99800",
+      key: "7b88ffdd3e42abb1313d729874d198642a83e66d",
       class: this.labelClasses,
       "aria-describedby": this.description ? "label-description" : void 0
     }, this.label ? o(this.label) : this.hasLabelSlotContent ? e("slot", {
       name: "label"
     }) : ""), this.hasDescripiton && e("div", {
-      key: "bef3f201c69fdee763fc302aecc15a28fd9940be",
+      key: "9eecdbf3aa2519da9508f1c210d3b3a9129824ce",
       id: "label-description",
       class: this.descriptionClasses
     }, this.description ? o(this.description) : this.hasDefaultSlotContent ? e("slot", null) : ""));

package/dist/q2-tecton-elements/q2-dropdown-item.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as o, h as e, g as r } from "./index-Cqkz7Bnm.js";
 
-import { l as i, d as n, o as a } from "./index-Cps4jSQM.js";
+import { l as i, d as n, o as a } from "./index-CP8pXJ-l.js";
 
 import { m as d } from "./mirror-emit-DUjY_ucm.js";
 

package/dist/q2-tecton-elements/q2-dropdown.entry.js

@@ -2,7 +2,7 @@ import { r as t, h as o, F as e, g as i } from "./index-Cqkz7Bnm.js";
 
 import { s as n, a as s } from "./action-sheet-DuQ7VZ08.js";
 
-import { o as a, i as r, w as d, b as l, d as h, l as p } from "./index-Cps4jSQM.js";
+import { o as a, i as r, w as d, b as l, d as h, l as p } from "./index-CP8pXJ-l.js";
 
 const c = class {
   constructor(o) {
@@ -174,7 +174,7 @@ const c = class {
   get toggleButtonProps() {
     const t = [ "primary", "secondary", "neutral" ], o = [ "icon", "fab", "custom", ...t ].includes(this.type) ? this.type : "", e = "icon" === o, i = "fab" === o, n = "custom" === o;
     let s;
-    t.includes(o) && (s = "neutral" === o ? o : `workflow-${o}`);
+    t.includes(o) && (s = o);
     return {
       icon: e,
       fab: i,
@@ -250,12 +250,12 @@ const c = class {
   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,
@@ -283,7 +283,7 @@ const c = class {
     }, p(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,
@@ -295,10 +295,10 @@ const c = class {
       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,
@@ -306,9 +306,9 @@ const c = class {
       label: p("tecton.element.optionList.label", [ this.optionListLabel ]),
       "no-select": !0
     }, o("slot", {
-      key: "7472127d019366f76eff86cd744d050d197b25c1"
+      key: "686b6b14ebc67aad7707e6dc0c0170b117afde4e"
     })), o("slot", {
-      key: "5af670e8f5ed273175100ddc9202c44e2c06f7b3",
+      key: "43b916294d33ac547efc6eeed2b2fc1c87085ad3",
       name: "popover-bottom"
     })));
   }
@@ -345,6 +345,6 @@ const c = class {
   }
 };
 
-c.style = '*{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)}';
+c.style = '*{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)}';
 
 export { c as q2_dropdown }

package/dist/q2-tecton-elements/q2-editable-field.entry.js

@@ -1,10 +1,10 @@
 import { r as t, c as i, h as e, g as s } from "./index-Cqkz7Bnm.js";
 
-import { d as a, o as n, i as r, w as o, l as h } from "./index-Cps4jSQM.js";
+import { d as a, o as n, i as r, w as o, l } from "./index-CP8pXJ-l.js";
 
-import { m as l } from "./mirror-emit-DUjY_ucm.js";
+import { m as d } from "./mirror-emit-DUjY_ucm.js";
 
-const d = class {
+const h = class {
   constructor(e) {
     t(this, e), this.change = i(this, "change", 7), this.input = i(this, "input", 7), 
     this.tctChange = i(this, "tctChange", 7), this.tctInput = i(this, "tctInput", 7), 
@@ -14,39 +14,51 @@ const d = class {
     /**
          * 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(), l(this, [ "change", "tctChange" ], {
+      null == t || t.stopPropagation();
+      const i = 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(i) || (this.editing = !1);
+      }));
     }, this.editClick = t => {
-      null == t || t.stopPropagation(), l(this, [ "change", "tctChange" ], {
+      null == t || t.stopPropagation();
+      const i = this.emitChangeEvents({
         editing: !0,
         name: "edit"
       });
+      queueMicrotask((() => {
+        this.isDefaultPrevented(i) || (this.editing = !0);
+      }));
     }, this.inputChange = t => {
       t.stopPropagation();
     }, this.inputClick = t => {
       t.stopPropagation();
     }, this.inputInput = t => {
-      t.stopPropagation(), l(this, [ "input", "tctInput" ], t.detail), this.formattedValue = t.detail.formattedValue, 
+      t.stopPropagation(), d(this, [ "input", "tctInput" ], t.detail), this.formattedValue = t.detail.formattedValue, 
       this.innerValue = t.detail.value;
     }, this.inputKeyDown = t => "Escape" === t.key || "Esc" === t.key ? (t.preventDefault(), 
     void this.cancelClick()) : "Enter" === t.key ? (t.preventDefault(), void this.saveClick()) : void 0, 
     this.saveClick = t => {
       t && t.stopPropagation();
-      const i = this.hostElement.shadowRoot.querySelector("q2-input").value;
-      l(this, [ "change", "tctChange" ], {
+      const i = this.hostElement.shadowRoot.querySelector("q2-input").value, e = this.innerValue || i, s = this.formattedValue || i, a = this.emitChangeEvents({
         editing: !1,
         name: "save",
-        value: this.innerValue || i,
-        formattedValue: this.formattedValue || i
+        value: e,
+        formattedValue: s
       });
+      queueMicrotask((() => {
+        this.isDefaultPrevented(a) || (this.hasErrors ? this.inputElement.focus() : (this.value = e, 
+        this.editing = !1));
+      }));
     };
   }
   // #endregion
@@ -62,26 +74,6 @@ const d = class {
   }
   // #endregion
   // #region Listeners
-  onHostElementChange(t) {
-    r(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) {
     r(t, this.hostElement) && this.hostElement.shadowRoot.querySelector(this.editing ? "q2-input" : "q2-btn.begin-edit").focus();
   }
@@ -134,7 +126,7 @@ const d = class {
     a(this);
   }
   observesEditing(t, i) {
-    t !== i && this.scheduledAfterRender.push(this.hostElement.focus);
+    t !== i && (t || this.discardDraft(), this.scheduledAfterRender.push(this.hostElement.focus));
   }
   errorsObserver() {
     const {editing: t, hasErrors: i} = this, e = this.hostElement.shadowRoot.activeElement;
@@ -152,11 +144,25 @@ const d = class {
     return Array.isArray(this.hints) && !!this.hints.length;
   }
   get locLabel() {
-    return this.label && h(this.label) || "";
+    return this.label && l(this.label) || "";
   }
   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 e("div", {
       class: this.wrapperClass,
@@ -183,7 +189,7 @@ const d = class {
     }), e("q2-btn", {
       ref: t => this.cancelBtnElement = t,
       class: "cancel-edit",
-      label: `${h("tecton.element.editableField.cancel")} ${this.locLabel}`,
+      label: `${l("tecton.element.editableField.cancel")} ${this.locLabel}`,
       "hide-label": !0,
       "test-id": "cancelButton",
       onClick: t => t.stopImmediatePropagation(),
@@ -193,7 +199,7 @@ const d = class {
     })), e("q2-btn", {
       ref: t => this.saveBtnElement = t,
       class: "save-edit",
-      label: `${h("tecton.element.editableField.save")} ${this.locLabel}`,
+      label: `${l("tecton.element.editableField.save")} ${this.locLabel}`,
       "hide-label": !0,
       "test-id": "saveButton",
       onClick: t => t.stopImmediatePropagation(),
@@ -213,7 +219,7 @@ const d = class {
     }, this.formattedValue || this.value), e("q2-btn", {
       ref: t => this.editBtnElement = t,
       class: "begin-edit",
-      label: `${h("tecton.element.editableField.edit")} ${this.locLabel}`,
+      label: `${l("tecton.element.editableField.edit")} ${this.locLabel}`,
       "hide-label": !0,
       disabled: this.disabled,
       "test-id": "editButton",
@@ -229,7 +235,7 @@ const d = class {
     }, this.formattedValue || this.value), e("q2-btn", {
       ref: t => this.editBtnElement = t,
       class: "begin-edit",
-      label: `${h("tecton.element.editableField.edit")} ${this.locLabel}`,
+      label: `${l("tecton.element.editableField.edit")} ${this.locLabel}`,
       "hide-label": !0,
       disabled: this.disabled,
       "test-id": "editButton",
@@ -239,11 +245,14 @@ const d = class {
       type: "edit"
     })));
   }
+  isDefaultPrevented(t) {
+    return null != this.hostElement.onchange || t.some((t => t.defaultPrevented));
+  }
   // #endregion
   // #region Render Methods
   render() {
     return e("div", {
-      key: "bd200b48458ec6c7cb6c6928a1758420dbca66e3"
+      key: "38f7c5b55e8b6f0590c72ab81a4bb26c93506249"
     }, this.generateEditStateDOM(), this.generateReadStateDOM());
   }
   get hostElement() {
@@ -267,6 +276,6 @@ const d = class {
   }
 };
 
-d.style = '*{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}';
+h.style = '*{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}';
 
-export { d as q2_editable_field }
+export { h as q2_editable_field }

package/dist/q2-tecton-elements/q2-example.entry.js

@@ -116,7 +116,7 @@ const r = class {
   }
   render() {
     return e(o, {
-      key: "7878622b0f2a455617e109b9aa32290bffc00a92",
+      key: "e7adf64d703f0226f4ee5f5038ddbcda28b27ed2",
       attribute: "navigation"
     }, this.renderMenuInner());
   }

package/dist/q2-tecton-elements/q2-file-picker.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as i, F as r, g as o } from "./index-Cqkz7Bnm.js";
 
-import { l as a, h as n } from "./index-Cps4jSQM.js";
+import { l as a, h as n } from "./index-CP8pXJ-l.js";
 
 const s = class {
   constructor(o) {
@@ -20,6 +20,12 @@ const s = class {
          * 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
@@ -35,6 +41,10 @@ const s = class {
          * 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:
@@ -65,6 +75,10 @@ const s = class {
       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
@@ -114,8 +128,9 @@ const s = class {
         class: "browse",
         "test-id": "browse"
       }, i("q2-btn", {
+        block: this.isMobileViewport,
         disabled: t || this.areFilesUploading,
-        intent: "workflow-primary",
+        intent: "primary",
         loading: this.areFilesUploading,
         onClick: () => this.launchFileBrowser(),
         size: this.actualButtonSize,
@@ -134,9 +149,12 @@ const s = class {
         multiple: !0,
         tabIndex: -1
       }), i("div", {
-        class: "file-list-container"
+        class: "file-list-container",
+        onScroll: this.updateFileListGradient,
+        ref: t => this.fileListContainer = null != t ? t : this.fileListContainer
       }, i("q2-list", {
-        class: "file-list"
+        class: "file-list",
+        ref: t => this.fileList = null != t ? t : this.fileList
       }, this.displayedFiles.map((e => i("q2-item", {
         class: this.getFileItemClasses(e.file.name),
         key: e.file.name,
@@ -152,9 +170,18 @@ const s = class {
       }) : i("q2-icon", {
         class: "icon-success",
         type: "success"
-      })), i("div", {
+      })), !1 === this.ellipsizeFileName ? i("div", {
+        slot: "header"
+      }, e.file.name) : i("div", {
+        class: "file-name-header",
         slot: "header"
-      }, e.file.name), i("div", {
+      }, i("span", {
+        class: "file-name-leading"
+      }, e.file.name.slice(0, Math.ceil(e.file.name.length / 2))), i("span", {
+        class: "file-name-trailing"
+      }, i("bdo", {
+        dir: "ltr"
+      }, e.file.name.slice(Math.ceil(e.file.name.length / 2))))), i("div", {
         class: "file-item-info",
         slot: "body"
       }, this.getFileItemStatusMessage(e)), i("div", {
@@ -191,7 +218,23 @@ const s = class {
     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));
@@ -233,6 +276,9 @@ const s = class {
   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)), 
@@ -341,11 +387,20 @@ const s = class {
   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 o(this);
   }
   static get watchers() {
     return {
+      showGradient: [ {
+        updateGradientVisibility: 0
+      } ],
       status: [ {
         updateFileList: 0
       } ]
@@ -353,6 +408,6 @@ const s = class {
   }
 };
 
-s.style = '*{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}';
+s.style = '*{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}';
 
 export { s as q2_file_picker }

package/dist/q2-tecton-elements/q2-form.entry.js

@@ -11,10 +11,10 @@ const t = class {
   // #region Render Methods
   render() {
     return n("div", {
-      key: "b01b965b3fc436b4155245fa747e4c8922304114",
+      key: "e4a4cee5eb8e69c9fe81423d3942a6299b4d1462",
       class: "container"
     }, n("slot", {
-      key: "039fd27f2a80825f14a6247eb330eac983638389"
+      key: "1d729b1c93148f0a12954688cd33266b24f40f67"
     }));
   }
 };

package/dist/q2-tecton-elements/q2-formatted-text.entry.js

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

package/dist/q2-tecton-elements/q2-icon.entry.js

@@ -1,6 +1,6 @@
 import { r, a, h as t, g as s } from "./index-Cqkz7Bnm.js";
 
-import { c as d } from "./index-Cps4jSQM.js";
+import { c as d } from "./index-CP8pXJ-l.js";
 
 import { g as e } from "./sprites-jG2RmiwF.js";