q2-tecton-elements 1.71.1 → 1.72.0

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-SpDCZABA.js');
+var index$1 = require('./index-BY3aao8R.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}@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}`;

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-SpDCZABA.js');
+var index$1 = require('./index-BY3aao8R.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}@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}}`;
 

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-SpDCZABA.js');
+var index$1 = require('./index-BY3aao8R.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}@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)}`;
 

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

@@ -23,7 +23,9 @@ const TectonTabPane = class {
         const loadingWrapper = this.hostElement.shadowRoot.querySelector('.loading-wrapper');
         /* istanbul ignore next */
         if (loadingWrapper) {
-            loadingWrapper.style.minHeight = this.minHeight;
+            if (loadingWrapper.querySelector('.q2-row')) {
+                loadingWrapper.style.minHeight = this.minHeight;
+            }
             loadingWrapper.hidden = !this.selected;
         }
     }
@@ -55,9 +57,9 @@ const TectonTabPane = class {
     // #endregion
     // #region Render Methods
     render() {
-        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("div", { key: '6c0524ab1981900cc7a37803fd9426c6397049c4', 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: '10cc2712e1ccefa6a9bb3b657830636da4d81980' }, index.h("slot", { key: 'cde7112d4035c6f118e9c50b0fe5d9d91c70ee7d', name: "loading-wrapper" }), index.h("iframe", { key: '851972991feb3b8f6c7f569e92ff2e624d94e221', 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: 'd9be64623c99011b7f30256d0abfaeab23f72c00', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, index.h("slot", { key: 'a1a3a9772b2875c7d4ab510e9014d99b6e036ad3' }))));
+        }))) : (''))), index.h("div", { key: '741c6f2c89dc15493f165428929f589425aa4d75', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, index.h("slot", { key: '17100ec2dc0ea2d1e27628d36e9e6e1139f293a9' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -236,6 +236,7 @@ button {
  * @prop --tct-btn-coin-focus-box-shadow?: (*) Controls the optional box shadow of the coin button on focus.
  * @prop --tct-btn-coin-focus-visible-box-shadow: (*) Controls the box shadow of the coin button when focused via keyboard.
  * @prop --tct-btn-coin-focus-ring: (<color>) Controls the focus ring color of the coin button.
+ * @prop --tct-btn-coin-focus-visible-outer-ring-color: (<color>) Controls the outer ring color of the coin button when focused via keyboard.
  * @prop --tct-btn-coin-active-background?: (<color>) Controls the optional background color of the coin button when active.
  * @prop --tct-btn-coin-icon-stroke-primary: (<color>) Controls the primary stroke color of icons inside the coin button.
  * @prop --tct-btn-coin-icon-stroke-secondary: (<color>) Controls the secondary stroke color of icons inside the coin button.
@@ -257,6 +258,9 @@ button {
  * @prop --tct-btn-primary-text-decoration: (<custom-ident>) Controls the text-decoration of the primary-intent button.
  * @prop --tct-btn-primary-box-shadow: (*) Controls the box shadow of the primary-intent button.
  * @prop --tct-btn-primary-icon-color: (<color>) Controls the icon color of the primary-intent button.
+ * @prop --tct-btn-primary-tween: (*) Controls the transition timing of primary-intent button state changes.
+ * @prop --tct-btn-primary-compositor-transform?: (*) Controls the optional compositor transform used during primary-intent button interactions.
+ * @prop --tct-btn-primary-active-scale: (<number>) Controls the scale of the primary-intent button when active.
  * @prop --tct-btn-primary-hover-background: (<color>) Controls the background color of the primary-intent button on hover.
  * @prop --tct-btn-primary-hover-border-color: (<color>) Controls the border color of the primary-intent button on hover.
  * @prop --tct-btn-primary-hover-font-color: (<color>) Controls the text color of the primary-intent button on hover.
@@ -528,6 +532,7 @@ button.icon-only ::slotted(q2-icon) {
   --comp-btn-tween: var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));
   --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   --comp-background-alternative: #ebf8ff;
+  --comp-focus-ring-color: var(--t-focus-color, var(--const-focus-color));
 }
 :host .btn-height-wrapper {
   cursor: pointer;
@@ -554,7 +559,7 @@ button {
   color: inherit;
   cursor: pointer;
   transition: var(--comp-btn-tween);
-  transition-property: background, color, box-shadow, fill, border-color, border-width;
+  transition-property: background, color, box-shadow, fill, border-color, border-width, transform;
   outline: 0;
   min-height: var(--tct-btn-min-height, none);
   letter-spacing: var(--tct-btn-letter-spacing, inherit);
@@ -617,17 +622,22 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
   --tct-icon-size: var(--tct-btn-icon-size-large, 18px);
 }
 :host(:not([intent])) button:focus-visible {
-  --comp-double-focus-ring-fallback: 0 0 0 2px #ffffff, 0 0 0 4px #0066cc;
-  box-shadow: var(--tct-btn-default-double-focus-visible-ring, var(--const-double-focus-ring, var(--comp-double-focus-ring-fallback)));
+  --comp-default-focus-visible-box-shadow: 0 0 0 2px #ffffff,
+      0 0 0 4px var(--comp-focus-ring-color);
+  box-shadow: var(--tct-btn-default-double-focus-visible-ring, var(--comp-default-focus-visible-box-shadow));
 }
 :host([color=primary]) button, :host([intent=workflow-primary]) button {
+  --comp-btn-tween: var(--tct-btn-primary-tween, 100ms ease-out);
   backdrop-filter: var(--tct-btn-primary-backdrop-filter);
+  transform-origin: center;
   --comp-background: var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)));
-  --comp-hover-background: var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg));
+  --comp-hover-background: var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg, #5e408b));
+  --comp-hover-border-color: #5e408b;
   --comp-font-color: var(--tct-btn-primary-font-color, var(--app-white, #ffffff));
-  --comp-box-shadow: var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));
-  --comp-focus-box-shadow: var(--tct-btn-primary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));
-  --comp-active-background: var(--tct-btn-primary-active-background, #0063a0);
+  --comp-box-shadow: var(--tct-btn-primary-box-shadow, none);
+  --comp-focus-box-shadow: var(--tct-btn-primary-focus-box-shadow, var(--comp-box-shadow));
+  --comp-active-background: var(--tct-btn-primary-active-background, #523578);
+  --comp-active-border-color: #523578;
   --comp-hover-outer-ring-color: var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));
   --comp-hover-inner-ring-color: var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));
   --comp-hover-box-shadow: var(
@@ -637,13 +647,14 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
   );
   --comp-active-box-shadow: var(--comp-box-shadow);
   --comp-disabled-box-shadow: var(--comp-box-shadow);
