q2-tecton-elements 1.70.2 → 1.71.0

package/dist/cjs/q2-textarea.cjs.entry.js

@@ -4,7 +4,7 @@ var index = require('./index-DUaTw_1N.js');
 var index$1 = require('./index-SpDCZABA.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 
-const q2TextareaCss = () => `*{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{--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)));font-weight:var(--tct-textarea-font-weight, var(--t-textarea-font-weight, 400))}: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, inherit));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)       var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)       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))));backdrop-filter:var(--tct-textarea-disabled-backdrop-filter, var(--comp-input-backdrop-filter))}.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-backdrop-filter:var(--tct-textarea-backdrop-filter, none);--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);font-size:var(--tct-textarea-font-size, inherit);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);backdrop-filter:var(--comp-textarea-backdrop-filter);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:background var(--comp-textarea-tween), backdrop-filter var(--comp-textarea-tween), 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);backdrop-filter:var(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));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));box-shadow:var(--tct-textarea-error-box-shadow, var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none)))}textarea:hover{border-color:var(--tct-textarea-hover-border-color, var(--comp-textarea-border-color));backdrop-filter:var(--tct-textarea-hover-backdrop-filter, var(--comp-textarea-backdrop-filter));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))));backdrop-filter:var(--tct-textarea-error-hover-backdrop-filter, var(--tct-textarea-error-backdrop-filter, var(--tct-textarea-hover-backdrop-filter, var(--comp-textarea-backdrop-filter))));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));backdrop-filter:var(--tct-textarea-focus-backdrop-filter, var(--comp-textarea-backdrop-filter));background:var(--tct-textarea-focus-background, var(--comp-textarea-background))}.has-error textarea:focus{border-color:var(--tct-textarea-error-focus-border-color, var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));backdrop-filter:var(--tct-textarea-error-focus-backdrop-filter, var(--tct-textarea-error-backdrop-filter, var(--tct-textarea-focus-backdrop-filter, var(--comp-textarea-backdrop-filter))));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:focus-visible{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:var(--tct-textarea-messages-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(       calc(               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))           ) / 2   );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))));stroke-width:var(--tct-textarea-resize-stroke-width, var(--t-textarea-resize-stroke-width, 1));border:0;position:absolute;right:var(--tct-textarea-resize-right, calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px));bottom:var(--tct-textarea-resize-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}`;
+const q2TextareaCss = () => `*{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{--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)));font-weight:var(--tct-textarea-font-weight, var(--t-textarea-font-weight, 400))}: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, inherit));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, var(--const-px-12, 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)       var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)       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))));backdrop-filter:var(--tct-textarea-disabled-backdrop-filter, var(--comp-input-backdrop-filter))}.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-backdrop-filter:var(--tct-textarea-backdrop-filter, none);--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);font-size:var(--tct-textarea-font-size, inherit);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);backdrop-filter:var(--comp-textarea-backdrop-filter);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:background var(--comp-textarea-tween), backdrop-filter var(--comp-textarea-tween), 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);backdrop-filter:var(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));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));box-shadow:var(--tct-textarea-error-box-shadow, var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none)))}textarea:hover{border-color:var(--tct-textarea-hover-border-color, var(--comp-textarea-border-color));backdrop-filter:var(--tct-textarea-hover-backdrop-filter, var(--comp-textarea-backdrop-filter));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))));backdrop-filter:var(--tct-textarea-error-hover-backdrop-filter, var(--tct-textarea-error-backdrop-filter, var(--tct-textarea-hover-backdrop-filter, var(--comp-textarea-backdrop-filter))));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));backdrop-filter:var(--tct-textarea-focus-backdrop-filter, var(--comp-textarea-backdrop-filter));background:var(--tct-textarea-focus-background, var(--comp-textarea-background))}.has-error textarea:focus{border-color:var(--tct-textarea-error-focus-border-color, var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));backdrop-filter:var(--tct-textarea-error-focus-backdrop-filter, var(--tct-textarea-error-backdrop-filter, var(--tct-textarea-focus-backdrop-filter, var(--comp-textarea-backdrop-filter))));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:focus-visible{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:var(--tct-textarea-messages-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, var(--const-px-12, 12px)))));position:absolute;right:0}.btn-resize{--tct-textarea-resize-icon-padding:calc(       calc(               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))           ) / 2   );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))));stroke-width:var(--tct-textarea-resize-stroke-width, var(--t-textarea-resize-stroke-width, 1));border:0;position:absolute;right:var(--tct-textarea-resize-right, calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px));bottom:var(--tct-textarea-resize-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}`;
 
 const Q2Textarea = class {
     constructor(hostRef) {
@@ -271,7 +271,7 @@ const Q2Textarea = class {
     // #region Render Methods
     renderInput() {
         const textareaClasses = this.resize === 'vertical-auto' ? 'resize-vertical-auto' : '';
-        return (index.h("div", { class: "input-container" }, index.h("textarea", { id: this.inputId, class: textareaClasses, placeholder: (this.placeholder && index$1.loc(this.placeholder)) || undefined, "test-id": "inputField", maxLength: this.maxlength, "aria-describedby": this.inputDescribedBy, "aria-invalid": `${this.hasError}`, "aria-required": `${!this.optional}`, "aria-label": this.hideLabel && this.label, spellcheck: this.spellcheck, rows: this.rows || 3, cols: this.cols, value: this.value, ref: el => (this.textareaField = el), readonly: !!this.readonly, disabled: !!this.disabled, maxlength: this.maxlength, onInput: this.onTextareaInput, onChange: this.onTextareaChange, onFocus: this.onTextareaFocus, onBlur: this.onTextareaBlur }), this.hasError ? (index.h("q2-icon", { type: "error", class: "icon-error" })) : (''), this.showResize && (index.h("button", { onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart, class: "btn-resize", "aria-label": index$1.loc('tecton.element.input.resize'), tabIndex: -1 }, index.h("svg", { "aria-hidden": "true", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11", fill: "none", "stroke-stroke-linecap": "square" }))))));
+        return (index.h("div", { class: "input-container" }, index.h("textarea", { id: this.inputId, class: textareaClasses, placeholder: (this.placeholder && index$1.loc(this.placeholder)) || undefined, "test-id": "inputField", maxLength: this.maxlength, "aria-describedby": this.inputDescribedBy, "aria-invalid": `${this.hasError}`, "aria-required": `${!this.optional}`, "aria-label": this.hideLabel && this.label, spellcheck: this.spellcheck, rows: this.rows || 3, cols: this.cols, value: this.value, ref: el => (this.textareaField = el), readonly: !!this.readonly, disabled: !!this.disabled, maxlength: this.maxlength, onInput: this.onTextareaInput, onChange: this.onTextareaChange, onFocus: this.onTextareaFocus, onBlur: this.onTextareaBlur }), this.hasError ? (index.h("q2-icon", { type: "error", class: "icon-error" })) : (''), this.showResize && (index.h("button", { onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart, class: "btn-resize", "aria-hidden": "true", tabIndex: -1 }, index.h("svg", { "aria-hidden": "true", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11", fill: "none", "stroke-stroke-linecap": "square" }))))));
     }
     renderMaxLength() {
         var _a;
@@ -281,7 +281,7 @@ const Q2Textarea = class {
         ]))));
     }
     render() {
-        return (index.h("div", { key: '1a53c8b1528031f5ccb957f2a2320f7a8a8f4607', class: this.wrapperClasses }, index$1.renderLabel(this), index.h("div", { key: '1de221d01fd339d749b557d408acabdc06c07ecc', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', index$1.renderMessages(this))));
+        return (index.h("div", { key: '9b3eb74c84edd99af52a0ec71ba8b2fd8adbd1f2', class: this.wrapperClasses }, index$1.renderLabel(this), index.h("div", { key: 'a00772502ea6c1fde5af5bf4c12f0606a629252a', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', index$1.renderMessages(this))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-toast.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-DUaTw_1N.js');
 var index$1 = require('./index-SpDCZABA.js');
 
-const q2ToastCss = () => `*{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:block}.toast{--comp-accent-width:1px;--comp-icon-size:32px;--comp-icon-bg:transparent;--comp-text-color:var(--tct-toast-text, var(--tct-gray-2, var(--app-gray-2, #333333)));--comp-subtle-color:var(--tct-toast-subtle, var(--tct-gray-5, var(--app-gray-5, #6b6b6b)));--comp-color-success:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--comp-color-info:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--comp-color-warning:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--comp-color-alert:var(--tct-stoplight-alert, var(--const-stoplight-alert, #d20a0a));--comp-color-default:white;display:flex;flex-direction:column;gap:var(--tct-toast-gap, var(--app-scale-2x, 10px));padding-left:3px;border-radius:5px;border:1px solid transparent;background:var(--tct-toast-background, var(--tct-gray-14, var(--app-gray-l3, #ffffff)));color:var(--comp-text-color);box-shadow:var(--tct-toast-shadow, var(--app-shadow-2, 0 12px 24px rgb(0 0 0 / 0.12)));overflow:hidden}.toast.success{border-color:var(--comp-color-success);background-color:var(--comp-color-success);--comp-icon-bg:#e7f5e3}.toast.info{border-color:var(--comp-color-info);background-color:var(--comp-color-info);--comp-icon-bg:#e6f1fb}.toast.warning{border-color:var(--comp-color-warning);background-color:var(--comp-color-warning);--comp-icon-bg:#fff0df}.toast.alert{border-color:var(--comp-color-alert);background-color:var(--comp-color-alert);--comp-icon-bg:#fde6e6}.toast.is-closing{animation-name:shrink;animation-duration:500ms;animation-timing-function:linear;animation-fill-mode:forwards;transform-origin:top;overflow:hidden}.toast.small .container{padding:var(--tct-toast-padding-small, var(--app-scale-2x, 10px))}.toast.default{--comp-border-color:var(--tct-toast-border, var(--tct-gray-9, var(--app-gray-4, #d1d1d1)));--comp-icon-bg:var(--tct-toast-icon-bg, var(--tct-gray-12, var(--app-gray-l2, #f3f3f3)));border-color:var(--comp-border-color)}.header{display:grid;grid-template-columns:var(--comp-icon-size) 1fr auto;gap:var(--tct-toast-gap, var(--app-scale-2x, 10px));align-items:center}.toast.no-icon .header{grid-template-columns:1fr auto}.icon{width:var(--comp-icon-size);height:var(--comp-icon-size);border-radius:50%;display:grid;place-items:center;background:var(--comp-icon-bg)}.icon q2-icon{--tct-icon-size:calc(var(--comp-icon-size) - 6px);--tct-icon-stroke-primary:var(--comp-border-color);--tct-icon-stroke-secondary:var(--comp-border-color);--tct-icon-fill:var(--comp-border-color)}.title{font-weight:600;display:flex;align-items:center}.title-text{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.content{color:var(--comp-subtle-color);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.footer{margin-top:var(--tct-toast-footer-gap, var(--app-scale-2x, 10px));display:flex;align-items:center;justify-content:space-between;gap:var(--tct-toast-footer-spacing, var(--app-scale-2x, 10px));color:var(--comp-subtle-color);font-size:0.875rem}.time{white-space:nowrap}.actions{display:inline-flex;align-items:center;gap:var(--tct-toast-actions-gap, var(--app-scale-2x, 10px))}.close{border:none;background:transparent;padding:2px;margin-left:var(--tct-toast-close-offset, var(--app-scale-1x, 5px));color:var(--comp-subtle-color);cursor:pointer}.close q2-icon{--tct-icon-size:18px}.container{padding:var(--tct-toast-padding, var(--app-scale-3x, 15px));background-color:white}@keyframes shrink{from{transform:scale(1);height:var(--toast-close-height, 0px);opacity:1}to{transform:scale(0);height:0;opacity:0}}`;
+const q2ToastCss = () => `*{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:block}.toast{--comp-accent-width:1px;--comp-icon-size:32px;--comp-icon-bg:transparent;--comp-text-color:var(--tct-toast-text, var(--tct-gray-2, var(--app-gray-2, #333333)));--comp-subtle-color:var(--tct-toast-subtle, var(--tct-gray-5, var(--app-gray-5, #6b6b6b)));--comp-color-success:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--comp-color-info:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--comp-color-warning:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--comp-color-alert:var(--tct-stoplight-alert, var(--const-stoplight-alert, #d20a0a));--comp-color-default:white;display:flex;flex-direction:column;gap:var(--tct-toast-gap, var(--app-scale-2x, 10px));padding-left:3px;border-radius:5px;border:1px solid transparent;background:var(--tct-toast-background, var(--tct-gray-14, var(--app-gray-l3, #ffffff)));color:var(--comp-text-color);box-shadow:var(--tct-toast-shadow, var(--app-shadow-2, 0 12px 24px rgb(0 0 0 / 0.12)));overflow:hidden}.toast.success{border-color:var(--comp-color-success);background-color:var(--comp-color-success);--comp-icon-bg:#e7f5e3}.toast.info{border-color:var(--comp-color-info);background-color:var(--comp-color-info);--comp-icon-bg:#e6f1fb}.toast.warning{border-color:var(--comp-color-warning);background-color:var(--comp-color-warning);--comp-icon-bg:#fff0df}.toast.alert{border-color:var(--comp-color-alert);background-color:var(--comp-color-alert);--comp-icon-bg:#fde6e6}.toast.is-closing{animation-name:shrink;animation-duration:500ms;animation-timing-function:linear;animation-fill-mode:forwards;transform-origin:top;overflow:hidden}.toast.small .container{padding:var(--tct-toast-padding-small, var(--app-scale-2x, 10px))}.toast.default{--comp-border-color:var(--tct-toast-border, var(--tct-gray-9, var(--app-gray-4, #d1d1d1)));--comp-icon-bg:var(--tct-toast-icon-bg, var(--tct-gray-12, var(--app-gray-l2, #f3f3f3)));border-color:var(--comp-border-color)}.header{display:grid;grid-template-columns:var(--comp-icon-size) 1fr auto;gap:var(--tct-toast-gap, var(--app-scale-2x, 10px));align-items:center}.toast.no-icon .header{grid-template-columns:1fr auto}.icon{width:var(--comp-icon-size);height:var(--comp-icon-size);border-radius:50%;display:grid;place-items:center;background:var(--comp-icon-bg)}.icon q2-icon{--tct-icon-size:calc(var(--comp-icon-size) - 6px);--tct-icon-stroke-primary:var(--comp-border-color);--tct-icon-stroke-secondary:var(--comp-border-color);--tct-icon-fill:var(--comp-border-color)}.title{font-weight:600;display:flex;align-items:center}.title-text{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.content{color:var(--comp-subtle-color);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.footer{margin-top:var(--tct-toast-footer-gap, var(--app-scale-2x, 10px));display:flex;align-items:center;justify-content:space-between;gap:var(--tct-toast-footer-spacing, var(--app-scale-2x, 10px));color:var(--comp-subtle-color);font-size:0.875rem}.time{white-space:nowrap}.actions{display:inline-flex;align-items:center;gap:var(--tct-toast-actions-gap, var(--app-scale-2x, 10px))}.close{border:none;background:transparent;padding:2px;margin-left:var(--tct-toast-close-offset, var(--app-scale-1x, 5px));color:var(--comp-subtle-color);cursor:pointer}.close q2-icon{--tct-icon-size:18px}.container{padding:var(--tct-toast-padding, var(--app-scale-3x, 15px));background-color:white}@keyframes shrink{from{transform:scale(1);height:var(--toast-close-height, 0px);opacity:1}to{transform:scale(0);height:0;opacity:0}}`;
 
 const Q2Toast = class {
     constructor(hostRef) {

package/dist/cjs/q2-tooltip.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-DUaTw_1N.js');
 var index$1 = require('./index-SpDCZABA.js');
 
-const q2TooltipCss = () => `*{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;line-height:0}: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-flex;line-height:normal;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(data-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);transition-property:visibility, opacity}:host([block]) .tooltip{display:block}:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip:before,:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip:after{pointer-events:auto}.tooltip:not(.dismissed):hover:before,.tooltip:not(.dismissed):hover:after,.tooltip:not(.dismissed).has-keyboard-focus:focus-within:before,.tooltip:not(.dismissed).has-keyboard-focus:focus-within:after,:host([persistent]:not([persistent=false])) .tooltip:not(.dismissed):before,:host([persistent]:not([persistent=false])) .tooltip:not(.dismissed):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:hover:focus-within:before,.tooltip.has-generic-focus:hover:focus-within:after{animation-name:tooltippedFade;animation-direction:normal;animation-delay:0ms}:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip.has-generic-focus:focus-within:before,:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip.has-generic-focus:focus-within:after{animation-name:tooltippedFade;animation-direction:normal;animation-delay:0ms}.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)}.tooltip.dismissed:before,.tooltip.dismissed:after{visibility:hidden;opacity:0;animation-name:none}: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);margin-right:var(--comp-body-offset);transform:translateX(var(--comp-offset-translate, 0))}:host([position=sw]) .tooltip:after,:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset);margin-left:var(--comp-body-offset);right:50%;transform:translateX(var(--comp-offset-translate, 0))}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(calc(50% + var(--comp-offset-translate, 0)))}: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)}`;
+const q2TooltipCss = () => `*{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;line-height:0}: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-flex;line-height:normal;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-hover-delay, var(--tct-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, var(--const-px-12, 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(data-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);transition-property:visibility, opacity}:host([block]) .tooltip{display:block}:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip:before,:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip:after{pointer-events:auto}.tooltip:not(.dismissed):hover:before,.tooltip:not(.dismissed):hover:after,.tooltip:not(.dismissed).has-keyboard-focus:focus-within:before,.tooltip:not(.dismissed).has-keyboard-focus:focus-within:after,:host([persistent]:not([persistent=false])) .tooltip:not(.dismissed):before,:host([persistent]:not([persistent=false])) .tooltip:not(.dismissed):after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-touch-click:before,.tooltip.has-touch-click: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-touch-click:hover:before,.tooltip.has-touch-click:hover:after{animation-name:tooltippedFade;animation-direction:normal;animation-delay:0ms}.tooltip.dismissed:before,.tooltip.dismissed:after{visibility:hidden;opacity:0;animation-name:none}: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);margin-right:var(--comp-body-offset);transform:translateX(var(--comp-offset-translate, 0))}:host([position=sw]) .tooltip:after,:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset);margin-left:var(--comp-body-offset);right:50%;transform:translateX(var(--comp-offset-translate, 0))}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(calc(50% + var(--comp-offset-translate, 0)))}: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)}`;
 
 const Q2Tooltip = class {
     constructor(hostRef) {
@@ -46,7 +46,16 @@ const Q2Tooltip = class {
         this.persistOnHoverDismissed = true;
         this.hideTooltip();
     }
+    clickHandler() {
+        this.adjustSide();
+        if (this.persistent || !index$1.isMobile())
+            return;
+        this.persistOnHoverDismissed = false;
+        this.focusClass = 'has-touch-click';
+    }
     focusCaptureHandler() {
+        if (this.shouldBeVisible || this.persistent)
+            this.adjustSide();
         this.checkFocusClass();
     }
     focusHandler(event) {
@@ -59,10 +68,7 @@ const Q2Tooltip = class {
     focusOutHandler() {
         if (this.shouldBeVisible)
             return;
-        if (this.focusClass === 'has-generic-focus')
-            this.focusClass = 'has-generic-focus-out';
-        else
-            this.focusClass = null;
+        this.focusClass = null;
     }
     // Escape must be handled on `document` so it still dismisses when the tooltip is visible by hover only and focus is not inside the tooltip host.
     keyDownDocumentHandler(event) {
@@ -133,11 +139,17 @@ const Q2Tooltip = class {
             if (tooltipWidth > distanceRight) {
                 this.tooltipElement.style.setProperty('--comp-offset-translate', `-${Math.round(tooltipWidth - distanceRight + extraMargin)}px`);
             }
+            else {
+                this.tooltipElement.style.setProperty('--comp-offset-translate', `0px`);
+            }
         }
         else if (['nw', 'sw'].includes(this.position)) {
             if (tooltipWidth > distanceLeft) {
                 this.tooltipElement.style.setProperty('--comp-offset-translate', `${Math.round(tooltipWidth - distanceLeft + extraMargin)}px`);
             }
+            else {
+                this.tooltipElement.style.setProperty('--comp-offset-translate', `0px`);
+            }
         }
         else if (['n', 's'].includes(this.position)) {
             if (tooltipWidth / 2 > distanceLeft) {
@@ -167,10 +179,9 @@ const Q2Tooltip = class {
     animationEndHandler() {
         this.animationEndCount = this.animationEndCount + 1;
         const { focusClass, animationEndCount } = this;
-        // animationEnd is fired once for :before and once for :after pseudo elements
-        // there are multiple animations defined for .has-generic-focus
-        // so we need to wait for all of them to finish before we can remove the class
-        if (focusClass === 'has-generic-focus-out' || (focusClass === 'has-generic-focus' && animationEndCount === 4)) {
+        // animationEnd fires once for :before and once for :after, and there
+        // are two animations on .has-touch-click, so wait for all four before clearing.
+        if (focusClass === 'has-touch-click' && animationEndCount >= 4) {
             this.focusClass = null;
             this.animationEndCount = 0;
         }
@@ -227,9 +238,12 @@ const Q2Tooltip = class {
         if (!this.shouldBeVisible)
             return;
         const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);
-        this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';
-        if (isKeyboardFocus)
+        if (isKeyboardFocus) {
+            this.focusClass = 'has-keyboard-focus';
             return;
+        }
+        if (index$1.isMobile())
+            this.focusClass = 'has-touch-click';
     }
     clearTooltipOnChildren() {
         const children = Array.from(this.hostElement.children);
@@ -265,10 +279,7 @@ const Q2Tooltip = class {
         return (element === null || element === void 0 ? void 0 : element.matches(':focus-visible')) ? element : null;
     }
     hideTooltip() {
-        if (this.focusClass === 'has-generic-focus')
-            this.focusClass = 'has-generic-focus-out';
-        else
-            this.focusClass = null;
+        this.focusClass = null;
     }
     propagateTooltip() {
         if (this.focusable)

package/dist/cjs/tecton-tab-pane.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-DUaTw_1N.js');
 
-const tectonTabPaneCss = () => `*{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}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}.loading-wrapper{height:44px;width:100%;align-items:center;justify-content:center}.loading-wrapper:not([hidden]){display:flex}iframe{width:100%;height:auto;overflow-y:hidden;border:none}iframe:not([hidden]){display:inline-block}.slot-wrapper:focus-visible{outline:none;box-shadow:var(--const-global-focus)}`;
+const tectonTabPaneCss = () => `*{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}}}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}.loading-wrapper{height:44px;width:100%;align-items:center;justify-content:center}.loading-wrapper:not([hidden]){display:flex}iframe{width:100%;height:auto;overflow-y:hidden;border:none}iframe:not([hidden]){display:inline-block}.slot-wrapper:focus-visible{outline:none;box-shadow:var(--const-global-focus)}`;
 
 const TectonTabPane = class {
     constructor(hostRef) {
@@ -55,9 +55,9 @@ const TectonTabPane = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '6fd41d78c9d8a6e1abf28713f52d92ac214ad8ab', 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}` }, this.selected && this.provided !== undefined && !this.provided && (index.h("div", { key: 'b5302bdd5ae8e749e84e4e12505d843c0ba0950a' }, index.h("slot", { key: '4b935505187b21260398c28ea876ecd64d9ed172', name: "loading-wrapper" }), index.h("iframe", { key: 'c18b96c8849a6a69abec9ced6d27a6860113b8c7', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (index.h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
+        return (index.h("div", { key: '68c7250777ec0c700107df4997634d4aee8f8e91', 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}` }, this.selected && this.provided !== undefined && !this.provided && (index.h("div", { key: '7b8c74b691fc1c599766900125e09afe79e53859' }, index.h("slot", { key: 'bbf7c58bef21ab334059655e958e976b9bdf327e', name: "loading-wrapper" }), index.h("iframe", { key: '6a262f757dd78294fcf49242b337b02c13842ee8', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (index.h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
             return (index.h("input", { type: "hidden", value: element.value, name: element.key }));
-        }))) : (''))), index.h("div", { key: '1016d617dc6cf49aa8e4bf52010e3cf246191875', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, index.h("slot", { key: '466d820db179e1b6e350722eff9ec9190be6c869' }))));
+        }))) : (''))), index.h("div", { key: 'd9be64623c99011b7f30256d0abfaeab23f72c00', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, index.h("slot", { key: 'a1a3a9772b2875c7d4ab510e9014d99b6e036ad3' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/components/q2-action-group/q2-action-group.css

@@ -65,6 +65,28 @@ button {
   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;
+    }
+  }
+}
 /**
  * @prop --tct-action-group-margin: (<length-percentage>+) Controls the outer margin of the action group host.
  * @prop --tct-action-group-gap: (<length-percentage>+) Controls the gap between action group children.

package/dist/collection/components/q2-action-sheet/q2-action-sheet.css

@@ -65,6 +65,28 @@ button {
   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;
+    }
+  }
+}
 /**
  * @prop --tct-action-sheet-background: (<color>) Controls the background color of the action sheet dialog.
  * @prop --tct-action-sheet-color: (<color>) Controls the text color of the action sheet dialog.
@@ -185,6 +207,7 @@ dialog[open].is-closing::backdrop {
   gap: var(--comp-dialog-gap);
   max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));
   padding: var(--comp-dialog-padding);
+  margin-bottom: env(safe-area-inset-bottom, 0px);
 }
 .interior.is-list header,
 .interior.is-list footer {
@@ -215,7 +238,7 @@ header {
   grid-template-areas: ". title close";
   gap: var(--comp-dialog-gap);
 }
-header .title {
+header #title {
   grid-area: title;
   text-align: center;
   line-height: var(--comp-header-height);

package/dist/collection/components/q2-action-sheet/q2-action-sheet.js

@@ -188,10 +188,11 @@ export class Q2ActionSheet {
         // #endregion
         // #region Render Methods
         this.renderList = ({ data }) => {
+            var _a;
             const { listProps, slotsHtml = [] } = data;
             return (h(Fragment, null, slotsHtml
                 .filter(entry => entry.slot === 'top')
-                .map(entry => (h("div", { innerHTML: sanitizeActionSheetSlotHtml(entry.html) }))), h("div", { class: "content", ref: el => (this.contentElement = el) }, h("q2-option-list", { ref: el => (this.optionListElement = el), multiple: listProps.multiple, noSelect: listProps.noSelect, onChange: this.onListChange, onPopoverState: this.onListPopoverStateChange, selectedOptions: listProps.selectedOptions }, h("slot", null))), h("footer", null, listProps.multiple && (h("q2-btn", { ref: el => (this.doneButtonElement = el), "test-id": "btnDone", intent: "workflow-primary", onClick: this.onListDone }, loc('tecton.element.actionSheet.done')))), slotsHtml
+                .map(entry => (h("div", { innerHTML: sanitizeActionSheetSlotHtml(entry.html) }))), h("div", { class: "content", ref: el => (this.contentElement = el) }, h("q2-option-list", { ref: el => (this.optionListElement = el), multiple: listProps.multiple, label: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.title) || this.title, noSelect: listProps.noSelect, onChange: this.onListChange, onPopoverState: this.onListPopoverStateChange, selectedOptions: listProps.selectedOptions }, h("slot", null))), h("footer", null, listProps.multiple && (h("q2-btn", { ref: el => (this.doneButtonElement = el), "test-id": "btnDone", intent: "workflow-primary", onClick: this.onListDone }, loc('tecton.element.actionSheet.done')))), slotsHtml
                 .filter(entry => entry.slot === 'bottom')
                 .map(entry => (h("div", { innerHTML: sanitizeActionSheetSlotHtml(entry.html) })))));
         };
@@ -313,7 +314,7 @@ export class Q2ActionSheet {
         }
         const appearance = (data === null || data === void 0 ? void 0 : data.appearance) || 'slot';
         const interiorClasses = `interior is-${appearance}`;
-        return (h("dialog", { key: '4207c46401f472afc8f7a1d8cd57cab33d7769b8', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '13d6461941da7d820b79b2ce52e44d99b50ec1a6', class: interiorClasses }, showHeader && (h("header", { key: '683aaafb9fa00f89a8ef7c3b2ba8843e206486ea' }, h("div", { key: 'd5f07087923ec1752a3e7e0b31e8ab33308b8ca4', class: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: 'baa1d564d30adf8642af125c7dade4eeb3b31569', ref: el => (this.closeButtonElement = el), class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: 'f33431b52612dcac5fb379bc0388a9df88a08535', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '723f471d393d71ee9331a156fb8e7ca57e95eb57' }, data.description), RenderContent && h(RenderContent, { key: '182d608c4ebc033cd2b5bb59b9ad3053bc821e9b', data: this.data }))));
+        return (h("dialog", { key: '90b91ed23231e01c4a77cd4c22201f736942546f', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick, "aria-labelledby": showHeader ? 'title' : undefined }, h("div", { key: '3a3d57295f090bec2fa4a0f4166ad47c020d02f9', class: interiorClasses }, showHeader && (h("header", { key: 'd3c5e66fc04a501b2d57bc7ebb122e192343e30d' }, h("div", { key: '238957b01b452902f627aca97f590479f53886f1', id: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: 'cede4ee6deee3587043f01df525d12a1cd900a79', ref: el => (this.closeButtonElement = el), class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '82e254b4b6419ea49f6647241a70f5203eb76624', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '78efd55feaad1979d540c49e94436e9da4c03cfe' }, data.description), RenderContent && h(RenderContent, { key: 'fdf02d887e3366d9fdc90dcecd5717c126a10873', data: this.data }))));
     }
     static get is() { return "q2-action-sheet"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-avatar/q2-avatar.css

@@ -65,6 +65,28 @@ button {
   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;
+    }
+  }
+}
 /**
  * @prop --tct-avatar-background: (<color>) Controls the background color of the avatar shape in its default and fallback states.
  * @prop --tct-avatar-text-color: (<color>) Controls the text color of the avatar initials.
@@ -179,7 +201,7 @@ button {
 text {
   fill: var(--tct-avatar-text-color, var(--tct-avatar-color, #ffffff));
   font-weight: var(--tct-avatar-font-weight, 200);
-  font-size: var(--tct-avatar-font-size, 40px);
+  font-size: var(--tct-avatar-font-size, var(--const-px-40, 40px));
 }
 
 .fallback {

package/dist/collection/components/q2-avatar/test/q2-avatar-test.vr.js

@@ -1,6 +1,6 @@
 import { expect } from "@playwright/test";
 import { test } from "@stencil/playwright";
-import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+import { setupPage, THEMES, FONT_SCALE_PX, FONT_SCALE_SUFFIX } from "../../../utils/test/vr-helpers";
 // Inline 2x2 solid-blue PNG — keeps the image variant hermetic (no network).
 const IMAGE_DATA_URI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFklEQVQI12NkYGD4z8DAwMTAwMDAAAALzAEFwQ7e7AAAAABJRU5ErkJggg==';
 const VARIANTS = [
@@ -58,3 +58,15 @@ test.describe('q2-avatar — variants × themes', () => {
         }
     }
 });
+// Initials variants exercise --tct-avatar-font-size (SVG text element).
+const AVATAR_FONT_SCALE_VARIANTS = VARIANTS.filter(v => v.name === 'initials-1');
+test.describe(`q2-avatar — scaled font size × themes`, () => {
+    for (const variant of AVATAR_FONT_SCALE_VARIANTS) {
+        for (const theme of THEMES) {
+            test(`q2-avatar--${variant.name}--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+                await setupPage(page, variant.html, { theme, fontSizePx: FONT_SCALE_PX });
+                await expect(page).toHaveScreenshot(`q2-avatar--${variant.name}--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+            });
+        }
+    }
+});

package/dist/collection/components/q2-badge/q2-badge.css

@@ -65,6 +65,28 @@ button {
   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;
+    }
+  }
+}
 /**
  * @prop --tct-badge-background: (<color>) Controls the background color of the badge container in its default state.
  * @prop --tct-badge-color: (<color>) Controls the text color of the badge container in its default state.
@@ -98,8 +120,8 @@ button {
 :host {
   display: inline-block;
   line-height: 0;
-  --comp-badge-font-size: var(--app-font-size-small, 12px);
-  --comp-badge-large-font-size: var(--app-font-size-medium, 14px);
+  --comp-badge-font-size: var(--app-font-size-small, var(--const-px-12, 12px));
+  --comp-badge-large-font-size: var(--app-font-size, var(--const-px-14, 14px));
   --comp-badge-background: var(--tct-badge-background, var(--t-a11y-gray-color-AAA, #6c6c6c));
   --comp-badge-color: var(--tct-badge-color, var(--t-base, #ffffff));
 }
@@ -149,7 +171,7 @@ button {
 }
 .badge-container .badge-text {
   font-size: var(--comp-badge-font-size);
-  line-height: var(--tct-badge-line-height, 14px);
+  line-height: var(--tct-badge-line-height, var(--const-px-14, 14px));
 }
 .badge-container .badge-text ::slotted(p) {
   margin: 0 !important;
@@ -164,7 +186,7 @@ button {
 }
 .badge-container.size-large .badge-text {
   font-size: var(--comp-badge-large-font-size);
-  line-height: var(--tct-badge-large-line-height, 20px);
+  line-height: var(--tct-badge-large-line-height, var(--const-px-20, 20px));
 }
 .badge-container.size-large .badge-text ::slotted(p) {
   margin: 0 !important;

package/dist/collection/components/q2-badge/test/q2-badge-test.vr.js

@@ -1,6 +1,6 @@
 import { expect } from "@playwright/test";
 import { test } from "@stencil/playwright";
-import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+import { setupPage, THEMES, FONT_SCALE_PX, FONT_SCALE_SUFFIX } from "../../../utils/test/vr-helpers";
 const THEME_VALUES = ['primary', 'secondary', 'tertiary'];
 const STATUS_VALUES = ['info', 'warning', 'alert', 'success'];
 const VARIANTS = [
@@ -31,3 +31,15 @@ test.describe('q2-badge — variants × themes', () => {
         }
     }
 });
+// 'default' exercises --tct-badge-line-height; 'size-large' exercises --tct-badge-large-line-height.
+const BADGE_FONT_SCALE_VARIANTS = VARIANTS.filter(v => v.name === 'default' || v.name === 'size-large');
+test.describe(`q2-badge — scaled font size × themes`, () => {
+    for (const variant of BADGE_FONT_SCALE_VARIANTS) {
+        for (const theme of THEMES) {
+            test(`q2-badge--${variant.name}--resting--${FONT_SCALE_SUFFIX} — ${theme}`, async ({ page }) => {
+                await setupPage(page, variant.html, { theme, fontSizePx: FONT_SCALE_PX });
+                await expect(page).toHaveScreenshot(`q2-badge--${variant.name}--resting--${FONT_SCALE_SUFFIX}--${theme}.png`);
+            });
+        }
+    }
+});