q2-tecton-elements 1.55.4 → 1.56.0

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

@@ -1,6 +1,6 @@
 import { r as t, c as r, h as a, F as e, g as o } from "./index-7a5365e2.js";
 
-import { p as i, c as n, s, o as c, i as l, l as h, r as d, f as v } from "./index-f2a66217.js";
+import { p as i, c as n, s, o as c, i as l, l as h, r as d, f as v } from "./index-c215e8ef.js";
 
 const x = "*{box-sizing:border-box}*:active{outline:none}*:focus{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{--comp-default-textarea-margin:var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-textarea-margin, var(--comp-default-textarea-margin));font-size:var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}label{--comp-label-padding:var(--tct-textarea-label-padding, 0 var(--tct-textarea-label-padding-right, var(--t-textarea-label-padding-right, 0)) 0 var(--tct-textarea-label-padding-left, var(--t-textarea-label-padding-left, 0)));--comp-label-margin:var(--tct-textarea-label-margin, var(--tct-textarea-label-margin-top, var(--t-textarea-label-margin-top, 0)) 0 var(--tct-textarea-label-margin-bottom, var(--t-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));display:block;padding:var(--comp-label-padding);margin:var(--comp-label-margin);color:var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit));font-size:var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit));font-weight:var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600));text-transform:var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none));letter-spacing:var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal));transition:color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.has-error label{color:var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)))}:hover label{color:var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)))}.has-error :hover label{color:var(--tct-textarea-error-hover-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, inherit)))))}:host(:focus-within) label{color:var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)))}:host(:focus-within) .has-error label{color:var(--tct-textarea-error-focus-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit))))))}.optional-tag{--comp-label-optional-margin:var(--tct-textarea-label-optional-margin, 0 0 0 var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);color:var(--tct-textarea-label-optional-font-color, var(--t-textarea-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-textarea-label-optional-font-size, var(--t-textarea-label-optional-font-size, 12px));font-weight:var(--tct-textarea-label-optional-font-weight, var(--t-textarea-label-optional-font-weight, 400))}.input-container{min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));height:100%;--comp-default-border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 4px));--comp-textarea-border-top-left-radius:var(--tct-textarea-border-top-left-radius, var(--t-textarea-border-top-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-top-right-radius:var(--tct-textarea-border-top-right-radius, var(--t-textarea-border-top-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-right-radius:var(--tct-textarea-border-bottom-right-radius, var(--t-textarea-border-bottom-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-left-radius:var(--tct-textarea-border-bottom-left-radius, var(--t-textarea-border-bottom-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-radius:var(--comp-textarea-border-top-left-radius)\n      var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n      var(--comp-textarea-border-bottom-left-radius);--comp-textarea-border-width:var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) var(--tct-textarea-border-right-width, var(--t-textarea-border-right-width, 1px)) var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) var(--tct-textarea-border-left-width, var(--t-textarea-border-left-width, 1px));--comp-textarea-icon-clearance:34px}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(--tct-textarea-disabled-opacity, var(--t-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}.content-container{--comp-textarea-min-height:46px;--comp-textarea-min-width:150px;position:relative;display:inline-block;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));min-width:var(--tct-textarea-min-width, var(--t-textarea-min-width, var(--comp-textarea-min-width)))}:host(:not([cols])) .content-container{width:100%}textarea{--comp-textarea-padding:var(--tct-textarea-padding, var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))) var(--tct-textarea-horizontal-padding, var(--t-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))));--comp-textarea-border-color:var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #949494)))));--comp-textarea-background:var(--tct-textarea-background, var(--tct-textarea-bg, var(--t-textarea-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)))))));--comp-textarea-hover-ring-color:var(--tct-textarea-hover-ring-color);--comp-textarea-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color), var(--tct-textarea-hover-box-shadow, 0 0 transparent);resize:none;height:100%;-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));padding:var(--comp-textarea-padding);background:var(--comp-textarea-background);color:var(--tct-textarea-font-color, var(--t-textarea-font-color, var(--t-input-font-color, inherit)));border-width:var(--comp-textarea-border-width);border-style:solid;border-color:var(--comp-textarea-border-color);border-radius:var(--comp-textarea-border-radius);box-shadow:var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none));scrollbar-width:thin;scrollbar-color:var(--t-a11y-gray-color) transparent;--comp-textarea-tween:var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));transition:border-width var(--comp-textarea-tween), border-color var(--comp-textarea-tween), box-shadow var(--comp-textarea-tween)}textarea::-webkit-scrollbar{width:var(--app-scale-1x);height:var(--app-scale-1x);margin:var(--app-scale-1x)}textarea::-webkit-scrollbar-thumb{background:var(--t-a11y-gray-color);border-radius:2px}textarea::-webkit-scrollbar-track{background:transparent}textarea:not([cols]){width:100%}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance);border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-textarea-error-background, var(--comp-textarea-background))}textarea:hover{border-color:var(--tct-textarea-hover-border-color, var(--comp-textarea-border-color));background:var(--tct-textarea-hover-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))}.has-error textarea:hover{border-color:var(--tct-textarea-error-hover-border-color, var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a))));background:var(--tct-textarea-error-hover-background, var(--tct-textarea-error-background, var(--comp-textarea-background)));box-shadow:var(--tct-textarea-error-hover-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))))}textarea:focus{border-color:var(--tct-textarea-focus-border-color, var(--comp-textarea-border-color));background:var(--tct-textarea-focus-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))}.has-error textarea:focus{border-color:var(--tct-textarea-error-focus-border-color, var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-textarea-error-focus-background, var(--tct-textarea-error-background, var(--tct-textarea-focus-background, var(--comp-textarea-background))));box-shadow:var(--tct-textarea-error-focus-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))))}textarea::placeholder{color:var(--tct-textarea-placeholder-font-color, var(--t-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))))}textarea[disabled]{cursor:not-allowed}textarea.resize-vertical-auto{overflow:hidden}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance)}.has-error textarea:not(:focus){border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)))}q2-icon{margin-top:calc(var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) / 2);pointer-events:none;position:absolute;top:var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));color:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))));right:0;margin-right:var(--tct-scale-2x, var(--app-scale-2x, 10px));--tct-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));--t-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))))}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));box-shadow:var(--tct-textarea-message-box-shadow, var(--t-textarea-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))));transition:height var(--tct-textarea-messages-tween, var(--t-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:2px;z-index:1;position:absolute;width:100%;color:var(--tct-textarea-messages-font-color, var(--t-textarea-messages-font-color, inherit))}.max-length{color:var(--tct-textarea-max-length-color, var(--t-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));position:absolute;right:0}.btn-resize{--tct-textarea-resize-icon-padding:calc(\n      calc(\n              var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px))) - var(--tct-textarea-resize-icon-size, var(--t-textarea-resize-icon-size, 12px))\n          ) / 2\n  );width:var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)));height:var(--tct-textarea-resize-btn-height, var(--t-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px)));background:var(--tct-textarea-resize-btn-background, var(--t-textarea-resize-btn-background, transparent));stroke:var(--tct-textarea-resize-color, var(--t-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77))));border:0;position:absolute;right:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);bottom:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);display:block;padding:var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding));font-size:0}.btn-resize:focus{outline:none;box-shadow:none}:host([resize=both]) .btn-resize{cursor:se-resize}:host([resize=vertical]) .btn-resize,:host([resize=vertical-auto]) .btn-resize{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";
 