-  --comp-focus-visible-outer-ring-color: var(--tct-btn-primary-focus-visible-outer-ring-color, var(--const-focus-color));
-  --comp-focus-visible-inner-ring-color: var(--tct-btn-primary-focus-visible-inner-ring-color, var(--comp-font-color));
+  --comp-focus-visible-outer-ring-color: var(--tct-btn-primary-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
+  --comp-focus-visible-inner-ring-color: var(--tct-btn-primary-focus-visible-inner-ring-color, #ffffff);
   --comp-focus-visible-box-shadow: var(
       --tct-btn-primary-focus-visible-box-shadow,
       0 0 0 2px var(--comp-focus-visible-inner-ring-color),
       0 0 0 4px var(--comp-focus-visible-outer-ring-color)
   );
+  --comp-hover-box-shadow: var(--tct-btn-primary-hover-box-shadow, none);
   border-style: var(--tct-btn-primary-border-style, var(--comp-border-style));
   border-width: var(--tct-btn-primary-border-width, var(--comp-border-width));
   font-weight: var(--tct-btn-primary-font-weight, var(--comp-font-weight));
@@ -705,6 +716,21 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
 :host([color=primary]) button ::slotted(q2-icon), :host([intent=workflow-primary]) button ::slotted(q2-icon) {
   --t-text: var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-font-color, currentcolor)));
 }
