q2-tecton-elements 1.69.1 → 1.70.0

package/dist/components/q2-surface.js

@@ -0,0 +1,109 @@
+import { proxyCustomElement as r, HTMLElement as a, createEvent as e, h as o, Host as t, transformTag as c } from "@stencil/core/internal/client";
+
+const s =  r(class extends a {
+  constructor(r) {
+    super(), !1 !== r && this.__registerHost(), this.__attachShadow(), this.tctClick = e(this, "tctClick", 7), 
+    // #region Own Properties
+    this._cancelAnimation = null, 
+    /** Applies a gradient fade across the background.
+         *
+         * @info Direction and colors are customizable via CSS custom properties. */
+    this.backgroundGradient = !1, 
+    /**
+         * Renders the border as a gradient using the color set by the `border` prop. Takes precedence over a solid `border` when both are set.
+         *
+         * @info Requires `border` to be set to produce a colored gradient. Without `border`, falls back to the default border color.
+         */
+    this.borderGradient = !1, 
+    /** Makes the surface interactive, responding to clicks.
+         *
+         * @info Emits `tctClick` when clicked. */
+    this.clickable = !1, 
+    /** Gives the component a drop shadow.
+         *
+         * @info 0 means no shadow; higher values appear more elevated. */
+    this.elevation = 0, 
+    /** Adds internal padding applied uniformly on all sides.
+         *
+         * @info Individual axes can be overridden with `inset-x` and `inset-y`. */
+    this.inset = "none", 
+    /** Adds corner rounding on a scale from 0 (sharp) to 5 (most rounded). */
+    this.radius = 0;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  disconnectedCallback() {
+    var r;
+    null === (r = this._cancelAnimation) || void 0 === r || r.call(this);
+  }
+  // #endregion
+  // #region Listeners
+  onClick() {
+    this.clickable && this.tctClick.emit();
+  }
+  onKeydown(r) {
+    this.clickable && ("Enter" !== r.key && " " !== r.key || (r.preventDefault(), this.tctClick.emit()));
+  }
+  // #endregion
+  // #region Public Methods API
+  /**
+     * Triggers a named animation on the surface. If an animation is already running, cancels it before starting the new one.
+     * @param animation The animation to play. Defaults to `'pulse'`.
+     * @returns A Promise that resolves when the animation finishes or is cancelled.
+     */
+  async animate(r = "pulse") {
+    var a;
+    return null === (a = this._cancelAnimation) || void 0 === a || a.call(this), new Promise((a => {
+      const e = "q2-surface-animate-" + r, onEnd = () => {
+        this.hostElement.classList.remove(e), this._cancelAnimation = null, a();
+      };
+      this._cancelAnimation = () => {
+        this.hostElement.classList.remove(e), this.hostElement.removeEventListener("animationend", onEnd), 
+        this._cancelAnimation = null, a();
+      }, this.hostElement.classList.add(e), this.hostElement.addEventListener("animationend", onEnd, {
+        once: !0
+      });
+    }));
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    return o(t, {
+      key: "235f94ccfb0eb7167079e8e25ee78d652999f8e8"
+    }, o("div", {
+      key: "b01d6e71bb4b8f1f583c63910d4b1eca757572dd",
+      class: "container",
+      role: this.clickable ? "button" : void 0,
+      tabIndex: this.clickable ? 0 : void 0
+    }, o("slot", {
+      key: "591dc9fcb51d6f238a6186f047661020be9ea800"
+    })));
+  }
+  get hostElement() {
+    return this;
+  }
+  static get style() {
+    return ':host{--comp-surface-bg:transparent;--comp-surface-hover-background:var(--tct-surface-hover-background, var(--t-base-hover, #f2f2f2));--comp-surface-border-color:var(--tct-surface-border-color, var(--t-gray-12, #d9d9d9));--comp-surface-animation-duration:var(--tct-surface-animation-duration, 1s);--comp-surface-gradient-direction:var(--tct-surface-background-gradient-direction, to right bottom);--comp-surface-radius:0px}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none}::-moz-focus-inner{border:none}:host{display:block;transition:box-shadow var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), border-radius var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), background var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), padding var(--tct-surface-tween, var(--app-tween-1, 0.2s ease))}.container{display:block;background:transparent;border-radius:var(--comp-surface-radius);transition:background var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), border-radius var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), box-shadow var(--tct-surface-tween, var(--app-tween-1, 0.2s ease))}:host([elevation="1"]){box-shadow:var(--tct-surface-elevation-1-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}:host([elevation="2"]){box-shadow:var(--tct-surface-elevation-2-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}:host([elevation="3"]){box-shadow:var(--tct-surface-elevation-3-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}:host([elevation="4"]){box-shadow:var(--tct-surface-elevation-4-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}:host([elevation="5"]){box-shadow:var(--tct-surface-elevation-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}:host([radius="1"]){--comp-surface-radius:var(--tct-surface-border-radius-1, var(--app-border-radius-1, 4px));border-radius:var(--comp-surface-radius)}:host([radius="2"]){--comp-surface-radius:var(--tct-surface-border-radius-2, var(--app-border-radius-2, 8px));border-radius:var(--comp-surface-radius)}:host([radius="3"]){--comp-surface-radius:var(--tct-surface-border-radius-3, var(--app-border-radius-3, 12px));border-radius:var(--comp-surface-radius)}:host([radius="4"]){--comp-surface-radius:var(--tct-surface-border-radius-4, var(--app-border-radius-4, 16px));border-radius:var(--comp-surface-radius)}:host([radius="5"]){--comp-surface-radius:var(--tct-surface-border-radius-5, var(--app-border-radius-5, 24px));border-radius:var(--comp-surface-radius)}:host([background=default]){--comp-surface-bg:var(--tct-surface-background-default, var(--t-base, #ffffff));--comp-surface-hover-background:var(--tct-surface-hover-background, var(--t-base-hover, #f2f2f2))}:host([background=primary]){--comp-surface-bg:var(--tct-surface-background-primary, var(--t-primary, #6a4a9e));--comp-surface-hover-background:var(--tct-surface-primary-hover-background, var(--t-primary-l2, #7d5ab8));color:var(--tct-surface-primary-font-color, var(--t-primary-text, #ffffff))}:host([background=secondary]){--comp-surface-bg:var(--tct-surface-background-secondary, var(--t-secondary, #b3c2cc));--comp-surface-hover-background:var(--tct-surface-secondary-hover-background, var(--t-secondary-l2, #c2cfd8));color:var(--tct-surface-secondary-font-color, var(--t-secondary-text, #1a1a1a))}:host([background=tertiary]){--comp-surface-bg:var(--tct-surface-background-tertiary, var(--t-tertiary, #e8f5fc));--comp-surface-hover-background:var(--tct-surface-tertiary-hover-background, var(--t-tertiary-l2, #edf7fd));color:var(--tct-surface-tertiary-font-color, var(--t-tertiary-text, #1a1a1a))}:host([background]) .container{background:var(--comp-surface-bg)}:host([background-gradient]) .container{background:linear-gradient(in oklch var(--comp-surface-gradient-direction), color-mix(in oklab, var(--comp-surface-bg), white 40%), var(--comp-surface-bg))}:host([border]) .container{border:1px solid var(--comp-surface-border-color)}:host([border=primary]) .container{border-color:var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e))}:host([border=secondary]) .container{border-color:var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc))}:host([border=tertiary]) .container{border-color:var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc))}:host([border-gradient]){padding:2px}:host([border-gradient]) .container{border-radius:calc(var(--comp-surface-radius) - 2px)}:host([border-gradient])[border] .container{border:none}:host([border-gradient]:not([background])){--comp-surface-bg:var(--tct-surface-background-default, var(--t-base, #ffffff))}:host([border-gradient]:not([background])) .container{background:var(--comp-surface-bg)}:host([border-gradient]:not([border])),:host([border-gradient][border=default]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-border-color, var(--t-gray-12, #d9d9d9)), white 40%), var(--tct-surface-border-color, var(--t-gray-12, #d9d9d9)))}:host([border-gradient][border=primary]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e)), white 40%), var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e)))}:host([border-gradient][border=secondary]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc)), white 40%), var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc)))}:host([border-gradient][border=tertiary]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc)), white 40%), var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc)))}:host([inset=compact]) .container{padding:var(--tct-surface-inset-compact, var(--app-scale-1x, 5px))}:host([inset=normal]) .container{padding:var(--tct-surface-inset-normal, var(--app-scale-3x, 15px))}:host([inset=comfortable]) .container{padding:var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px))}:host([inset-x=none]) .container{padding-inline:0}:host([inset-x=compact]) .container{padding-inline:var(--tct-surface-inset-compact, var(--app-scale-1x, 5px))}:host([inset-x=normal]) .container{padding-inline:var(--tct-surface-inset-normal, var(--app-scale-3x, 15px))}:host([inset-x=comfortable]) .container{padding-inline:var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px))}:host([inset-y=none]) .container{padding-block:0}:host([inset-y=compact]) .container{padding-block:var(--tct-surface-inset-compact, var(--app-scale-1x, 5px))}:host([inset-y=normal]) .container{padding-block:var(--tct-surface-inset-normal, var(--app-scale-3x, 15px))}:host([inset-y=comfortable]) .container{padding-block:var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px))}:host([clickable]){cursor:pointer}:host([clickable]):hover .container{background:var(--comp-surface-hover-background)}:host([clickable])[elevation="0"]:hover .container,:host([clickable]):not([elevation]):hover .container{box-shadow:var(--tct-surface-elevation-hover-0-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="1"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-1-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="2"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-2-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="3"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-3-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="4"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-4-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="5"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}:host([clickable]) .container:focus-visible{outline:none;box-shadow:var(--tct-surface-focus-visible-box-shadow, var(--const-double-focus-ring, 0 0 0 2px var(--t-base), 0 0 0 4px var(--const-focus-color), 0 0 0 6px var(--t-base)))}@keyframes q2-surface-bounce{from,20%,53%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0)}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0) scaleY(1.1)}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0) scaleY(0.95)}90%{transform:translate3d(0, -4px, 0) scaleY(1.02)}}@keyframes q2-surface-flash{from,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes q2-surface-pulse{from{transform:scale3d(1, 1, 1)}50%{transform:scale3d(1.05, 1.05, 1.05)}to{transform:scale3d(1, 1, 1)}}@keyframes q2-surface-tada{from{transform:scale3d(1, 1, 1)}10%,20%{transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -1deg)}30%,50%,70%,90%{transform:scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 1deg)}40%,60%,80%{transform:scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -1deg)}to{transform:scale3d(1, 1, 1)}}:host(.q2-surface-animate-bounce){animation:q2-surface-bounce var(--comp-surface-animation-duration) both;transform-origin:center bottom}:host(.q2-surface-animate-flash){animation:q2-surface-flash var(--comp-surface-animation-duration) both}:host(.q2-surface-animate-pulse){animation:q2-surface-pulse var(--comp-surface-animation-duration) both}:host(.q2-surface-animate-tada){animation:q2-surface-tada var(--comp-surface-animation-duration) both}';
+  }
+}, [ 257, "q2-surface", {
+  background: [ 513 ],
+  backgroundGradient: [ 516, "background-gradient" ],
+  border: [ 513 ],
+  borderGradient: [ 516, "border-gradient" ],
+  clickable: [ 516 ],
+  elevation: [ 514 ],
+  inset: [ 513 ],
+  insetX: [ 513, "inset-x" ],
+  insetY: [ 513, "inset-y" ],
+  radius: [ 514 ],
+  animate: [ 64 ]
+}, [ [ 0, "click", "onClick" ], [ 0, "keydown", "onKeydown" ] ] ]);
+
+const n = s, defineCustomElement = function() {
+  if ("undefined" == typeof customElements) return;
+  [ "q2-surface" ].forEach((r => {
+    if ("q2-surface" === r) customElements.get(c(r)) || customElements.define(c(r), s);
+  }));
+};
+
+export { n as Q2Surface, defineCustomElement }

package/dist/components/q2-tab-container.js

@@ -235,49 +235,49 @@ const f =  t(class extends a {
   }
   render() {
     return i(r, {
-      key: "0a0a2058f1c949d0dd724439274115e64d2c7dd4"
+      key: "cfaf872008ad8687316955a725e7475d326b5ec2"
     }, i("div", {
-      key: "1f9fb82b2777198077a11470eb36fc8440377e24",
+      key: "8a61a84ecd4d1869fe53829ca908e99ec80b11be",
       class: "tab-container"
     }, this.scrollEnabled && i(r, {
-      key: "570d2fc54ee847f0b59f237ea299aacd71ce6c30"
+      key: "a77950455f6f6f9138d1174fa4db38bcde498cb5"
     }, i("div", {
-      key: "660b94c04439955c8a074155dc58219be6078e8c",
+      key: "b195f6a34a9ed2ecbdf1bacd2d51a76f0861574e",
       class: "gradient-left",
       hidden: !this.showScrollLeft
     }), i("div", {
-      key: "cf7234df25acc428a7484dfc7bb0332a67378c31",
+      key: "f625095c68ad1bedd07d34149d28c27f12b2954d",
       class: "gradient-right",
       hidden: !this.showScrollRight
     }), i("q2-btn", {
-      key: "606062d6fd19dfcc4be88221c41958fbf03e11d1",
+      key: "96c26c6447708d2fcf102e53e984f9a71bc2d9b1",
       class: "btn-left",
       hidden: !this.showScrollLeft,
       onTctClick: () => this.onScrollBtnClick("left")
     }, i("q2-icon", {
-      key: "83ea86a0ceb25a38006399c577b8e450d8b15154",
+      key: "feec85bd6bbbfeb99c520b6118c90190130d8dca",
       type: "chevron-left",
       label: "scroll left"
     })), i("q2-btn", {
-      key: "5c8e4cd5777ddafc2b3dafcf288d636df29a5bfb",
+      key: "8dc406d9e144e0d025e14d8a2e30f6010febafd6",
       class: "btn-right",
       hidden: !this.showScrollRight,
       onTctClick: () => this.onScrollBtnClick("right")
     }, i("q2-icon", {
-      key: "a452c64a7293ee46d0a9ef8239082f965f50d42e",
+      key: "3a35b2d74d9f62f3934b667b2ceacf0e31ffb6f4",
       type: "chevron-right",
       label: "scroll right"
     }))), i("ul", {
-      key: "885b13b8f0d2c87ae27bb4802fbb5209dbb1663a",
+      key: "8ba591207287d3aa2d20e70ec72c03a755879ab0",
       onScroll: this.checkScrollState,
       ref: t => this.listElement = t,
       class: this.noPrint ? "no-print" : null,
       role: "tablist"
     }, this.tabs.map(((t, a) => this.renderTab(t, a))))), i("div", {
-      key: "eedebff87dc19e82bf8e192906642265ca27e030",
+      key: "83ab595967887ca3d2a584f85519f23e101d02ff",
       class: "tab-content"
     }, i("slot", {
-      key: "e8eff4ef323a8330bad4f14f2843d094d9ead6e2",
+      key: "6458a9e54b310f85129497478757111501fcb06f",
       onSlotchange: () => this.onSlotChange()
     })));
   }

package/dist/components/q2-tab-pane.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement as e, HTMLElement as t, createEvent as n, h as a, transformTag as i } from "@stencil/core/internal/client";
+import { proxyCustomElement as e, HTMLElement as t, createEvent as n, h as i, transformTag as a } from "@stencil/core/internal/client";
 
 import { b as o } from "./component.js";
 
@@ -19,16 +19,16 @@ const s =  e(class extends t {
   // #endregion
   // #region Render Methods
   render() {
-    return a("div", {
-      key: "f8b0c0d0b8dba3f96c30b96e215a7224b577604a",
+    return i("div", {
+      key: "19abb08e46c23ce0be03d7d07a1bbe4c22e99786",
       id: `tab-pane-${this.guid}-${this.index}`,
       class: "tab-pane" + (this.selected ? "" : " hidden"),
       role: "tabpanel",
       tabindex: "-1",
       "aria-hidden": "" + !this.selected,
       "aria-labelledby": `tab-${this.guid}-${this.index}`
-    }, a("slot", {
-      key: "2472e51b0a1e78652fc8a1fd99d001802297aa14"
+    }, i("slot", {
+      key: "42a7a3ac8fe64661ba2027c0c967fcfe3b4d20e7"
     }));
   }
   get hostElement() {
@@ -82,7 +82,7 @@ const s =  e(class extends t {
 const r = s, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-tab-pane" ].forEach((e => {
-    if ("q2-tab-pane" === e) customElements.get(i(e)) || customElements.define(i(e), s);
+    if ("q2-tab-pane" === e) customElements.get(a(e)) || customElements.define(a(e), s);
   }));
 };
 

package/dist/components/q2-tag2.js

@@ -151,9 +151,9 @@ const f =  t(class extends o {
     this.optionCount && o.push("has-options");
     const e = this.optionCount > 0;
     return i(r, {
-      key: "b00f91a2d3932e444521adfa7444d12449805ce2"
+      key: "8bf6d92e2f691ae8efeb0b1f24b460d193c069f1"
     }, i("click-elsewhere", {
-      key: "a08d98db59a6985936e4a2221e8b131f2372b1ac",
+      key: "9c6d2c96a64528a7831f5f1f019e81f5092b1347",
       onChange: this.onClickElsewhere
     }, e ? i(a, null, i("button", {
       class: "tag-wrapper",
@@ -180,7 +180,7 @@ const f =  t(class extends o {
     }, i("slot", {
       name: "decorator"
     }), p(this.label))), e && i("q2-popover", {
-      key: "99faf2982c1387840d14ddd014a1a3476e4d8062",
+      key: "2df0c2c782ec0908fe95f4c824fa4230beeb2e6d",
       ref: t => this.popoverElement = t,
       controlElement: this.dropdownBtn,
       open: this.open,
@@ -189,7 +189,7 @@ const f =  t(class extends o {
       direction: this.popoverDirection,
       align: this.popoverAlignment
     }, i("q2-option-list", {
-      key: "c1fcbef6fc557561b2962609031acc4cb672f2ad",
+      key: "8423b3877e1750ee12f5162b7fd2eb43a9552002",
       id: "option-list",
       ref: t => this.optionList = t,
       onChange: this.handleChange,
@@ -198,7 +198,7 @@ const f =  t(class extends o {
       label: p("tecton.element.optionList.label", [ this.optionListLabel ]),
       "no-select": !0
     }, i("slot", {
-      key: "233b7959dffa0e50760f631b1a26853cc3c3f78d"
+      key: "66ba933485bb28a9d140018c7ce6ce02e31ea668"
     })))));
   }
   get hostElement() {

package/dist/components/tecton-tab-pane.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement as e, HTMLElement as t, createEvent as i, h as n, transformTag as s } from "@stencil/core/internal/client";
 
-const o =  e(class extends t {
+const a =  e(class extends t {
   constructor(e) {
     super(), !1 !== e && this.__registerHost(), this.__attachShadow(), this.badge = i(this, "badge", 7), 
     this.onIFrameLoad = e => {
@@ -41,7 +41,7 @@ const o =  e(class extends t {
   // #region Render Methods
   render() {
     return n("div", {
-      key: "32e632700f2b0f8d9eb7695befdda6109eab1698",
+      key: "6fd41d78c9d8a6e1abf28713f52d92ac214ad8ab",
       id: `tab-pane-${this.guid}-${this.index}`,
       class: "tab-pane" + (this.selected ? "" : " hidden"),
       role: "tabpanel",
@@ -49,12 +49,12 @@ const o =  e(class extends t {
       "aria-hidden": "" + !this.selected,
       "aria-labelledby": `tab-${this.guid}-${this.index}`
     }, this.selected && void 0 !== this.provided && !this.provided && n("div", {
-      key: "b3316dc9858fb1a80607c23f6e4a0fedf8832a4c"
+      key: "b5302bdd5ae8e749e84e4e12505d843c0ba0950a"
     }, n("slot", {
-      key: "043cd3f3e844b8e5d75236272a3dc96157114fc7",
+      key: "4b935505187b21260398c28ea876ecd64d9ed172",
       name: "loading-wrapper"
     }), n("iframe", {
-      key: "8982ee311c758e568ef3e8e7c1ea8531c3597663",
+      key: "c18b96c8849a6a69abec9ced6d27a6860113b8c7",
       hidden: !0,
       name: this.moduleId,
       scrolling: "no",
@@ -77,11 +77,11 @@ const o =  e(class extends t {
       value: e.value,
       name: e.key
     })))) : ""), n("div", {
-      key: "66b671d6c2af2d3bb33b4ad305022977d5a05024",
+      key: "1016d617dc6cf49aa8e4bf52010e3cf246191875",
       class: "slot-wrapper",
       hidden: this.selected && void 0 !== this.provided && !this.provided
     }, n("slot", {
-      key: "ba8567cf02ff9bb3f01c2406fd718df3ed770926"
+      key: "466d820db179e1b6e350722eff9ec9190be6c869"
     })));
   }
   get hostElement() {
@@ -145,11 +145,11 @@ const o =  e(class extends t {
   } ]
 } ]);
 
-const a = o, defineCustomElement = function() {
+const o = a, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "tecton-tab-pane" ].forEach((e => {
-    if ("tecton-tab-pane" === e) customElements.get(s(e)) || customElements.define(s(e), o);
+    if ("tecton-tab-pane" === e) customElements.get(s(e)) || customElements.define(s(e), a);
   }));
 };
 
-export { a as TectonTabPane, defineCustomElement }
+export { o as TectonTabPane, defineCustomElement }

package/dist/esm/click-elsewhere_3.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-Cqkz7Bnm.js';
 import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
 import { b as hasValidAncestor } from './component-DaQM9u3s.js';
-import { l as loc, n as nextPaint, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, v as isVisible, q as handleDeprecationWarning, x as isInFixedPositionContext, y as isInScrollableContainer, g as isMobile } from './index-Bx4m6N0g.js';
+import { l as loc, n as nextPaint, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, v as isVisible, q as handleDeprecationWarning, x as isInFixedPositionContext, y as isInScrollableContainer, g as isMobile } from './index-Cps4jSQM.js';
 
 const ClickElsewhere = class {
     constructor(hostRef) {
@@ -693,7 +693,7 @@ const Q2OptionList = class {
 };
 Q2OptionList.style = q2OptionListCss();
 
-const q2PopoverCss = () => `*{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}.legacy.container{display:none}.legacy.show{display:block;z-index:var(--tct-popover-z-index, 50)}@keyframes popoverOpen{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes popoverClose{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}:popover-open,.show{position:var(--comp-pop-position, absolute);margin:0;padding:var(--tct-popover-padding, 0);overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));backdrop-filter:var(--tct-popover-backdrop-filter, none);color:var(--tct-popover-font-color, var(--t-text, #4d4d4d));min-width:var(--tct-popover-min-width, 135px);width:var(--tct-popover-width, auto);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:popover-open.animating-open,.show.animating-open{animation-name:popoverOpen;animation-duration:var(--tct-popover-open-animation-duration, var(--t-tween-time-in-1, 150ms));animation-timing-function:var(--tct-popover-open-animation-timing-function, ease-out);animation-fill-mode:var(--tct-popover-open-animation-fill-mode, forwards)}:popover-open.animating-close,.show.animating-close{animation-name:popoverClose;animation-duration:var(--tct-popover-close-animation-duration, var(--t-tween-time-out-1, 100ms));animation-timing-function:var(--tct-popover-close-animation-timing-function, ease-in);animation-fill-mode:var(--tct-popover-close-animation-fill-mode, forwards)}@media (prefers-reduced-motion: reduce){:popover-open.animating-open,:popover-open.animating-close,.show.animating-open,.show.animating-close{animation:none}}:popover-open.block,.show.block{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:popover-open.left,.show.left{left:var(--comp-pop-left);right:unset}:popover-open.right,.show.right{right:var(--comp-pop-right);left:unset}:popover-open.down,.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}:popover-open.up,.show.up{top:unset;bottom:var(--comp-pop-bottom)}:popover-open.down.left:not(.mobile),.show.down.left:not(.mobile){transform-origin:top left}:popover-open.down.right:not(.mobile),.show.down.right:not(.mobile){transform-origin:top right}:popover-open.up.left:not(.mobile),.show.up.left:not(.mobile){transform-origin:bottom left}:popover-open.up.right:not(.mobile),.show.up.right:not(.mobile){transform-origin:bottom right}:popover-open.mobile.down,.show.mobile.down{transform-origin:center top}:popover-open.mobile.up,.show.mobile.up{transform-origin:center bottom}:popover-open::-webkit-scrollbar,.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}:popover-open::-webkit-scrollbar-thumb,.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}:popover-open::-webkit-scrollbar-track,.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}`;
+const q2PopoverCss = () => `*{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}.legacy.container{display:none}.legacy.show{display:block;z-index:var(--tct-popover-z-index, 50)}@keyframes popoverOpen{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes popoverClose{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}:popover-open,.show{position:var(--comp-pop-position, absolute);margin:0;padding:var(--tct-popover-padding, 0);overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));backdrop-filter:var(--tct-popover-backdrop-filter, none);color:var(--tct-popover-font-color, inherit);min-width:var(--tct-popover-min-width, 135px);width:var(--tct-popover-width, auto);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:popover-open.animating-open,.show.animating-open{animation-name:popoverOpen;animation-duration:var(--tct-popover-open-animation-duration, var(--t-tween-time-in-1, 150ms));animation-timing-function:var(--tct-popover-open-animation-timing-function, ease-out);animation-fill-mode:var(--tct-popover-open-animation-fill-mode, forwards)}:popover-open.animating-close,.show.animating-close{animation-name:popoverClose;animation-duration:var(--tct-popover-close-animation-duration, var(--t-tween-time-out-1, 100ms));animation-timing-function:var(--tct-popover-close-animation-timing-function, ease-in);animation-fill-mode:var(--tct-popover-close-animation-fill-mode, forwards)}@media (prefers-reduced-motion: reduce){:popover-open.animating-open,:popover-open.animating-close,.show.animating-open,.show.animating-close{animation:none}}:popover-open.block,.show.block{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:popover-open.left,.show.left{left:var(--comp-pop-left);right:unset}:popover-open.right,.show.right{right:var(--comp-pop-right);left:unset}:popover-open.down,.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}:popover-open.up,.show.up{top:unset;bottom:var(--comp-pop-bottom)}:popover-open.down.left:not(.mobile),.show.down.left:not(.mobile){transform-origin:top left}:popover-open.down.right:not(.mobile),.show.down.right:not(.mobile){transform-origin:top right}:popover-open.up.left:not(.mobile),.show.up.left:not(.mobile){transform-origin:bottom left}:popover-open.up.right:not(.mobile),.show.up.right:not(.mobile){transform-origin:bottom right}:popover-open.mobile.down,.show.mobile.down{transform-origin:center top}:popover-open.mobile.up,.show.mobile.up{transform-origin:center bottom}:popover-open::-webkit-scrollbar,.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}:popover-open::-webkit-scrollbar-thumb,.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}:popover-open::-webkit-scrollbar-track,.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}`;
 
 const Q2Popover = class {
     constructor(hostRef) {

package/dist/esm/{index-Bx4m6N0g.js → index-Cps4jSQM.js}

@@ -99,14 +99,14 @@ function isVisible(element) {
 function waitForNextPaint() {
     return new Promise(resolve => nextPaint(resolve));
 }
-function loc(key, subs) {
+function loc(key, subs, options) {
     var _a, _b, _c;
     if (!key)
         return '';
     if (((_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.noStrings) === true) {
         return key;
     }
-    return (_c = (_b = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _b === void 0 ? void 0 : _b.loc(key, subs)) !== null && _c !== void 0 ? _c : key;
+    return (_c = (_b = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _b === void 0 ? void 0 : _b.loc(key, subs, options)) !== null && _c !== void 0 ? _c : key;
 }
 /**
  * Returns browser name, version, platform, and context (browser vs app WebView).