q2-tecton-elements 1.70.2 → 1.71.0

package/dist/components/q2-dropdown-item2.js

@@ -1,19 +1,19 @@
 import { proxyCustomElement as t, HTMLElement as o, createEvent as e, h as r, transformTag as i } from "@stencil/core/internal/client";
 
-import { l as a, h as n, o as s } from "./index2.js";
+import { l as n, h as a, o as s } from "./index2.js";
 
 import { m as d } from "./mirror-emit.js";
 
-import { b as c } from "./component.js";
+import { b as p } from "./component.js";
 
-import { d as p } from "./q2-icon2.js";
+import { d as c } from "./q2-icon2.js";
 
 const l =  t(class extends o {
   constructor(t) {
     super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.click = e(this, "click", 7), 
     this.tctClick = e(this, "tctClick", 7), this.handleQ2LocValue = () => {
       const t = this.hostElement.querySelector("q2-loc");
-      return t ? t.value ? a(t.value, t.substitutions) : a(t.innerText, t.substitutions) : "";
+      return t ? t.value ? n(t.value, t.substitutions) : n(t.innerText, t.substitutions) : "";
     }, this.onItemClick = t => {
       t.stopImmediatePropagation(), d(this, [ "click", "tctClick" ], {
         type: "select",
@@ -37,7 +37,7 @@ const l =  t(class extends o {
   // #endregion
   // #region Component Lifecycle Events
   componentWillLoad() {
-    c(this.hostElement, "q2-dropdown"), n(this), this.q2LocValue = this.handleQ2LocValue();
+    p(this.hostElement, "q2-dropdown"), a(this), this.q2LocValue = this.handleQ2LocValue();
   }
   componentDidLoad() {
     this.separator || s(this.hostElement);
@@ -50,7 +50,7 @@ const l =  t(class extends o {
   // #endregion
   // #region Watchers
   ariaLabelObserver() {
-    n(this);
+    a(this);
   }
   // #endregion
   // #region Local Methods
@@ -58,7 +58,7 @@ const l =  t(class extends o {
     return this.label || this.hostElement.textContent.trim() || this.q2LocValue;
   }
   get removeLabel() {
-    return a("tecton.element.dropdownItem.remove", [ this.innerLabel || "" ]);
+    return n("tecton.element.dropdownItem.remove", [ this.innerLabel || "" ]);
   }
   focusItem() {
     this.dropdownItemBtn.focus({
@@ -76,7 +76,7 @@ const l =  t(class extends o {
       role: "presentation"
     }, r("button", {
       ref: t => this.dropdownItemBtn = t,
-      "aria-label": a(this.innerLabel),
+      "aria-label": n(this.innerLabel),
       class: "dropdown-item-button dropdown-item",
       tabindex: "-1",
       disabled: this.disabled,
@@ -87,7 +87,7 @@ const l =  t(class extends o {
       "test-id": "dropdownItem"
     }, r("div", {
       class: "dropdown-item-btn-content"
-    }, r("slot", null, a(this.innerLabel)))), this.removable && r("button", {
+    }, r("slot", null, n(this.innerLabel)))), this.removable && r("button", {
       ref: t => this.removeBtn = t,
       class: "dropdown-item-button remove-dropdown-item",
       tabindex: "-1",
@@ -123,7 +123,7 @@ const l =  t(class extends o {
     };
   }
   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}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}.dropdown-item-wrapper{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-default-dropdown-item-padding-x:var(--app-scale-2x, 10px);--comp-default-dropdown-item-padding-y:var(--app-scale-2x, 10px);--comp-default-dropdown-item-padding:var(--comp-default-dropdown-item-padding-y)       var(--comp-default-dropdown-item-padding-x);display:grid;align-items:center;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));grid-template-columns:1fr;color:inherit}.dropdown-item-wrapper.removable{grid-template-columns:1fr auto}.dropdown-item-wrapper.removable .dropdown-item{padding-right:0}.dropdown-item-wrapper.removable .remove-dropdown-item{flex:0 0 44px}.dropdown-item-button{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height:var(--tct-dropdown-item-min-height, 44px);min-width:44px;border:none;background:transparent;outline:0;transition:var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));transition-property:background, color, box-shadow, fill, border-color, border-width;cursor:pointer}.dropdown-item-button:disabled{opacity:var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}.dropdown-item{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-default-dropdown-item-padding-x:var(--app-scale-2x, 10px);width:100%;display:grid;align-items:center;justify-content:start;grid-template-columns:1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));min-height:var(--tct-dropdown-item-min-height, 44px);padding-left:var(--comp-default-dropdown-item-padding-x);padding-right:var(--comp-default-dropdown-item-padding-x);text-align:left;min-height:var(--tct-dropdown-item-min-height, 44px)}.dropdown-item-button:focus-visible{box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}.dropdown-item-btn-content{display:flex;justify-content:start;color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));font-size:var(--tct-dropdown-item-font-size, inherit);overflow:hidden;text-overflow:ellipsis}:host(:not([disabled])) .dropdown-item-button:hover,:host(:not([disabled])) .dropdown-item-button:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-option-active-color, inherit)}:host(:not([disabled])) .dropdown-item-button:hover,:host(:not([disabled])) .dropdown-item-button:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item-button:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)))}";
+    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}}}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}.dropdown-item-wrapper{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-default-dropdown-item-padding-x:var(--app-scale-2x, 10px);--comp-default-dropdown-item-padding-y:var(--app-scale-2x, 10px);--comp-default-dropdown-item-padding:var(--comp-default-dropdown-item-padding-y)       var(--comp-default-dropdown-item-padding-x);display:grid;align-items:center;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));grid-template-columns:1fr;color:inherit}.dropdown-item-wrapper.removable{grid-template-columns:1fr auto}.dropdown-item-wrapper.removable .dropdown-item{padding-right:0}.dropdown-item-wrapper.removable .remove-dropdown-item{flex:0 0 44px}.dropdown-item-button{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-dropdown-item-tween:var(--tct-tween-1, var(--app-tween-1, cubic-bezier(0.4, 0, 0.2, 1)));margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));min-height:var(--tct-dropdown-item-min-height, 44px);min-width:44px;border:none;background:transparent;outline:0;transition:var(--tct-dropdown-item-tween, var(--comp-dropdown-item-tween));transition-property:background, color, box-shadow, fill, border-color, border-width;cursor:pointer}.dropdown-item-button:disabled{opacity:var(--tct-dropdown-item-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}.dropdown-item{--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));--comp-default-dropdown-item-padding-x:var(--app-scale-2x, 10px);width:100%;display:grid;align-items:center;justify-content:start;grid-template-columns:1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));min-height:var(--tct-dropdown-item-min-height, 44px);padding-left:var(--comp-default-dropdown-item-padding-x);padding-right:var(--comp-default-dropdown-item-padding-x);text-align:left;min-height:var(--tct-dropdown-item-min-height, 44px)}.dropdown-item-button:focus-visible{box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}.dropdown-item-btn-content{display:flex;justify-content:start;color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));font-size:var(--tct-dropdown-item-font-size, inherit);overflow:hidden;text-overflow:ellipsis}:host(:not([disabled])) .dropdown-item-button:hover,:host(:not([disabled])) .dropdown-item-button:focus{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-option-active-color, inherit)}:host(:not([disabled])) .dropdown-item-button:hover,:host(:not([disabled])) .dropdown-item-button:focus{color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}:host(:not([disabled])) .dropdown-item-button:focus{box-shadow:var(--tct-dropdown-item-focus-box-shadow, var(--const-inset-double-focus-ring, inset 0 0 0 2px var(--t-base), inset 0 0 0 4px var(--const-focus-color), inset 0 0 0 6px var(--t-base)))}';
   }
 }, [ 257, "q2-dropdown-item", {
   active: [ 516 ],
@@ -149,7 +149,7 @@ function defineCustomElement() {
       break;
 
      case "q2-icon":
-      customElements.get(i(t)) || p();
+      customElements.get(i(t)) || c();
     }
   }));
 }