+:host([color=primary]) button:enabled:focus-visible, :host([intent=workflow-primary]) button:enabled:focus-visible {
+  border-color: var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));
+  background: var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
+  color: var(--tct-btn-primary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
+  text-decoration: var(--tct-btn-primary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
+  box-shadow: var(--comp-focus-visible-box-shadow);
+}
+:host([color=primary]) button:enabled:active, :host([intent=workflow-primary]) button:enabled:active {
+  border-color: var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));
+  background: var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));
+  color: var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
+  text-decoration: var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
+  box-shadow: var(--comp-active-box-shadow);
+  transform: scale(var(--tct-btn-primary-active-scale, 0.97)) var(--tct-btn-primary-compositor-transform, translateZ(0));
+}
 :host([color=secondary]) button, :host([intent=workflow-secondary]) button {
   backdrop-filter: var(--tct-btn-secondary-backdrop-filter);
   --comp-background: var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));
@@ -719,9 +745,13 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
       0 0 0 2px var(--comp-hover-inner-ring-color),
       0 0 0 4px var(--comp-hover-outer-ring-color)
   );
+  --comp-hover-box-shadow: var(
+      --tct-btn-secondary-hover-box-shadow,
+      var(--tct-btn-secondary-box-shadow, none)
+  );
   --comp-active-box-shadow: var(--comp-box-shadow);
   --comp-disabled-box-shadow: var(--comp-box-shadow);