@@ -335,10 +335,10 @@ const b = class {
   }
   render() {
     return a("div", {
-      key: "ece9138953ebdde47af2559b2f10c3edc8b73c91",
+      key: "24944e7a64be5e41535529dc71f77fe8d8f54afa",
       class: this.wrapperClasses
     }, v(this), a("div", {
-      key: "34c8ce254d131b4c0aefa5ff772c00e0d4b495b6",
+      key: "38f636261e7e5da472f3137a78202c1c6a3469c0",
       class: "content-container",
       ref: t => this.contentContainer = t
     }, this.renderInput(), this.maxlength ? this.renderMaxLength() : "", d(this)));

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

@@ -1,6 +1,6 @@
 import { r as t, h as o, g as i } from "./index-7a5365e2.js";
 
-import { o as e, i as a } from "./index-f2a66217.js";
+import { o as e, i as a } from "./index-c215e8ef.js";
 
 const r = '*{box-sizing:border-box}*:active{outline:none}*:focus{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}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background, var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.8509803922)))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}:host([immediate]:not([immediate=false])) .tooltip:hover{--comp-delay:0s}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:"";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 4px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay)}:host([block]) .tooltip{display:block}.tooltip:hover:before,.tooltip:hover:after,.tooltip.has-keyboard-focus:focus-within:before,.tooltip.has-keyboard-focus:focus-within:after,:host([persistent]:not([persistent=false])) .tooltip:before,:host([persistent]:not([persistent=false])) .tooltip:after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset)}:host([position=sw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(50%)}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}';
 

package/dist/q2-tecton-elements/tecton-tab-pane.entry.js

@@ -71,7 +71,7 @@ const a = class {
   // #region Render Methods
   render() {
     return t("div", {
-      key: "3922f0d87f79f76fb09a678254465fa23de753cc",
+      key: "673192fa43d531b8698ff2577a2c1066ec5fa32d",
       id: `tab-pane-${this.guid}-${this.index}`,
       class: `tab-pane${this.selected ? "" : " hidden"}`,
       role: "tabpanel",
@@ -79,12 +79,12 @@ const a = class {
       "aria-hidden": `${!this.selected}`,
       "aria-labelledby": `tab-${this.guid}-${this.index}`
     }, this.selected && this.provided !== undefined && !this.provided && t("div", {
-      key: "ff1ea2bab4efe8d9c5d5aa6ca8abb63eab0ef53c"
+      key: "e4216d579bbab551e7f515d1d0e7dd7d50b277cd"
     }, t("slot", {
-      key: "15643803e95acb5c1d68d3257acacd80e07bfa06",
+      key: "89168d2910623c64f446792c1a0431f0d06795f4",
       name: "loading-wrapper"
     }), t("iframe", {
-      key: "90203cf205d92440cda111873bf86c66d0776188",
+      key: "a456afcd3c68e2be0fb9d5704b66ffdeefbfa603",
       hidden: true,
       name: this.moduleId,
       scrolling: "no",
@@ -107,11 +107,11 @@ const a = class {
       value: e.value,
       name: e.key
     })))) : ""), t("div", {
-      key: "f8ac689f47d2db0acf5f09024ad7014ab8894670",
+      key: "bc14a67d449c6ad119f2233452610da4a6e664e1",
       class: "slot-wrapper",
       hidden: this.selected && this.provided !== undefined && !this.provided
     }, t("slot", {
-      key: "d10d91dd7b72f1aa95eb2cba06b06129d479efaa"
+      key: "8c0be1b729fff29cbc865f3ce81cdd07ac99d57c"
     })));
   }
   get hostElement() {

package/dist/types/components/q2-action-group/q2-action-group.d.ts

@@ -1,3 +1,4 @@
+import { Q2ResizeObserverCustomEvent } from "../../components";
 import { ComponentInterface } from '../../stencil-public-runtime';
 export declare class Q2ActionGroup implements ComponentInterface {
     container: HTMLDivElement;

package/dist/types/components/q2-action-sheet/q2-action-sheet.d.ts

@@ -0,0 +1,60 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { Q2OptionListCustomEvent } from "../../components";
+import { ActionSheetListCloseData, ActionSheetData, ActionSheetListData, ActionSheetMessageData, ActionSheetSelectedOption, ActionSheetListOption, ActionSheetListOptgroup } from 'q2-tecton-common/lib/utility/action-sheet';
+export declare class Q2ActionSheet implements ComponentInterface {
+    contentElement: HTMLDivElement;
+    dialogElement: HTMLDialogElement;
+    initialSelectedOptions: ActionSheetSelectedOption[];
+    maxHeight: number;
+    minHeight: number;
+    optionListElement: HTMLQ2OptionListElement;
+    selectedOptions: {
+        values: ActionSheetSelectedOption[];
+        value: string;
+    };
+    hostElement: HTMLElement;
+    isScrollable: boolean;
+    renderStatus: 'is-open' | 'is-closing' | 'is-opening';
+    data: ActionSheetData;
+    hideClose: boolean;
+    title: string;
+    /**
+     * Emitted when the action sheet is closed.
+     */
+    close: EventEmitter<ActionSheetListCloseData>;
+    /**
+     * Emitted when the component has finished rendering.
+     * @private
+     */
+    ready: EventEmitter;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    hide(data?: ActionSheetListCloseData): Promise<void>;
+    show(): Promise<void>;
+    focusContent(): void;
+    generateOptgroup: (option: ActionSheetListOptgroup) => HTMLQ2OptgroupElement;
+    generateOption: (option: ActionSheetListOption) => HTMLQ2OptionElement;
+    hidePostHook(): void;
+    onCancel: (event: Event) => void;
+    onClick: (event: MouseEvent) => void;
+    onListChange: (event: Q2OptionListCustomEvent<{
+        value: string;
+        values: ActionSheetSelectedOption[];
+    }>) => void;
+    onListDone: () => void;
+    onListPopoverStateChange: (event: Q2OptionListCustomEvent<{
+        open: boolean;
+        action: 'close' | 'select' | 'open';
+    }>) => void;
+    showPreHook(): void;
+    storeInitialValues(): void;
+    updateDialogMinMaxHeight(): void;
+    renderList: ({ data }: {
+        data: ActionSheetListData;
+    }) => any;
+    renderMessage: ({ data }: {
+        data: ActionSheetMessageData;
+    }) => any;
+    renderSlot: () => any;
+    render(): any;
+}

package/dist/types/components/q2-calendar/q2-calendar.d.ts

@@ -0,0 +1,327 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { ISelectedMonthYear, CalendarDay, IDateValidators } from './q2-calendar-types';
+import { IMomentLikeObject } from './q2-calendar-helpers';
+import { DateList } from './q2-calendar-validation';
+import { IEventDetail } from '../q2-input/q2-input-types';
+import { Q2InputCustomEvent } from "../../components";
+export declare class Q2Calendar implements ComponentInterface {
+    btnCalendarToggle: HTMLQ2BtnElement;
+    btnNextMonth: HTMLQ2BtnElement;
+    btnNextYear: HTMLQ2BtnElement;
+    btnPrevMonth: HTMLQ2BtnElement;
+    btnPrevYear: HTMLQ2BtnElement;
+    calendarBody: HTMLDivElement;
+    calendarTable: HTMLTableElement;
+    controlElement: HTMLQ2InputElement;
+    dayAbbrStrings: string[];
+    dayStrings: string[];
+    defaultFormatString: string;
+    formatModifier: string;
+    hintMessageElement: HTMLQ2MessageElement;
+    internalError: string;
+    monthStrings: string[];
+    popoverElement?: HTMLQ2PopoverElement;
+    scheduledAfterRender: (() => void)[];
+    selectedMonthYear: ISelectedMonthYear;
+    valueOnBlur: string | {
+        toDate(): Date;
+    };
+    hostElement: HTMLElement;
+    dateList: CalendarDay[];
+    hintMessage: string;
+    hintMessageType: 'info' | 'error';
+    keyboardSelection: boolean;
+    typedValue: string;
+    /** @deprecated */
+    ariaLabel: string;
+    /**
+     * Detects the year automatically based on today's date when the user presses the `Escape` key or the `Blur` mouse event occurs.
+     * Setting `future` or `past` as the value will increase or decrease the year by one, respectively.
+     */
+    assume: 'current' | 'future' | 'past';
+    /** @deprecated */
+    buttonLabel: string;
+    /** A label shown at the top of the popover date picker. */
+    calendarLabel: string;
+    /** Display a button in the input field allowing the user to clear their selection. */
+    clearable: boolean;
+    /**
+     * Specifies a time of day after which a date is no longer valid.
+     *
+     * @warning
+     * Must be a valid ISO date string.
+     */
+    cutoffTime: string;
+    /**
+     * The most concise way to define valid days of the week for calendar. Each day of the week has a checksum value:
+     *
+     * - Sunday = 1
+     * - Monday = 2
+     * - Tuesday = 4
+     * - Wednesday = 8
+     * - Thursday = 16
+     * - Friday = 32
+     * - Saturday = 64
+     *
+     * Add the checksum values of your desired valid days together, and set `daysOfWeekChecksum` to that summed value.
+     *
+     * **Example:**
+     * @snippet
+     * element.daysOfWeekChecksum = 127 // All days of the week are valid
+     * element.daysOfWeekChecksum = 62; // Only weekdays are valid
+     * element.daysOfWeekChecksum = 65; // Only Saturday and Sunday are valid
+     *
+     */
+    daysOfWeekChecksum: number;
+    /** Disable the input field. */
+    disabled: boolean;
+    /**
+     * Text that displays as the placeholder when the field is marked `disabled`.
+     * @localizable
+     */
+    disabledMsg: string;
+    /** Text that appears at the bottom of the popover date picker. */
+    disclaimer: string;
+    /**
+     * Determines the display format of the date field value.
+     *
+     * Must follow the [date-fns](https://date-fns.org/v2.28.0/docs/format) token specification.
+     */
+    displayFormat: string;
+    /**
+     * Defines the last selectable date in the date picker popover.
+     *
+     * @warning
+     * Must be a valid ISO date string.
+     */
+    endDate: string;
+    /**
+     * Each item in the `errors` array will appear below the input field when the field is focused and `typeable` is `true`.
+     * @localizable
+     */
+    errors: string[];
+    /** Hide the input field's ` <label> ` element from view. */
+    hideLabel: boolean;
+    /**
+     * Each item in the `hints` array will appear below the input field when the field is focused and `typeable` is true.
+     * @localizable
+     */
+    hints: string[];
+    /** Show error styles when the calendar is in an errant state. */
+    invalid: boolean;
+    /**
+     * Defines an explicit date blacklist.
+     *
+     * @warning
+     * Must be a valid ISO date string.
+     *
+     * @info
+     * When explicit date definitions like `invalidDates` is used, other date validity methods like `daysOfWeekChecksum` are overriden.
+     */
+    invalidDates: string[];
+    /** The visible label for the `q2-calendar` input field. */
+    label: string;
+    /** @deprecated */
+    onsuccess: (e: CustomEvent) => void;
+    /**
+     * Determine whether the popover is open or closed.
+     *
+     * @readonly
+     */
+    open: boolean;
+    /** Appends "(optional)" to the label and sets `aria-required="false"`. */
+    optional: boolean;
+    /**
+     * Text that appears within the input field when it is blurred and empty.
+     * Placeholder text disappears when the user focuses on the field and provides input.
+     */
+    placeholder: string;
+    /** @deprecated */
+    popDirection: 'up' | 'down';
+    /** Aligns the popover date picker to the left or right side of the input field. */
+    popoverAlignment: 'left' | 'right';
+    /**
+     * Force the direction of the popover date picker when it opens.
+     * If no value is passed, the component will auto-detect the direction based on available space.
+     */
+    popoverDirection: 'up' | 'down';
+    /** @deprecated */
+    popoverMinHeight: number;
+    /**
+     * Determines the display mode of the popover.
+     *
+     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.
+     *
+     * @info
+     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover
+     * when nested inside of elements with transform properties. This will be removed once the popover API is available
+     * for use.
+     */
+    popoverMode: 'legacy';
+    /**
+     * The field's content is not editable, but the field remains focusable.
+     *
+     * Appends "(readonly)" to the field label. Supersedes `optional` if both are `true`.
+     */
+    readonly: boolean;
+    /**
+     * Defines the first selectabe date in the date picker popover.
+     *
+     * @warning
+     * Must be a valid ISO date string.
+     */
+    startDate: string;
+    /** The user can type in the field. Only available in desktop browsers. */
+    typeable: boolean;
+    /**
+     * Defines an explicit date whitelist.
+     *
+     * @warning
+     * Must be a valid ISO date string.
+     *
+     * @info
+     * When explicit date definitions like `validDates` is used, other date validity methods like `daysOfWeekChecksum` are overriden.
+     */
+    validDates: string[];
+    /**
+     * The value of the `q2-calendar` element, e.g. the selected date.
+     *
+     * **How to change or clear the value with javascript:**
+     * @snippet
+     * // change date
+     * element.value = '2022-12-21';
+     * // clear date
+     * element.value = null;
+     */
+    value: string | {
+        toDate(): Date;
+    };
+    /**
+     * Emitted when a date is selected or typed in the input field.
+     * @legacyEvent
+     */
+    change: EventEmitter<{
+        value: string | null;
+    }>;
+    /**
+     * Emitted when an invalid date is entered into the field.
+     */
+    error: EventEmitter<{
+        errors: {
+            message: string;
+            errorCode: string;
+        }[];
+    }>;
+    /**
+     * Emitted when a valid date is entered or selected.
+     */
+    success: EventEmitter<{
+        value: string;
+    }>;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    defaultChangeHandler(event: CustomEvent): void;
+    handleClear(): void;
+    defaultErrorHandler(event: CustomEvent): void;
+    delegateFocus(event: FocusEvent): void;
+    popoverStateHandler({ detail: { open } }: CustomEvent<{
+        open: boolean;
+    }>): void;
+    defaultSuccessHandler(event: CustomEvent): void;
+    /**
+     * Emulates clicking the `<input>` to hide the popover if it is visible.
+     *
+     * @testOnly
+     */
+    closePopover(): Promise<void>;
+    /**
+     * Emulates clicking the `<input>` to display the popover if it is hidden.
+     *
+     * @testOnly
+     */
+    openPopover(): Promise<void>;
+    /**
+     * Emulates clicking the `<input>` to display the popover, moving to the correct month and year, and clicking the
+     * provided date.
+     *
+     * While a `string` value can be passed, we recommended passing a `Date` object. If the value is invalid, the method
+     * will not select the date.
+     *
+     * @testOnly
+     */
+    setValue(value: string | Date): Promise<void>;
+    /**
+     * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.
+     *
+     * While a `string` value can be passed, we recommended passing a `Date` object. If the value is invalid, the method
+     * will not select the date.
+     *
+     * @warning
+     * Only applicable when the input is typeable.
+     *
+     * @testOnly
+     */
+    typeValue(value: string | Date): Promise<void>;
+    ariaLabelObserver(): void;
+    cutoffTimeObserver(): void;
+    daysOfWeekChecksumObserver(): void;
+    endDateObserver(): void;
+    invalidDatesObserver(): void;
+    popDirectionHandler(): void;
+    startDateObserver(): void;
+    typeableChanged(): void;
+    validDatesObserver(): void;
+    valueObserver(newValue: string | IMomentLikeObject): void;
+    get canClear(): boolean;
+    get computedPlaceholder(): string;
+    get currentWeeks(): CalendarDay[][];
+    get dateValidators(): IDateValidators;
+    get dateValue(): Date | undefined;
+    get defaultHintMessage(): string;
+    get errorList(): any[];
+    get formattedValue(): string;
+    get hintList(): string[];
+    get innerInputContainer(): HTMLElement;
+    get innerInputField(): HTMLInputElement | HTMLButtonElement;
+    get isTypeable(): boolean;
+    get selectedDate(): Date;
+    _togglePopover(): void;
+    activateDay(date: Date): void;
+    buildDateList(monthYear: ISelectedMonthYear): DateList;
+    calendarDays(): any;
+    renderCalendarPopover(): any;
+    checkActiveCellForBlankness(): void;
+    closeCalendar: () => void;
+    focusDay(date: Date): Promise<void>;
+    focusInput(): void;
+    generateDateFromDay(day: number): Date;
+    goToMonthYear: (monthIndex: number, year: number) => void;
+    renderHintField(): any;
+    renderInputField(): any;
+    onClickElsewhere: (event: CustomEvent) => void;
+    onDateKeydown: (event: KeyboardEvent) => void;
+    onDateSelection: (event: MouseEvent) => void;
+    onHeaderControlKeydown: (event: KeyboardEvent) => void;
+    onInputBlur: () => void;
+    onInputChange: (event: Event) => void;
+    onInputClick: () => void;
+    onInputFocus: (event: FocusEvent) => void;
+    onInputInput: ({ detail: { value } }: Q2InputCustomEvent<IEventDetail> & InputEvent) => void;
+    onInputKeydown: (event: KeyboardEvent) => void;
+    onInputKeyup: (event: KeyboardEvent) => void;
+    onPopupKeyup: (event: KeyboardEvent) => void;
+    onRefocus: () => void;
+    openCalendar: () => void;
+    selectDate: (newDate: Date) => void;
+    setCompleteInput(inputDate: Date): void;
+    setHints({ isValid, message, messageType }: {
+        isValid: any;
+        message: any;
+        messageType: any;
+    }): Promise<void>;
+    toggleCalendar: () => void;
+    validateDate(): void;
+    render(): any;
+}

package/dist/types/components/q2-carousel/q2-carousel.d.ts

@@ -0,0 +1,95 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { SwiperOptions, Swiper } from 'swiper';
+export declare class Q2Carousel implements ComponentInterface {
+    carouselPaneWrapperElement: HTMLElement;
+    carouselWrapper: HTMLElement;
+    fullWidthDisplayOptions: SwiperOptions;
+    guid: number;
+    mutationObserver: MutationObserver;
+    swiper?: Swiper;
+    universalCarouselOptions: SwiperOptions;
+    hostElement: HTMLElement;
+    /** Manages re-rendering the component when the `ariaLive` value changes. */
+    ariaLiveValue: 'polite' | 'off';
+    /** Manages re-rendering the autoPlay button when clicked.  */
+    autoPlayInProgress: boolean;
+    /** Manages re-rendering the component when resize event is consumed. */
+    carouselWrapperWidth: number;
+    /** Manages sizing the component based on changes in `carouselWrapperWidth`. */
+    compactMode: boolean;
+    /** Manages re-rendering the component when panes are added or removed. */
+    currentPaneCount: number;
+    /** @deprecated */
+    ariaLabel: string;
+    /** Enables the auto-play feature and starts the carousel without user input. */
+    autoPlay: boolean;
+    /** Display the carousel panes as frameless with no container or shadow. */
+    framelessPanes: boolean;
+    /** Display the carousel panes full-width rather than with peeking content. */
+    fullWidthPanes: boolean;
+    /** Hide the dots below the carousel that provide navigation control and indicate which page is currently active. */
+    hidePagination: boolean;
+    /** The currently displayed carousel pane. */
+    index: number;
+    /**
+     * The label that is associated with the carousel. This is not displayed visually, but is presented by screen readers.
+     * @localizable
+     */
+    label: string;
+    /** Display navigation arrow buttons as another way to navigate the carousel. */
+    showNavigationArrows: boolean;
+    /**
+     * Emitted when the displayed carousel pane changes.
+     */
+    change: EventEmitter<{
+        index: number;
+    }>;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    carouselPaneClicked(event: any): void;
+    delegateFocus(event: FocusEvent): void;
+    /**
+     * Clicks and Focuses the `q2-carousel-pane` matching the specified index.
+     * @testOnly
+     */
+    selectCarouselPane(index: number): Promise<void>;
+    /**
+     * Clicks and Focuses the `<button>` that controls playing or pausing the auto-play feature of the carousel.
+     *
+     * @warning
+     * If the `autoPlay` property is not enabled, this method does nothing.
+     *
+     * @testOnly
+     */
+    togglePlayPause(): Promise<void>;
+    ariaLabelObserver(): void;
+    carouselWrapperWidthChanged(): void;
+    framelessPanesChanged(): void;
+    revampCarousel(): void;
+    indexChanged(newIndex: any): void;
+    get activeCarouselOptions(): SwiperOptions;
+    get activePane(): HTMLElement;
+    get insufficientPanes(): boolean;
+    get paginationBtns(): NodeListOf<HTMLButtonElement>;
+    get paneArray(): HTMLQ2CarouselPaneElement[];
+    get paneCount(): number;
+    get peekContentDisplayOptions(): SwiperOptions;
+    get realIndex(): number;
+    get useDynamicPaginationDots(): boolean;
+    configureCarousel: (carouselWrapper: any, carouselOptions: any) => void;
+    handleAriaLive(activeAndFocused: boolean): void;
+    handleAutoPlayPause: (action: 'play' | 'pause') => void;
+    handlePopovers: (event: CustomEvent) => void;
+    keydownHandler: (event: KeyboardEvent) => void;
+    onMutationObserved: () => void;
+    setCarouselWrapperWidth: () => void;
+    tearDownCarousel: () => void;
+    updateCarouselPaneProps: () => void;
+    renderAutoPlayBtn: () => any;
+    renderInsufficientPanesDisplay: () => any;
+    renderNextNavBtn: () => any;
+    renderPaginationArea: () => any;
+    renderPrevNavBtn: () => any;
+    render(): any;
+}