package/dist/components/q2-dropdown.js

@@ -2,23 +2,23 @@ import { proxyCustomElement as t, HTMLElement as e, h as o, Fragment as i, trans
 
 import { s, a } from "./action-sheet.js";
 
-import { o as r, i as l, w as d, a as h, h as p, l as c } from "./index2.js";
+import { o as r, i as l, w as d, a as p, h, l as c } from "./index2.js";
 
 import { d as m } from "./click-elsewhere2.js";
 
-import { d as v } from "./q2-btn2.js";
+import { d as u } from "./q2-btn2.js";
 
-import { d as u } from "./q2-dropdown-item2.js";
+import { d as v } from "./q2-dropdown-item2.js";
 
 import { d as b } from "./q2-icon2.js";
 
-import { d as w } from "./q2-loading2.js";
+import { d as f } from "./q2-loading2.js";
 
-import { d as f } from "./q2-option-list2.js";
+import { d as w } from "./q2-option-list2.js";
 
 import { d as g } from "./q2-popover2.js";
 
-const x =  t(class extends e {
+const y =  t(class extends e {
   constructor(t) {
     var e;
     super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.dropdownItemSelector = "q2-dropdown-item:not([disabled]):not([separator])", 
@@ -157,10 +157,10 @@ const x =  t(class extends e {
     this.orchestrateResolvedMenuItems();
   }
   alignmentHandler() {
-    h(this, "alignment", "popoverAlignment");
+    p(this, "alignment", "popoverAlignment");
   }
   ariaLabelHandler() {
-    p(this);
+    h(this);
   }
   contextHandler() {
     this.orchestrateResolvedMenuItems();
@@ -172,7 +172,7 @@ const x =  t(class extends e {
     this.orchestrateResolvedMenuItems();
   }
   popDirectionHandler() {
-    h(this, "popDirection", "popoverDirection");
+    p(this, "popDirection", "popoverDirection");
   }
   resolvedTypeHandler() {
     this.orchestrateResolvedMenuItems();
@@ -358,7 +358,7 @@ const x =  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}: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}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" ],
@@ -416,12 +416,12 @@ const x =  t(class extends e {
   } ]
 } ]);
 
-const y = x, defineCustomElement = function() {
+const x = y, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-dropdown", "click-elsewhere", "q2-btn", "q2-dropdown-item", "q2-icon", "q2-loading", "q2-option-list", "q2-popover" ].forEach((t => {
     switch (t) {
      case "q2-dropdown":
-      customElements.get(n(t)) || customElements.define(n(t), x);
+      customElements.get(n(t)) || customElements.define(n(t), y);
       break;
 
      case "click-elsewhere":
@@ -429,11 +429,11 @@ const y = x, defineCustomElement = function() {
       break;
 
      case "q2-btn":
-      customElements.get(n(t)) || v();
+      customElements.get(n(t)) || u();
       break;
 
      case "q2-dropdown-item":
-      customElements.get(n(t)) || u();
+      customElements.get(n(t)) || v();
       break;
 
      case "q2-icon":
@@ -441,11 +441,11 @@ const y = x, defineCustomElement = function() {
       break;
 
      case "q2-loading":
-      customElements.get(n(t)) || w();
+      customElements.get(n(t)) || f();
       break;
 
      case "q2-option-list":
-      customElements.get(n(t)) || f();
+      customElements.get(n(t)) || w();
       break;
 
      case "q2-popover":
@@ -454,4 +454,4 @@ const y = x, defineCustomElement = function() {
   }));
 };
 
-export { y as Q2Dropdown, defineCustomElement }
+export { x as Q2Dropdown, defineCustomElement }

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as s, transformTag as a } from "@stencil/core/internal/client";
 
-import { h as n, o as r, i as l, w as o, l as d } from "./index2.js";
+import { h as n, o as r, i as o, w as l, l as d } from "./index2.js";
 
 import { m as h } from "./mirror-emit.js";
 
@@ -10,9 +10,9 @@ import { d as p } from "./q2-btn2.js";
 
 import { d as b } from "./q2-icon2.js";
 
-import { d as u } from "./q2-input2.js";
+import { d as m } from "./q2-input2.js";
 
-import { d as m } from "./q2-loading2.js";
+import { d as u } from "./q2-loading2.js";
 
 const f =  t(class extends e {
   constructor(t) {
@@ -73,7 +73,7 @@ const f =  t(class extends e {
   // #endregion
   // #region Listeners
   onHostElementChange(t) {
-    l(t, this.hostElement) && !this.hostElement.onchange && queueMicrotask((() => {
+    o(t, this.hostElement) && !this.hostElement.onchange && queueMicrotask((() => {
       switch (t.detail.name) {
        case "save":
         if (this.hasErrors) {
@@ -93,7 +93,7 @@ const f =  t(class extends e {
     }));
   }
   delegateFocus(t) {
-    l(t, this.hostElement) && this.hostElement.shadowRoot.querySelector(this.editing ? "q2-input" : "q2-btn.begin-edit").focus();
+    o(t, this.hostElement) && this.hostElement.shadowRoot.querySelector(this.editing ? "q2-input" : "q2-btn.begin-edit").focus();
   }
   inputFormatted(t) {
     this.formattedValue = t.detail.formattedValue;
@@ -135,8 +135,8 @@ const f =  t(class extends e {
      */  async setValue(t, e = {
     clickSave: !0
   }) {
-    await this.clickEdit(), await o(), await this.inputElement.setValue(t), e.clickSave && (await this.clickSave(), 
-    await o());
+    await this.clickEdit(), await l(), await this.inputElement.setValue(t), e.clickSave && (await this.clickSave(), 
+    await l());
   }
   // #endregion
   // #region Watchers
@@ -180,6 +180,7 @@ const f =  t(class extends e {
       errors: this.hasErrors ? this.errors : void 0,
       type: this.type,
       disabled: this.disabled,
+      _updateValueOnInput: !1,
       formatModifier: this.formatModifier,
       maxlength: this.maxlength,
       "test-id": "editableInput",
@@ -252,7 +253,7 @@ const f =  t(class extends e {
   // #region Render Methods
   render() {
     return s("div", {
-      key: "8231300cc04b5b2dce65d3c39ef2e4c0bc892696"
+      key: "bd200b48458ec6c7cb6c6928a1758420dbca66e3"
     }, this.generateEditStateDOM(), this.generateReadStateDOM());
   }
   get hostElement() {
@@ -275,7 +276,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}: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-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" ],
@@ -333,11 +334,11 @@ const v = f, defineCustomElement = function() {
       break;
 
      case "q2-input":
-      customElements.get(a(t)) || u();
+      customElements.get(a(t)) || m();
       break;
 
      case "q2-loading":
-      customElements.get(a(t)) || m();
+      customElements.get(a(t)) || u();
     }
   }));
 };

package/dist/components/q2-example.js

@@ -1,9 +1,9 @@
-import { proxyCustomElement as t, HTMLElement as e, createEvent as n, h as i, Fragment as o, Host as s, transformTag as a } from "@stencil/core/internal/client";
+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";
 
-const r =  t(class extends e {
+const s =  t(class extends n {
   constructor(t) {
-    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", 
+    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", 
     this.status = 0, 
     /**
          * Specifies the menu type.
@@ -20,8 +20,8 @@ const r =  t(class extends e {
   disconnectedCallback() {}
   componentWillLoad() {}
   componentDidLoad() {}
-  componentShouldUpdate(t, e, n) {
-    return "content" === n && t !== e;
+  componentShouldUpdate(t, n, e) {
+    return "content" === e && t !== n;
   }
   componentWillUpdate() {}
   componentDidUpdate() {}
@@ -71,11 +71,11 @@ const r =  t(class extends e {
      *    Methods that are called when a property is updated as specified via
      *    the @Watch() decorator. List in alphabetical order of the property.
      */
-  contentChanged(t, e) {
-    t !== e && this.updateState();
+  contentChanged(t, n) {
+    t !== n && this.updateState();
   }
-  statusChanged(t, e) {
-    t !== e && this.updateState();
+  statusChanged(t, n) {
+    t !== n && this.updateState();
   }
   // #endregion
   // #region Local Methods
@@ -116,7 +116,7 @@ const r =  t(class extends e {
     }, i("slot", null)));
   }
   render() {
-    return i(s, {
+    return i(a, {
       key: "7878622b0f2a455617e109b9aa32290bffc00a92",
       attribute: "navigation"
     }, this.renderMenuInner());
@@ -135,7 +135,7 @@ const r =  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}";
+    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}}}';
   }
 }, [ 257, "q2-example", {
   content: [ 1 ],
@@ -154,11 +154,11 @@ const r =  t(class extends e {
   } ]
 } ]);
 
-const c = r, defineCustomElement = function() {
+const d = s, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-example" ].forEach((t => {
-    if ("q2-example" === t) customElements.get(a(t)) || customElements.define(a(t), r);
+    if ("q2-example" === t) customElements.get(r(t)) || customElements.define(r(t), s);
   }));
 };
 
-export { c as Q2Example, defineCustomElement }
+export { d as Q2Example, defineCustomElement }

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

@@ -1,6 +1,6 @@
-import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as r, Fragment as o, transformTag as s } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as r, Fragment as o, transformTag as a } from "@stencil/core/internal/client";
 
-import { l as a, b as n } from "./index2.js";
+import { l as s, b as n } from "./index2.js";
 
 import { d as l } from "./q2-btn2.js";
 
@@ -12,9 +12,9 @@ import { d as p } from "./q2-link2.js";
 
 import { d as f } from "./q2-list2.js";
 
-import { d as h } from "./q2-loading2.js";
+import { d as m } from "./q2-loading2.js";
 
-const m =  t(class extends e {
+const h =  t(class extends e {
   constructor(t) {
     super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.tctChange = i(this, "tctChange", 7), 
     // #region Own Properties
@@ -90,13 +90,13 @@ const m =  t(class extends e {
         class: "label",
         htmlFor: "file-field",
         "test-id": "label"
-      }, this.label ? a(this.label) : this.hasLabelSlotContent ? r("slot", {
+      }, this.label ? s(this.label) : this.hasLabelSlotContent ? r("slot", {
         name: "label"
       }) : ""), this.hasDescription && r("div", {
         class: "description",
         id: "description",
         "test-id": "description"
-      }, this.description ? a(this.description) : this.hasDescriptionSlotContent ? r("slot", {
+      }, this.description ? s(this.description) : this.hasDescriptionSlotContent ? r("slot", {
         name: "description"
       }) : "")), "browse-drop" === this.variant && r("div", {
         class: this.dropZoneClasses,
@@ -110,19 +110,19 @@ const m =  t(class extends e {
         class: "loading"
       }), r("p", {
         class: "drop-zone-text"
-      }, a("tecton.element.filePicker.uploadingEllipsis"))) || r(o, null, r("q2-icon", {
+      }, s("tecton.element.filePicker.uploadingEllipsis"))) || r(o, null, r("q2-icon", {
         type: "upload"
       }), r("p", {
         class: "drop-zone-text"
       }, r("q2-link", {
         class: "browse-link",
-        label: a("tecton.element.filePicker.browse"),
+        label: s("tecton.element.filePicker.browse"),
         onTctClick: () => this.launchFileBrowser(),
         variant: "inline",
         "test-id": "browse-link",
         disabled: t,
         href: "javascript:void(0)"
-      }), a("tecton.element.filePicker.orDragFilesHere", [ this.maxFiles ])))) || r("div", {
+      }), s("tecton.element.filePicker.orDragFilesHere", [ this.maxFiles ])))) || r("div", {
         class: "browse",
         "test-id": "browse"
       }, r("q2-btn", {
@@ -134,7 +134,7 @@ const m =  t(class extends e {
         "test-id": "browse-button"
       }, r("q2-icon", {
         type: "paperclip"
-      }), r("span", null, a("tecton.element.filePicker.attachFiles", [ this.maxFiles ])))), r("input", {
+      }), r("span", null, s("tecton.element.filePicker.attachFiles", [ this.maxFiles ])))), r("input", {
         "aria-describedby": !this.description ? void 0 : "description",
         class: "sr",
         id: "file-field",
@@ -332,22 +332,22 @@ const m =  t(class extends e {
   getFileItemStatusMessage(t) {
     switch (t.status) {
      case "invalid-type":
-      return a("tecton.element.filePicker.unsupportedFileType");
+      return s("tecton.element.filePicker.unsupportedFileType");
 
      case "over-size-limit":
-      return a("tecton.element.filePicker.sizeExceedsLimit");
+      return s("tecton.element.filePicker.sizeExceedsLimit");
 
      case "over-max-files-limit":
-      return a("tecton.element.filePicker.overMaxFilesLimit");
+      return s("tecton.element.filePicker.overMaxFilesLimit");
 
      case "in-progress":
-      return a("tecton.element.filePicker.uploadingEllipsis");
+      return s("tecton.element.filePicker.uploadingEllipsis");
 
      case "failed":
-      return t.message ? a(t.message) : a("tecton.element.filePicker.uploadFailed");
+      return t.message ? s(t.message) : s("tecton.element.filePicker.uploadFailed");
 
      default:
-      return a("tecton.element.filePicker.fileSize", [ (t.file.size / 1e6).toFixed(2) ]);
+      return s("tecton.element.filePicker.fileSize", [ (t.file.size / 1e6).toFixed(2) ]);
     }
   }
   launchFileBrowser() {
@@ -364,7 +364,7 @@ const m =  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}*{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}@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, 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, 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, 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, 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, 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, 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, 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, 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{height:30px;width: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-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}';
   }
 }, [ 257, "q2-file-picker", {
   buttonSize: [ 513, "button-size" ],
@@ -387,36 +387,36 @@ const m =  t(class extends e {
   } ]
 } ]);
 
-const v = m, defineCustomElement = function() {
+const v = h, 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(s(t)) || customElements.define(s(t), m);
+      customElements.get(a(t)) || customElements.define(a(t), h);
       break;
 
      case "q2-btn":
-      customElements.get(s(t)) || l();
+      customElements.get(a(t)) || l();
       break;
 
      case "q2-icon":
-      customElements.get(s(t)) || c();
+      customElements.get(a(t)) || c();
       break;
 
      case "q2-item":
-      customElements.get(s(t)) || d();
+      customElements.get(a(t)) || d();
       break;
 
      case "q2-link":
-      customElements.get(s(t)) || p();
+      customElements.get(a(t)) || p();
       break;
 
      case "q2-list":
-      customElements.get(s(t)) || f();
+      customElements.get(a(t)) || f();
       break;
 
      case "q2-loading":
-      customElements.get(s(t)) || h();
+      customElements.get(a(t)) || m();
     }
   }));
 };

package/dist/components/q2-form.js

@@ -1,8 +1,8 @@
-import { proxyCustomElement as o, HTMLElement as n, h as t, transformTag as c } from "@stencil/core/internal/client";
+import { proxyCustomElement as t, HTMLElement as n, h as o, transformTag as a } from "@stencil/core/internal/client";
 
-const a =  o(class extends n {
-  constructor(o) {
-    super(), !1 !== o && this.__registerHost(), this.__attachShadow(), 
+const i =  t(class extends n {
+  constructor(t) {
+    super(), !1 !== t && this.__registerHost(), this.__attachShadow(), 
     // #region Public Property API
     /** Changes the vertical spacing of the form-fields contained within the component's slot */
     this.spacing = "normal";
@@ -10,25 +10,25 @@ const a =  o(class extends n {
   // #endregion
   // #region Render Methods
   render() {
-    return t("div", {
+    return o("div", {
       key: "b01b965b3fc436b4155245fa747e4c8922304114",
       class: "container"
-    }, t("slot", {
+    }, o("slot", {
       key: "039fd27f2a80825f14a6247eb330eac983638389"
     }));
   }
   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}:host([spacing=none]){--comp-spacing-none:var(--app-scale-0x, 0px);--comp-spacing:var(--tct-form-spacing-none, var(--comp-spacing-none))}:host([spacing=compact]){--comp-spacing-compact:var(--app-scale-3x, 15px);--comp-spacing:var(--tct-form-spacing-compact, var(--comp-spacing-compact))}:host(:not([spacing])),:host([spacing=normal]){--comp-spacing-normal:var(--app-scale-5x, 25px);--comp-spacing:var(--tct-form-spacing-normal, var(--comp-spacing-normal))}:host([spacing=comfortable]){--comp-spacing-comfortable:var(--app-scale-7x, 35px);--comp-spacing:var(--tct-form-spacing-comfortable, var(--comp-spacing-comfortable))}.container{--tct-input-margin:0;--tct-select-margin:0;--tct-calendar-margin:0;--tct-file-picker-margin:0;--tct-textarea-margin:0;--tct-checkbox-group-margin:0;--tct-radio-group-margin:0;display:flex;flex-direction:column;gap:var(--comp-spacing)}";
+    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([spacing=none]){--comp-spacing-none:var(--app-scale-0x, 0px);--comp-spacing:var(--tct-form-spacing-none, var(--comp-spacing-none))}:host([spacing=compact]){--comp-spacing-compact:var(--app-scale-3x, 15px);--comp-spacing:var(--tct-form-spacing-compact, var(--comp-spacing-compact))}:host(:not([spacing])),:host([spacing=normal]){--comp-spacing-normal:var(--app-scale-5x, 25px);--comp-spacing:var(--tct-form-spacing-normal, var(--comp-spacing-normal))}:host([spacing=comfortable]){--comp-spacing-comfortable:var(--app-scale-7x, 35px);--comp-spacing:var(--tct-form-spacing-comfortable, var(--comp-spacing-comfortable))}.container{--tct-input-margin:0;--tct-select-margin:0;--tct-calendar-margin:0;--tct-file-picker-margin:0;--tct-textarea-margin:0;--tct-checkbox-group-margin:0;--tct-radio-group-margin:0;display:flex;flex-direction:column;gap:var(--comp-spacing)}';
   }
 }, [ 257, "q2-form", {
   spacing: [ 513 ]
 } ]);
 
-const i = a, defineCustomElement = function() {
+const e = i, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
-  [ "q2-form" ].forEach((o => {
-    if ("q2-form" === o) customElements.get(c(o)) || customElements.define(c(o), a);
+  [ "q2-form" ].forEach((t => {
+    if ("q2-form" === t) customElements.get(a(t)) || customElements.define(a(t), i);
   }));
 };
 
-export { i as Q2Form, defineCustomElement }
+export { e as Q2Form, defineCustomElement }