-  --comp-focus-visible-outer-ring-color: var(--tct-btn-secondary-focus-visible-outer-ring-color, var(--const-focus-color));
+  --comp-focus-visible-outer-ring-color: var(--tct-btn-secondary-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
   --comp-focus-visible-inner-ring-color: var(--tct-btn-secondary-focus-visible-inner-ring-color, var(--app-white));
   --comp-focus-visible-box-shadow: var(
       --tct-btn-secondary-focus-visible-box-shadow,
@@ -802,9 +832,13 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
       0 0 0 2px var(--comp-hover-inner-ring-color),
       0 0 0 4px var(--comp-hover-outer-ring-color)
   );
+  --comp-hover-box-shadow: var(
+      --tct-btn-destroy-hover-box-shadow,
+      var(--tct-btn-destroy-box-shadow, none)
+  );
   --comp-active-box-shadow: var(--comp-box-shadow);
   --comp-disabled-box-shadow: var(--comp-box-shadow);
-  --comp-focus-visible-outer-ring-color: var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--const-focus-color));
+  --comp-focus-visible-outer-ring-color: var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
   --comp-focus-visible-inner-ring-color: var(--tct-btn-destroy-focus-visible-inner-ring-color, var(--comp-font-color));
   --comp-focus-visible-box-shadow: var(
       --tct-btn-destroy-focus-visible-box-shadow,
@@ -877,7 +911,6 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
   --comp-background: var(--tct-btn-escape-background, var(--app-white, #ffffff));
   --comp-font-color: var(--tct-btn-escape-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));
   --comp-box-shadow: var(--tct-btn-escape-box-shadow, var(--comp-btn-fallback-box-shadow));
-  --comp-hover-box-shadow: var(--tct-btn-escape-hover-box-shadow, var(--comp-btn-fallback-box-shadow));
   --comp-focus-box-shadow: var(--tct-btn-escape-focus-box-shadow, var(--comp-btn-fallback-box-shadow));
   --comp-hover-background: var(--tct-btn-escape-hover-background, var(--comp-background-alternative));
   --comp-active-background: var(--tct-btn-escape-active-background, var(--comp-background-alternative));
@@ -889,9 +922,13 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
       0 0 0 2px var(--comp-hover-inner-ring-color),
       0 0 0 4px var(--comp-hover-outer-ring-color)
   );
+  --comp-hover-box-shadow: var(
+      --tct-btn-escape-hover-box-shadow,
+      var(--tct-btn-escape-box-shadow, none)
+  );
   --comp-active-box-shadow: var(--comp-box-shadow);
   --comp-disabled-box-shadow: var(--comp-box-shadow);
-  --comp-focus-visible-outer-ring-color: var(--tct-btn-escape-focus-visible-outer-ring-color, var(--const-focus-color));
+  --comp-focus-visible-outer-ring-color: var(--tct-btn-escape-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
   --comp-focus-visible-inner-ring-color: var(--tct-btn-escape-focus-visible-inner-ring-color, var(--comp-background));
   --comp-focus-visible-box-shadow: var(
       --tct-btn-escape-focus-visible-box-shadow,
@@ -975,9 +1012,13 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
       0 0 0 2px var(--comp-hover-inner-ring-color),
       0 0 0 4px var(--comp-hover-outer-ring-color)
   );
+  --comp-hover-box-shadow: var(
+      --tct-btn-neutral-hover-box-shadow,
+      var(--tct-btn-neutral-box-shadow, none)
+  );
   --comp-active-box-shadow: var(--comp-box-shadow);
   --comp-disabled-box-shadow: var(--comp-box-shadow);
-  --comp-focus-visible-outer-ring-color: var(--tct-btn-neutral-focus-visible-outer-ring-color, var(--const-focus-color));
+  --comp-focus-visible-outer-ring-color: var(--tct-btn-neutral-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
   --comp-focus-visible-inner-ring-color: var(--tct-btn-neutral-focus-visible-inner-ring-color, var(--comp-background));
   --comp-focus-visible-box-shadow: var(
       --tct-btn-neutral-focus-visible-box-shadow,
@@ -1059,9 +1100,13 @@ button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
       0 0 0 2px var(--comp-hover-inner-ring-color),
       0 0 0 4px var(--comp-hover-outer-ring-color)
   );
+  --comp-hover-box-shadow: var(
+      --tct-btn-neutral-text-hover-box-shadow,
+      var(--tct-btn-neutral-text-box-shadow, none)
+  );
   --comp-active-box-shadow: var(--comp-box-shadow);
   --comp-disabled-box-shadow: var(--comp-box-shadow);
-  --comp-focus-visible-outer-ring-color: var(--tct-btn-neutral-text-focus-visible-outer-ring-color, var(--const-focus-color));
+  --comp-focus-visible-outer-ring-color: var(--tct-btn-neutral-text-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
   --comp-focus-visible-inner-ring-color: var(--tct-btn-neutral-text-focus-visible-inner-ring-color, var(--app-white));
   --comp-focus-visible-box-shadow: var(
       --tct-btn-neutral-text-focus-visible-box-shadow,
@@ -1202,22 +1247,21 @@ button.intent-coin {
   box-shadow: var(--tct-btn-coin-box-shadow);
 }
 button.intent-coin:hover:not([disabled]), button.intent-coin:hover:focus:not(:active):not([disabled]) {
-  --const-double-focus-ring: 0 0 0 2px #ffffff,
-      0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6a4a9e));
   --tct-avatar-background: var(--tct-btn-coin-hover-background, var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1)));
   --tct-avatar-fallback-background: var(--tct-btn-coin-hover-background, var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1)));
   --tct-icon-stroke-primary: var(--tct-btn-coin-icon-stroke-primary, var(--t-base, #ffffff));
   --tct-avatar-text-color: var(--tct-btn-coin-avatar-text-color, var(--t-base, #ffffff));
-  box-shadow: var(--tct-btn-coin-hover-box-shadow, var(--tct-btn-coin-box-shadow, var(--const-double-focus-ring)));
+  box-shadow: var(--tct-btn-coin-hover-box-shadow, var(--tct-btn-coin-box-shadow, none));
 }
 button.intent-coin:focus:not([disabled]) {
   --const-double-focus-ring: 0;
   box-shadow: var(--tct-btn-coin-focus-box-shadow, var(--tct-btn-coin-box-shadow, 0));
 }
 button.intent-coin:focus-visible:not([disabled]) {
-  --const-double-focus-ring: 0 0 0 2px #ffffff,
-      0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6a4a9e));
-  box-shadow: var(--tct-btn-coin-focus-visible-box-shadow, var(--tct-btn-coin-focus-box-shadow, var(--tct-btn-coin-box-shadow, var(--const-double-focus-ring))));
+  --comp-coin-focus-visible-outer-ring-color: var(--tct-btn-coin-focus-visible-outer-ring-color, var(--comp-focus-ring-color));
+  --comp-coin-focus-visible-box-shadow: 0 0 0 2px #ffffff,
+      0 0 0 4px var(--comp-coin-focus-visible-outer-ring-color);
+  box-shadow: var(--tct-btn-coin-focus-visible-box-shadow, var(--comp-coin-focus-visible-box-shadow));
 }
 button.intent-coin:focus:active:not([disabled]) {
   --tct-avatar-background: var(--tct-btn-coin-active-background);
@@ -1225,6 +1269,20 @@ button.intent-coin:focus:active:not([disabled]) {
   box-shadow: none;
 }
 
+@container style(--t-prefers-motion: "reduced") {
+  :host([color=primary]) button:enabled:active,
+  :host([intent=workflow-primary]) button:enabled:active {
+    transform: none;
+  }
+}
+@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
+  @media (prefers-reduced-motion: reduce) {
+    :host([color=primary]) button:enabled:active,
+    :host([intent=workflow-primary]) button:enabled:active {
+      transform: none;
+    }
+  }
+}
 .coin-label {
   color: var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));
   font-size: var(--tct-btn-coin-label-font-size, var(--app-font-size, var(--const-px-14, 14px)));

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

@@ -49,7 +49,7 @@ const focusCase = (name, html, theme) => {
         await expect(page).toHaveScreenshot(`${name}--${theme}.png`);
     });
 };
-const activeCase = (name, html, theme) => {
+const activeCase = (name, html, theme, settleAfterMs = 50) => {
     test(`${name} — ${theme}`, async ({ page }) => {
         await setupPage(page, html, { theme });
         const btn = page.locator('q2-btn');
@@ -58,7 +58,7 @@ const activeCase = (name, html, theme) => {
             throw new Error('q2-btn bounding box unavailable');
         await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
         await page.mouse.down();
-        await page.waitForTimeout(50);
+        await page.waitForTimeout(settleAfterMs);
         await expect(page).toHaveScreenshot(`${name}--${theme}.png`);
         await page.mouse.up();
     });
@@ -69,7 +69,8 @@ test.describe('q2-btn label+icon — intents × states × themes', () => {
             restingCase(`q2-btn--${intent}--resting`, labelAndIconHtml(intent), theme);
             hoverCase(`q2-btn--${intent}--hover`, labelAndIconHtml(intent), theme);
             focusCase(`q2-btn--${intent}--focus`, labelAndIconHtml(intent), theme);
-            activeCase(`q2-btn--${intent}--active`, labelAndIconHtml(intent), theme);
+            const settleAfterMs = intent === 'workflow-primary' && theme === 'default-2026' ? 125 : 50;
+            activeCase(`q2-btn--${intent}--active`, labelAndIconHtml(intent), theme, settleAfterMs);
         }
     }
 });
@@ -91,6 +92,158 @@ test.describe('q2-btn intents — sizes × themes (resting)', () => {
         }
     }
 });
+test.describe('q2-btn workflow-primary — updated states', () => {
+    for (const size of SIZES) {
+        activeCase(`q2-btn--workflow-primary--size-${size}--active`, sizeHtml('workflow-primary', size), 'default-2026', 125);
+    }
+    restingCase('q2-btn--workflow-primary--disabled', '<q2-btn intent="workflow-primary" disabled><span>My Button</span></q2-btn>', 'default-2026');
+    test('uses the proposed-primary pointer and active contract', async ({ page }) => {
+        await setupPage(page, labelAndIconHtml('workflow-primary'), {
+            theme: 'default-2026',
+            motion: 'normal',
+        });
+        const host = page.locator('q2-btn');
+        const button = host.locator('button');
+        await host.hover();
+        await page.waitForTimeout(125);
+        expect(await button.evaluate(element => getComputedStyle(element).backgroundColor)).toBe('rgb(94, 64, 139)');
+        expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toBe('none');
+        await host.click();
+        expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toBe('none');
+        const box = await host.boundingBox();
+        if (!box)
+            throw new Error('q2-btn bounding box unavailable');
+        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+        await page.mouse.down();
+        await page.waitForTimeout(125);
+        expect(await button.evaluate(element => getComputedStyle(element).backgroundColor)).toBe('rgb(82, 53, 120)');
+        expect(await button.evaluate(element => getComputedStyle(element).transform)).toBe('matrix(0.97, 0, 0, 0.97, 0, 0)');
+        await page.mouse.up();
+    });
+    test('uses the proposed-primary keyboard focus contract', async ({ page }) => {
+        await setupPage(page, labelAndIconHtml('workflow-primary'), { theme: 'default-2026' });
+        const button = page.locator('q2-btn').locator('button');
+        await page.keyboard.press('Tab');
+        await expect(button).toBeFocused();
+        await page.waitForTimeout(125);
+        expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toContain('rgb(106, 74, 158)');
+    });
+    test('removes the Flat hover ring', async ({ page }) => {
+        await setupPage(page, labelAndIconHtml('workflow-primary'), { theme: 'flat' });
+        const host = page.locator('q2-btn');
+        const button = host.locator('button');
+        await host.hover();
+        await page.waitForTimeout(125);
+        expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toBe('none');
+    });
+    for (const theme of ['flat', 'neo-brutalist']) {
+        test(`does not add a ${theme} pointer focus ring`, async ({ page }) => {
+            await setupPage(page, labelAndIconHtml('workflow-primary'), { theme });
+            const host = page.locator('q2-btn');
+            const button = host.locator('button');
+            await page.waitForTimeout(125);
+            const restingShadow = await button.evaluate(element => getComputedStyle(element).boxShadow);
+            await host.click();
+            await page.mouse.move(0, 0);
+            await page.waitForTimeout(125);
+            await expect(button).toBeFocused();
+            expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toBe(restingShadow);
+        });
+    }
+    test('removes only the active scale for reduced motion', async ({ page }) => {
+        await page.emulateMedia({ reducedMotion: 'reduce' });
+        await setupPage(page, labelAndIconHtml('workflow-primary'), { theme: 'default-2026' });
+        const host = page.locator('q2-btn');
+        const button = host.locator('button');
+        const box = await host.boundingBox();
+        if (!box)
+            throw new Error('q2-btn bounding box unavailable');
+        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+        await page.mouse.down();
+        await page.waitForTimeout(125);
+        expect(await button.evaluate(element => getComputedStyle(element).backgroundColor)).toBe('rgb(82, 53, 120)');
+        expect(await button.evaluate(element => getComputedStyle(element).transform)).toBe('none');
+        await page.mouse.up();
+    });
+});
+test.describe('q2-btn coin — updated hover state', () => {
+    for (const theme of [
+        'default-2026',
+        'flat',
+        'high-visibility',
+        'minimalist',
+        'neo-brutalist',
+        'standard',
+    ]) {
+        test(`does not add a ${theme} hover ring`, async ({ page }) => {
+            await setupPage(page, coinHtml(), { theme });
+            const host = page.locator('q2-btn');
+            const button = host.locator('button');
+            await host.hover();
+            expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toBe('none');
+        });
+    }
+});
+test.describe('q2-btn coin — theme focus color × aesthetics', () => {
+    for (const theme of THEMES) {
+        test(`uses the theme focus color in ${theme}`, async ({ page }) => {
+            await setupPage(page, coinHtml(), { theme });
+            await page.locator('html').evaluate(element => element.style.setProperty('--t-focus-color', '#123456'));
+            const button = page.locator('q2-btn').locator('button');
+            await page.keyboard.press('Tab');
+            await expect(button).toBeFocused();
+            await page.waitForTimeout(125);
+            expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toContain('rgb(18, 52, 86)');
+        });
+    }
+});
+test.describe('q2-btn intents — consistent focus ring', () => {
+    for (const intent of INTENTS) {
+        test(`uses the theme focus color for ${intent}`, async ({ page }) => {
+            await setupPage(page, labelAndIconHtml(intent), { theme: 'default-2026' });
+            await page.locator('html').evaluate(element => element.style.setProperty('--t-focus-color', '#123456'));
+            const button = page.locator('q2-btn').locator('button');
+            await page.keyboard.press('Tab');
+            await expect(button).toBeFocused();
+            await page.waitForTimeout(125);
+            expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toContain('rgb(18, 52, 86)');
+        });
+    }
+    test('prefers the per-intent outer ring color', async ({ page }) => {
+        await setupPage(page, '<q2-btn intent="workflow-destroy" style="--tct-btn-destroy-focus-visible-outer-ring-color: #123456">My Button</q2-btn>', { theme: 'default-2026' });
+        const button = page.locator('q2-btn').locator('button');
+        await page.keyboard.press('Tab');
+        await expect(button).toBeFocused();
+        await page.waitForTimeout(125);
+        expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toContain('rgb(18, 52, 86)');
+    });
+    test('uses the theme focus color without an intent', async ({ page }) => {
+        await setupPage(page, plainHtml(), { theme: 'default-2026' });
+        const button = page.locator('q2-btn').locator('button');
+        await page.keyboard.press('Tab');
+        await expect(button).toBeFocused();
+        await page.waitForTimeout(125);
+        expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toContain('rgb(106, 74, 158)');
+    });
+    test('falls back to the constant focus color when the theme token is unavailable', async ({ page }) => {
+        await setupPage(page, '<q2-btn intent="workflow-primary">My Button</q2-btn>', { theme: 'default-2026' });
+        await page.locator('html').evaluate(element => element.style.setProperty('--t-focus-color', 'initial'));
+        const button = page.locator('q2-btn').locator('button');
+        await page.keyboard.press('Tab');
+        await expect(button).toBeFocused();
+        await page.waitForTimeout(125);
+        expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toContain('rgb(0, 102, 204)');
+    });
+    test('uses the constant focus color fallback for coin', async ({ page }) => {
+        await setupPage(page, coinHtml(), { theme: 'default-2026' });
+        await page.locator('html').evaluate(element => element.style.setProperty('--t-focus-color', 'initial'));
+        const button = page.locator('q2-btn').locator('button');
+        await page.keyboard.press('Tab');
+        await expect(button).toBeFocused();
+        await page.waitForTimeout(125);
+        expect(await button.evaluate(element => getComputedStyle(element).boxShadow)).toContain('rgb(0, 102, 204)');
+    });
+});
 test.describe('q2-btn plain (no intent) — states × themes', () => {
     for (const theme of THEMES) {
         restingCase('q2-btn--plain--resting', plainHtml(), theme);

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

@@ -93,6 +93,7 @@ button {
  * @prop --tct-calendar-margin-bottom: (<length-percentage>) Controls the bottom margin of the calendar host when --tct-calendar-margin is not set.
  * @prop --tct-calendar-popover-padding: (<length-percentage>+) Controls the inner padding of the calendar popover.
  * @prop --tct-calendar-label-padding: (<length-percentage>+) Controls the inner padding of the calendar input label.
+ * @prop --tct-calendar-icon-size: (<length>) Controls the size of the calendar input icon.
  * @prop --tct-calendar-label-font-size: (<length-percentage>) Controls the font size of the calendar input label.
  * @prop --tct-calendar-month-font-size: (<length-percentage>) Controls the font size of the calendar month heading.
  * @prop --tct-calendar-month-font-weight: (<number>) Controls the font weight of the calendar month heading.
@@ -141,6 +142,8 @@ click-elsewhere {
 q2-input {
   margin: 0;
   cursor: pointer;
+  letter-spacing: inherit;
+  --tct-input-icon-size: var(--tct-calendar-icon-size, var(--const-px-18, 18px));
   --tct-input-btn-hover-background: var(--tct-calendar-btn-hover-background, var(--app-gray-l3, #f2f2f2));
   --tct-input-btn-icon-stroke-primary: var(--tct-calendar-btn-icon-stroke-primary, var(--app-gray, #747474));
   --tct-input-btn-icon-stroke-secondary: var(--tct-calendar-btn-icon-stroke-secondary, var(--app-gray, #747474));

package/dist/collection/components/q2-calendar/q2-calendar.js

@@ -351,6 +351,7 @@ export class Q2Calendar {
     }
     handleClear() {
         mirrorEmit(this, ['change', 'tctChange'], { value: null });
+        this.internalError = '';
         this.value = null;
         this.typedValue = '';
     }
@@ -496,6 +497,7 @@ export class Q2Calendar {
         // resetting by empty string
         if (newValue === '') {
             this.value = undefined;
+            this.internalError = '';
             this.setHints({ isValid: true, message: this.defaultHintMessage, messageType: 'info' });
             return;
         }
@@ -801,12 +803,12 @@ export class Q2Calendar {
     }
     renderInputField() {
         const { isTypeable, label } = this;
-        return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, valid: this.valid, ariaExpanded: `${!!this.open}`, ariaControls: "calendar-popover", ariaHaspopup: "dialog", hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: e => e.stopImmediatePropagation(), onTctChange: e => e.stopImmediatePropagation(), onInput: e => e.stopImmediatePropagation(), onTctInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : this.displayFormat || this.formatModifier, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle", _role: "combobox", _preventEntry: !isTypeable }, isTypeable && (h("q2-btn", { ref: el => (this.btnCalendarToggle = el), slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: loc('tecton.element.calendar.toggleAriaLabel', [
+        return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, valid: this.valid, ariaExpanded: isTypeable ? undefined : `${!!this.open}`, ariaControls: isTypeable ? undefined : 'calendar-popover', ariaHaspopup: isTypeable ? undefined : 'dialog', hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: e => e.stopImmediatePropagation(), onTctChange: e => e.stopImmediatePropagation(), onInput: e => e.stopImmediatePropagation(), onTctInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : this.displayFormat || this.formatModifier, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle", pseudo: !isTypeable, _role: isTypeable ? undefined : 'combobox', _preventEntry: !isTypeable }, isTypeable && (h("q2-btn", { ref: el => (this.btnCalendarToggle = el), slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: loc('tecton.element.calendar.toggleAriaLabel', [
                 label ? loc(label) : loc('tecton.element.calendar.defaultLabel'),
-            ]), ariaExpanded: `${!!this.open}`, "hide-label": true, disabled: !!this.disabled || !!this.readonly }, h("q2-icon", { type: "calendar" })))));
+            ]), ariaExpanded: `${!!this.open}`, ariaHasPopup: "dialog", "hide-label": true, disabled: !!this.disabled || !!this.readonly }, h("q2-icon", { type: "calendar" })))));
     }
     render() {
-        return (h("click-elsewhere", { key: 'e7bcb2f1aec6ca1149742b0b3edc0a7bbf9ce925', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), h("q2-popover", { key: 'c80c5d1ecfb42a319bba294b20f519a2be6808e1', ref: el => (this.popoverElement = el), id: "calendar-popover", controlElement: this.innerInputContainer, open: this.open, direction: this.popoverDirection, minHeight: this.popoverMinHeight, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: true }, this.renderHintField(), this.renderCalendarPopover())));
+        return (h("click-elsewhere", { key: '89bfe4685021ec4fb3bf1abe1e1d5127c4712582', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), h("q2-popover", { key: '9508bb1a1d9d05b133df8e1842d1b9fd72f40937', ref: el => (this.popoverElement = el), id: "calendar-popover", controlElement: this.innerInputContainer, open: this.open, direction: this.popoverDirection, minHeight: this.popoverMinHeight, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: true }, this.renderHintField(), this.renderCalendarPopover())));
     }
     static get is() { return "q2-calendar"; }
     static get encapsulation() { return "shadow"; }