q2-tecton-elements 1.10.5 → 1.10.8

package/dist/esm/q2-checkbox-group.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
-import { c as createGuid, l as loc } from './index-476b86cc.js';
+import { c as createGuid, l as loc } from './index-ec6660af.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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{margin-top:var(--tct-scale-2, var(--app-scale-2, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(\n        to right,\n        var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))),\n        var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgba(255, 255, 255)))\n    )}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(\n        --tct-input-label-optional-margin-left,\n        var(--tct-scale-1, var(--app-scale-1, 5px))\n    );color:var(\n        --tct-input-label-optional-font-color,\n        var(\n            --tct-a11y-color,\n            var(\n                --t-a11y-gray-color,\n                var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n            )\n        )\n    );font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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{margin-top:var(--tct-scale-2, var(--app-scale-2, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, white)))}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";
 
 const Q2CheckboxGroup = class {
   constructor(hostRef) {

package/dist/esm/q2-checkbox.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
-import { c as createGuid, h as handleAriaLabel, l as loc } from './index-476b86cc.js';
+import { c as createGuid, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement, l as loc } from './index-ec6660af.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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;padding:var(--tct-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px))) 0}label{display:flex;align-items:center;cursor:pointer;--comp-checkbox-outer-stroke-color:var(\n        --tct-checkbox-outer-stroke-color,\n        var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))\n    );--comp-checkbox-outer-fill-color:var(\n        --tct-checkbox-outer-fill-color,\n        var(--tct-white, var(--app-white, #ffffff))\n    );--comp-checkbox-checked-color:var(\n        --tct-checkbox-check-stroke-color,\n        var(\n            --t-checkbox-fill,\n            var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))\n        )\n    )}input:disabled+label{opacity:var(\n        --tct-checkbox-disabled-opacity,\n        var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))\n    )}.checkbox-icon{height:var(--tct-checkbox-size, 20px);width:var(--tct-checkbox-size, 20px);border-radius:var(\n        --tct-checkbox-outer-border-radius,\n        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n    );stroke:var(--comp-checkbox-outer-stroke-color);color:var(--comp-checkbox-outer-stroke-color);--t-icon-stroke-primary:var(--comp-checkbox-outer-stroke-color);stroke-width:var(--tct-checkbox-outer-stroke-width, 2);fill:var(--comp-checkbox-outer-fill-color);flex-shrink:0}input:focus+label .checkbox-icon{box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}.checkbox-fill{stroke:var(--comp-checkbox-checked-color)}input:checked+label .checkbox-icon{fill:var(--tct-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color));stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color))}input:focus+label .checkbox-icon{stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color))}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, 2.5);stroke-linecap:round;stroke-linejoin:round}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, 3.5)}.q2-checkbox-label-content{font-weight:var(--tct-checkbox-font-weight, 400);flex:1 1 auto;width:calc(\n        100% - var(--tct-checkbox-size, 20px) - var(--tct-scale-2, var(--app-scale-2, 10px))\n    )}input:checked+label .q2-checkbox-label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}:host([type='favorite']){--scoped-checkbox-favorite-stroke-color:var(\n        --tct-checkbox-favorite-stroke-color,\n        var(--t-textA, rgba(77, 77, 77, 0.77))\n    );--scoped-checkbox-favorite-fill-color:var(\n        --tct-checkbox-favorite-fill-color,\n        var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))\n    )}:host([type='favorite']) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, 1);--tct-icon-stroke-primary:var(--scoped-checkbox-favorite-stroke-color);width:var(--tct-checkbox-size, 20px);height:var(--tct-checkbox-size, 20px);transition:fill var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        stroke var(--tct-tween-2, var(--app-tween-2, 0.4s ease))}:host([type='favorite']:focus-within) input+label .checkbox-icon,:host([type='favorite']:hover) input+label .checkbox-icon{--tct-icon-stroke-primary:var(--scoped-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, 2)}:host([type='favorite']) input:checked+label .checkbox-icon{--tct-icon-stroke-primary:var(--scoped-checkbox-favorite-fill-color);fill:var(--scoped-checkbox-favorite-fill-color);transition:fill var(--tct-tween-1, var(--app-tween-1, 0.2s ease)),\n        color var(--tct-tween-1, var(--app-tween-1, 0.2s ease)),\n        stroke var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type='favorite']:focus-within) input:checked+label .checkbox-icon,:host([type='favorite']:hover) input:checked+label .checkbox-icon{--tct-icon-stroke-primary:var(--scoped-checkbox-favorite-stroke-color)}:host([alignment='right']) label,:host([type='toggle']:not([alignment='left'])) label{flex-flow:row-reverse}.checkbox-icon,:host([type='toggle'][alignment='left']) .toggle-svg{margin-right:var(--tct-scale-2, var(--app-scale-2, 10px));margin-left:0}:host([alignment='right']) .checkbox-icon,.toggle-svg{margin-right:0;margin-left:var(--tct-scale-2, var(--app-scale-2, 10px))}:host([type='toggle']) .toggle-svg{height:30px;width:46px;position:relative}:host([type='toggle']) .toggle-track,:host([type='toggle']) .toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}:host([type='toggle']) .toggle-track{fill:var(\n        --tct-checkbox-toggle-track-color,\n        var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))\n    );height:14px;width:46px}:host([type='toggle']) input:checked+label .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color));opacity:0.5}:host([type='toggle']) .toggle-indicator{transition:left var(--tct-tween-1, var(--app-tween-1, 0.2s ease));height:30px;width:30px;left:0;border-radius:50%}:host([type='toggle']) input:checked+label .toggle-indicator{left:21px}:host([type='toggle']) .toggle-circle{fill:var(\n        --tct-checkbox-toggle-circle-color,\n        var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n    )}:host([type='toggle']) input:checked+label .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color))}:host([type='toggle']) input:checked+label .off,:host([type='toggle']) input:not(:checked)+label .on{opacity:0}:host([type='toggle']) input:focus+label .toggle-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color));stroke-width:10px;stroke-opacity:0.5}:host([type='toggle']) input:not(:checked):focus+label .toggle-circle{stroke:var(\n        --tct-checkbox-toggle-circle-color,\n        var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n    )}:host([type='toggle']) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff)));transition:opacity var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type='toggle']) input:checked+label .checked-fill{stroke:var(\n        --tct-checkbox-toggle-checked-icon-stroke,\n        var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))\n    )}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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;padding:var(--tct-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px))) 0}label{display:flex;align-items:center;cursor:pointer;--comp-checkbox-outer-stroke-color:var(\n      --tct-checkbox-outer-stroke-color,\n      var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))\n  );--comp-checkbox-outer-fill-color:var(\n      --tct-checkbox-outer-fill-color,\n      var(--tct-white, var(--app-white, #ffffff))\n  );--comp-checkbox-checked-color:var(\n      --tct-checkbox-check-stroke-color,\n      var(\n          --t-checkbox-fill,\n          var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))\n      )\n  )}input:disabled+label{opacity:var(--tct-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)))}.checkbox-icon{height:var(--tct-checkbox-size, 20px);width:var(--tct-checkbox-size, 20px);border-radius:var(--tct-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));stroke:var(--comp-checkbox-outer-stroke-color);color:var(--comp-checkbox-outer-stroke-color);--t-icon-stroke-primary:var(--comp-checkbox-outer-stroke-color);stroke-width:var(--tct-checkbox-outer-stroke-width, 2);fill:var(--comp-checkbox-outer-fill-color);flex-shrink:0}input:focus+label .checkbox-icon{box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}.checkbox-fill{stroke:var(--comp-checkbox-checked-color)}input:checked+label .checkbox-icon{fill:var(--tct-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color));stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color))}input:focus+label .checkbox-icon{stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color))}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, 2.5);stroke-linecap:round;stroke-linejoin:round}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, 3.5)}.q2-checkbox-label-content{font-weight:var(--tct-checkbox-font-weight, 400);flex:1 1 auto;width:calc( 100% - var(--tct-checkbox-size, 20px) - var(--tct-scale-2, var(--app-scale-2, 10px)) )}input:checked+label .q2-checkbox-label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}:host([type=favorite]){--scoped-checkbox-favorite-stroke-color:var(\n      --tct-checkbox-favorite-stroke-color,\n      var(--t-textA, rgba(77, 77, 77, 0.77))\n  );--scoped-checkbox-favorite-fill-color:var(\n      --tct-checkbox-favorite-fill-color,\n      var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))\n  )}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, 1);--tct-icon-stroke-primary:var(--scoped-checkbox-favorite-stroke-color);width:var(--tct-checkbox-size, 20px);height:var(--tct-checkbox-size, 20px);transition:fill var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), stroke var(--tct-tween-2, var(--app-tween-2, 0.4s ease))}:host([type=favorite]:focus-within) input+label .checkbox-icon,:host([type=favorite]:hover) input+label .checkbox-icon{--tct-icon-stroke-primary:var(--scoped-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, 2)}:host([type=favorite]) input:checked+label .checkbox-icon{--tct-icon-stroke-primary:var(--scoped-checkbox-favorite-fill-color);fill:var(--scoped-checkbox-favorite-fill-color);transition:fill var(--tct-tween-1, var(--app-tween-1, 0.2s ease)), color var(--tct-tween-1, var(--app-tween-1, 0.2s ease)), stroke var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=favorite]:focus-within) input:checked+label .checkbox-icon,:host([type=favorite]:hover) input:checked+label .checkbox-icon{--tct-icon-stroke-primary:var(--scoped-checkbox-favorite-stroke-color)}:host([alignment=right]) label,:host([type=toggle]:not([alignment=left])) label{flex-flow:row-reverse}.checkbox-icon,:host([type=toggle][alignment=left]) .toggle-svg{margin-right:var(--tct-scale-2, var(--app-scale-2, 10px));margin-left:0}:host([alignment=right]) .checkbox-icon,.toggle-svg{margin-right:0;margin-left:var(--tct-scale-2, var(--app-scale-2, 10px))}:host([type=toggle]) .toggle-svg{height:30px;width:46px;position:relative}:host([type=toggle]) .toggle-track,:host([type=toggle]) .toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}:host([type=toggle]) .toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));height:14px;width:46px}:host([type=toggle]) input:checked+label .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color));opacity:0.5}:host([type=toggle]) .toggle-indicator{transition:left var(--tct-tween-1, var(--app-tween-1, 0.2s ease));height:30px;width:30px;left:0;border-radius:50%}:host([type=toggle]) input:checked+label .toggle-indicator{left:21px}:host([type=toggle]) .toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999)))))}:host([type=toggle]) input:checked+label .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color))}:host([type=toggle]) input:checked+label .off,:host([type=toggle]) input:not(:checked)+label .on{opacity:0}:host([type=toggle]) input:focus+label .toggle-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color));stroke-width:10px;stroke-opacity:0.5}:host([type=toggle]) input:not(:checked):focus+label .toggle-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999)))))}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff)));transition:opacity var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=toggle]) input:checked+label .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff))))}";
 
 const Q2Checkbox = class {
   constructor(hostRef) {
@@ -22,12 +22,20 @@ const Q2Checkbox = class {
   componentWillLoad() {
     handleAriaLabel(this);
   }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
   //////// Host Element Events ////////
   defaultChangeHandler(event) {
     if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {
       this.checked = event.detail.checked;
     }
   }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.hostElement.shadowRoot.querySelector('input').focus();
+  }
   ////////// OBSERVERS //////////
   ariaLabelObserver() {
     handleAriaLabel(this);

package/dist/esm/q2-dropdown-item.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, g as getElement } from './index-be8376c0.js';
-import { h as handleAriaLabel, l as loc } from './index-476b86cc.js';
+import { h as handleAriaLabel, l as loc } from './index-ec6660af.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.dropdown-separator{margin:0 var(--tct-scale-1, var(--app-scale-1, 5px));border-bottom:1px solid\n        var(\n            --tct-dropdown-item-separator-color,\n            var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))\n        )}.dropdown-item-wrapper{display:flex}.dropdown-item{min-height:44px;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, 2px)}.dropdown-item-content{padding:12px var(--tct-scale-3, var(--app-scale-3, 15px));text-align:left;background-color:var(\n        --tct-dropdown-item-bg,\n        var(--tct-white, var(--t-base, var(--app-white, #ffffff)))\n    );color:var(--tct-dropdown-item-font-color, inherit);transition:background-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));overflow:hidden;text-overflow:ellipsis;flex:1}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background-color:var(\n        --tct-dropdown-item-selected-bg,\n        var(\n            --tct-gray-14,\n            var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))\n        )\n    );color:var(--tct-dropdown-item-selected-font-color, inherit)}.remove-dropdown-item{flex:0 0 44px;margin:2px}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.dropdown-separator{margin:0 var(--tct-scale-1, var(--app-scale-1, 5px));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))))}.dropdown-item-wrapper{display:flex}.dropdown-item{min-height:44px;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, 2px)}.dropdown-item-content{padding:12px var(--tct-scale-3, var(--app-scale-3, 15px));text-align:left;background-color:var(--tct-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))));color:var(--tct-dropdown-item-font-color, inherit);transition:background-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));overflow:hidden;text-overflow:ellipsis;flex:1}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background-color:var(--tct-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))));color:var(--tct-dropdown-item-selected-font-color, inherit)}.remove-dropdown-item{flex:0 0 44px;margin:2px}";
 
 const Q2DropdownItem = class {
   constructor(hostRef) {

package/dist/esm/q2-dropdown.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, F as Fragment, g as getElement } from './index-be8376c0.js';
-import { s as setPopProperties, h as handleAriaLabel, l as loc } from './index-476b86cc.js';
+import { s as setPopProperties, h as handleAriaLabel, i as isEventFromElement, o as overrideFocus, l as loc } from './index-ec6660af.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white);color:var(--t-font-color);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1);height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1);border-radius:var(--tct-dropdown-element-br, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--app-scale-1x, 5px));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--app-border-radius-1, 3px));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-a11y-gray-color, #747474));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible;margin-bottom:var(--app-scale-2)}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host{display:inline-flex}.dropdown-container{position:relative;display:block}.dropdown-button-content{display:flex;align-items:center}.dropdown-button.unstyled .dropdown-button-content{padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px))}.q2-element-dropdown{width:var(--tct-user-dropdown-width, 175px)}.q2-element-dropdown.dropup{bottom:40px}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white);color:var(--t-font-color);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1);height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host{display:inline-flex}.dropdown-container{position:relative;display:block}.dropdown-button-content{display:flex;align-items:center}.dropdown-button.unstyled .dropdown-button-content{padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px))}.q2-element-dropdown{width:var(--tct-dropdown-width, var(--t-dropdown-width, 175px))}.q2-element-dropdown.dropup{bottom:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px))}q2-btn[color=primary]~.q2-element-dropdown.dropup,q2-btn[intent=workflow-primary]~.q2-element-dropdown.dropup{bottom:calc( var-list(var-prefixer(btn-icon-height), 44px) + var-list(var-prefixer(btn-primary-border-width), 0) )}q2-btn[color=secondary]~.q2-element-dropdown.dropup,q2-btn[intent=workflow-secondary]~.q2-element-dropdown.dropup{bottom:calc( var-list(var-prefixer(btn-icon-height), 44px) + var-list(var-prefixer(btn-secondary-border-width), 0) )}q2-btn[intent=neutral]~.q2-element-dropdown.dropup{bottom:calc( var-list(var-prefixer(btn-icon-height), 44px) + var-list(var-prefixer(btn-neutral-border-width), 0) )}";
 
 const Q2Dropdown = class {
   constructor(hostRef) {
@@ -209,12 +209,18 @@ const Q2Dropdown = class {
   resolvedTypeHandler() {
     this.orchestrateResolvedMenuItems();
   }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.controlElement.shadowRoot.querySelector('button').focus();
+  }
   ///// Lifecycle Hooks ////////
   componentWillLoad() {
     handleAriaLabel(this);
   }
   componentDidLoad() {
     this.orchestrateResolvedMenuItems();
+    overrideFocus(this.hostElement);
   }
   componentDidRender() {
     setTimeout(() => {

package/dist/esm/q2-editable-field.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
-import { l as loc, h as handleAriaLabel } from './index-476b86cc.js';
+import { l as loc, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement } from './index-ec6660af.js';
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2, 10px)) 0 0}q2-input{flex:1 0 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}q2-btn{flex:0 0 44px}dl{margin:var(--tct-scale-0, var(--app-scale-0, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0, 0));display:flex;align-items:center}";
 
@@ -48,11 +48,11 @@ const Q2EditableField = class {
       });
     };
     this.editClick = (event) => {
-      event.stopPropagation();
+      event === null || event === void 0 ? void 0 : event.stopPropagation();
       this.change.emit({ editing: true, name: 'edit' });
     };
     this.cancelClick = (event) => {
-      event && event.stopPropagation();
+      event === null || event === void 0 ? void 0 : event.stopPropagation();
       this.change.emit({ editing: false, name: 'cancel' });
     };
   }
@@ -67,6 +67,9 @@ const Q2EditableField = class {
     this.scheduledAfterRender.forEach(fn => fn());
     this.scheduledAfterRender = [];
   }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
   //////// OBSERVERS //////////
   ariaLabelObserver() {
     handleAriaLabel(this);
@@ -95,19 +98,31 @@ const Q2EditableField = class {
     return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;
   }
   ///////// HOST ELEMENT EVENTS //////
-  onHostElementChange(e) {
-    if (event.target === this.hostElement && !this.hostElement.onchange) {
-      if (e.detail.name === 'save') {
-        this.value = e.detail.value;
-      }
-      this.editing = e.detail.editing;
+  onHostElementChange(event) {
+    if (!isEventFromElement(event, this.hostElement) || this.hostElement.onchange)
+      return;
+    switch (event.detail.name) {
+      case 'save':
+        this.value = event.detail.value;
+        break;
+      case 'cancel':
+        this.q2InputElement.value = this.value;
+        break;
     }
+    this.editing = event.detail.editing;
+  }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.hostElement.shadowRoot
+      .querySelector(this.editing ? 'q2-input' : 'q2-btn.begin-edit')
+      .focus();
   }
   render() {
     return (h("div", null, this.generateEditStateDOM(), this.generateReadStateDOM()));
   }
   generateEditStateDOM() {
-    return (h("div", { class: this.wrapperClass, hidden: !this.editing }, h("q2-input", { label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: (Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined, errors: (Array.isArray(this.errors) && this.errors.map(str => loc(str))) ||
+    return (h("div", { class: this.wrapperClass, hidden: !this.editing }, h("q2-input", { ref: el => (this.q2InputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: (Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined, errors: (Array.isArray(this.errors) && this.errors.map(str => loc(str))) ||
         undefined, type: this.type, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onInput: this.inputInput, onChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }), h("q2-btn", { class: "cancel-edit", label: `${loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: this.cancelClick }, h("q2-icon", { type: "close" })), h("q2-btn", { class: "save-edit", label: `${loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: this.saveClick }, h("q2-icon", { type: "checkmark" }))));
   }
   generateReadStateDOM() {
@@ -117,7 +132,7 @@ const Q2EditableField = class {
     return (h("div", { class: this.wrapperClass, hidden: this.editing }, h("div", { class: "text-wrapper" }, this.value), this.generateEditBtn()));
   }
   generateEditBtn() {
-    return (h("q2-btn", { class: "begin-edit", label: `${loc('tecton.element.editableField.edit')} ${this.locLabel}`, "hide-label": true, "test-id": "editButton", onClick: this.editClick }, h("q2-icon", { type: "edit" })));
+    return (h("q2-btn", { ref: el => (this.q2EditBtnElement = el), class: "begin-edit", label: `${loc('tecton.element.editableField.edit')} ${this.locLabel}`, "hide-label": true, "test-id": "editButton", onClick: this.editClick }, h("q2-icon", { type: "edit" })));
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/q2-icon.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-be8376c0.js';
-import { c as createGuid } from './index-476b86cc.js';
-import { i as icons } from './icons-a3817842.js';
+import { c as createGuid } from './index-ec6660af.js';
+import { i as icons } from './icons-3ee662ea.js';
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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;height:var(--tct-icon-size, 24px);width:var(--tct-icon-size, 24px);position:relative;fill:none}svg{display:block;position:absolute;top:0;left:0;stroke-width:var(--tct-icon-stroke-width, var(--t-icon-stroke-width, 1.5));stroke-linecap:var(--tct-icon-cap, var(--t-icon-cap, round));stroke-linejoin:var(--tct-icon-cap, var(--t-icon-cap, round))}.stroke-primary{stroke:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentColor)))}.stroke-secondary{stroke:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentColor)))}.fill-primary{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentColor)))}.filled{fill:var(--tct-icon-fill, var(--t-icon-fill, none))}.uniform{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentColor))}:host([type=info]){--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]){--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--t-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]){--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));--t-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}:host([type=error]){--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--t-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}";
 

package/dist/esm/q2-input.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
-import { c as createGuid, b as setMessageHeight, h as handleAriaLabel, l as loc, m as messagesDOM, d as labelDOM } from './index-476b86cc.js';
+import { c as createGuid, b as setMessageHeight, h as handleAriaLabel, o as overrideFocus, l as loc, i as isEventFromElement, m as messagesDOM, d as labelDOM } from './index-ec6660af.js';
 
 function formatNumber(val = '', options = {
   prefix: '',
@@ -2863,7 +2863,7 @@ const formatCreditCard = {
   unknownFormatter
 };
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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;margin-top:var(--tct-input-margin-top, var(--app-scale-6x, 30px));margin-bottom:var(--tct-input-margin-bottom, var(--app-scale-6x, 30px));font-size:var(--tct-input-font-size, var(--app-font-size, inherit))}:host([hidden]){display:none}.field-container,.input-container{position:relative}label{display:block;padding-left:var(--tct-input-label-padding-left, 0);padding-right:var(--tct-input-label-padding-right, 0);margin-top:var(--tct-input-label-margin-top, 0);margin-bottom:var(\n        --tct-input-label-margin-bottom,\n        var(--tct-scale-1, var(--app-scale-1, 5px))\n    );color:var(--tct-input-label-font-color, inherit);font-size:var(--tct-input-label-font-size, inherit);font-weight:var(--tct-input-label-font-weight, 600);text-transform:var(--tct-input-label-text-transform, none);letter-spacing:var(--tct-input-label-letter-spacing, normal);transition:color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.optional-tag{margin-left:var(\n        --tct-input-label-optional-margin-left,\n        var(--tct-scale-1, var(--app-scale-1, 5px))\n    );color:var(\n        --tct-input-label-optional-font-color,\n        var(--tct-a11y-color, var(--t-a11y-gray-color, #767676))\n    );font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.input-container{background-color:var(\n        --tct-input-bg,\n        var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2)))\n    );display:flex;align-items:center;--comp-input-horizontal-gap:var(\n        --tct-input-horizontal-gap,\n        var(--t-input-horizontal-gap, 8px)\n    );--comp-input-border-top-left-radius:var(\n        --tct-input-border-top-left-radius,\n        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n    );--comp-input-border-top-right-radius:var(\n        --tct-input-border-top-right-radius,\n        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n    );--comp-input-border-bottom-right-radius:var(\n        --tct-input-border-bottom-right-radius,\n        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n    );--comp-input-border-bottom-left-radius:var(\n        --tct-input-border-bottom-left-radius,\n        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n    );--comp-input-border-radius:var(--comp-input-border-top-left-radius)\n        var(--comp-input-border-top-right-radius) var(--comp-input-border-bottom-right-radius)\n        var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px)\n        var(--tct-input-border-right-width, 1px) var(--tct-input-border-bottom-width, 1px)\n        var(--tct-input-border-left-width, 1px);--comp-input-focus-border-width:var(--tct-input-focus-border-top-width, 1px)\n        var(--tct-input-focus-border-right-width, 1px)\n        var(--tct-input-focus-border-bottom-width, 1px)\n        var(--tct-input-focus-border-left-width, 1px);--comp-input-prefix-clearance:calc(\n        3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px)\n    );--comp-input-icon-clearance:34px;--comp-input-min-height:44px;border-width:var(--comp-input-border-width);border-style:solid;border-color:var(\n        --tct-input-border-color,\n        var(--t-input-border, var(--tct-gray-11, var(--t-gray-11, #cccccc)))\n    );border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, none);transition:border-width\n            var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n        border-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n        box-shadow var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.input-field{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);height:var(--tct-input-height, 44px);width:100%;padding:0 var(--tct-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));background-color:transparent;color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)))}input{display:inline-block}.input-field:focus{outline:none;box-shadow:none}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field[type='number']{-moz-appearance:textfield}.input-container:focus-within{border-width:var(--comp-input-focus-border-width, 1px);border-color:var(\n        --tct-input-focus-border-color,\n        var(--t-input-focus, var(--tct-gray-9, var(--t-gray-9, #999999)))\n    );box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)),\n        var(--tct-input-focus-box-shadow, 0 0 transparent)}input::-ms-clear{display:none}input[type='search']::-webkit-search-decoration,input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-results-button,input[type='search']::-webkit-search-results-decoration{display:none}input::placeholder,.placeholder-text{color:var(\n        --tct-input-placeholder-font-color,\n        var(\n            --t-input-placeholder-font-color,\n            var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n        )\n    )}.pseudo-input{display:inline-flex;align-items:center}.pseudo-input span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-icons-container-left:empty{display:none}.input-icons-container-left{display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap);padding-left:var(--comp-input-horizontal-gap)}.input-icons-container-right:empty{display:none}.input-icons-container-right{display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap);padding-right:var(--comp-input-horizontal-gap)}.input-icons-container-right .btn-visibility-toggle{color:var(--tct-primary, var(--t-primary, #006eb2));font-size:12px}q2-icon{margin-top:calc(var(--tct-input-border-top-width, 1px) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, 1px) / 2);pointer-events:none;color:var(\n        --tct-input-icon-stroke-primary,\n        var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999)))\n    );--tct-icon-stroke-primary:var(\n        --tct-input-icon-stroke-primary,\n        var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n    );--t-icon-stroke-primary:var(\n        --tct-input-icon-stroke-primary,\n        var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n    )}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{margin-left:calc(var(--comp-input-horizontal-gap) * -1);margin-right:calc(var(--comp-input-horizontal-gap) * -1);width:3em;display:inline-flex;align-items:center;justify-content:center;min-height:calc(\n        var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, 1px) -\n            var(--tct-input-focus-border-bottom-width, 1px)\n    );height:calc(\n        var(--tct-input-height, 44px) - var(--tct-input-focus-border-top-width, 1px) -\n            var(--tct-input-focus-border-bottom-width, 1px)\n    );font-size:var(--tct-input-prefix-font-size, inherit);color:var(--tct-input-prefix-font-color, inherit);background-color:var(\n        --tct-input-prefix-bg,\n        var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))\n    );transition:color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n        background-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.input-prefix{border-top-left-radius:calc(\n        var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, 1px) -\n            var(--tct-input-border-left-width, 1px)\n    );border-bottom-left-radius:calc(\n        var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, 1px) -\n            var(--tct-input-border-left-width, 1px)\n    );pointer-events:none;}.input-suffix{border-top-right-radius:calc(\n        var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, 1px) -\n            var(--tct-input-border-right-width, 1px)\n    );border-bottom-right-radius:calc(\n        var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, 1px) -\n            var(--tct-input-border-right-width, 1px)\n    )}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}.pw-show{position:absolute;margin-right:var(--tct-scale-2, var(--app-scale-2, 20px))}.btn-clear{margin-top:calc(var(--tct-input-border-top-width, 1px) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, 1px) / 2);height:22px;--tct-btn-icon-width:17px;--tct-btn-icon-height:22px;--tct-icon-size:17px}.messages-container{height:0px;overflow:hidden;background-color:var(\n        --tct-message-bg,\n        var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))\n    );box-shadow:var(\n        --tct-input-message-box-shadow,\n        var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))\n    );transition:height\n        var(--tct-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));margin-top:2px;z-index:1;position:absolute;width:100%;color:var(--tct-input-messages-font-color, inherit)}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(\n        --tct-input-disabled-opacity,\n        var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))\n    )}.input-field[disabled]{cursor:not-allowed}.right-aligned .input-field{text-align:right}.has-error label{color:var(--tct-input-error-label-font-color, var(--tct-input-label-font-color, inherit))}.has-error:not(.has-focus) .input-prefix,.has-error:not(.has-focus) .input-suffix{color:var(--tct-input-error-prefix-font-color, inherit);background-color:var(\n        --tct-input-error-prefix-bg,\n        var(\n            --tct-input-bg,\n            var(\n                --t-input-bg,\n                var(--tct-gray-14, var(--app-var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))\n            )\n        )\n    )}.has-error .input-container:not(:focus-within){border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}.icon-left{width:26px;height:26px}.vertical-separator{height:calc(var(--comp-input-min-height) - 2px);border-right:1px solid\n        var(\n            --tct-input-prefix-border-color,\n            var(\n                --tct-input-border-color,\n                var(\n                    --t-input-border,\n                    var(\n                        --tct-gray-11,\n                        var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))\n                    )\n                )\n            )\n        )}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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;margin-top:var(--tct-input-margin-top, var(--app-scale-6x, 30px));margin-bottom:var(--tct-input-margin-bottom, var(--app-scale-6x, 30px));font-size:var(--tct-input-font-size, var(--app-font-size, inherit))}:host([hidden]){display:none}.field-container,.input-container{position:relative}label{display:block;padding-left:var(--tct-input-label-padding-left, 0);padding-right:var(--tct-input-label-padding-right, 0);margin-top:var(--tct-input-label-margin-top, 0);margin-bottom:var(--tct-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1, 5px)));color:var(--tct-input-label-font-color, inherit);font-size:var(--tct-input-label-font-size, inherit);font-weight:var(--tct-input-label-font-weight, 600);text-transform:var(--tct-input-label-text-transform, none);letter-spacing:var(--tct-input-label-letter-spacing, normal);transition:color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, #767676)));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.input-container{background-color:var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))));display:flex;align-items:center;--comp-input-horizontal-gap:var(\n      --tct-input-horizontal-gap,\n      var(--t-input-horizontal-gap, 8px)\n  );--comp-input-border-top-left-radius:var(\n      --tct-input-border-top-left-radius,\n      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n  );--comp-input-border-top-right-radius:var(\n      --tct-input-border-top-right-radius,\n      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n  );--comp-input-border-bottom-right-radius:var(\n      --tct-input-border-bottom-right-radius,\n      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n  );--comp-input-border-bottom-left-radius:var(\n      --tct-input-border-bottom-left-radius,\n      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n  );--comp-input-border-radius:var(--comp-input-border-top-left-radius)\n      var(--comp-input-border-top-right-radius) var(--comp-input-border-bottom-right-radius)\n      var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px)\n      var(--tct-input-border-right-width, 1px) var(--tct-input-border-bottom-width, 1px)\n      var(--tct-input-border-left-width, 1px);--comp-input-focus-border-width:var(--tct-input-focus-border-top-width, 1px)\n      var(--tct-input-focus-border-right-width, 1px)\n      var(--tct-input-focus-border-bottom-width, 1px)\n      var(--tct-input-focus-border-left-width, 1px);--comp-input-prefix-clearance:calc(\n      3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px)\n  );--comp-input-icon-clearance:34px;--comp-input-min-height:44px;border-width:var(--comp-input-border-width);border-style:solid;border-color:var(--tct-input-border-color, var(--t-input-border, var(--tct-gray-11, var(--t-gray-11, #cccccc))));border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, none);transition:border-width var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), border-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), box-shadow var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.input-field{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);height:var(--tct-input-height, 44px);width:100%;padding:0 var(--tct-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));background-color:transparent;color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)))}input{display:inline-block}.input-field:focus{outline:none;box-shadow:none}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-container:focus-within{border-width:var(--comp-input-focus-border-width, 1px);border-color:var(--tct-input-focus-border-color, var(--t-input-focus, var(--tct-gray-9, var(--t-gray-9, #999999))));box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-input-focus-box-shadow, 0 0 transparent)}input::-ms-clear{display:none}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input::placeholder,.placeholder-text{color:var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))))}.pseudo-input{display:inline-flex;align-items:center}.pseudo-input span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-icons-container-left:empty{display:none}.input-icons-container-left{display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap);padding-left:var(--comp-input-horizontal-gap)}.input-icons-container-right:empty{display:none}.input-icons-container-right{display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap);padding-right:var(--comp-input-horizontal-gap)}.input-icons-container-right .btn-visibility-toggle{color:var(--tct-primary, var(--t-primary, #006eb2));font-size:12px}q2-icon{margin-top:calc(var(--tct-input-border-top-width, 1px) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, 1px) / 2);pointer-events:none;color:var(--tct-input-icon-stroke-primary, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))));--tct-icon-stroke-primary:var(\n      --tct-input-icon-stroke-primary,\n      var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n  );--t-icon-stroke-primary:var(\n      --tct-input-icon-stroke-primary,\n      var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n  )}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{margin-left:calc(var(--comp-input-horizontal-gap) * -1);margin-right:calc(var(--comp-input-horizontal-gap) * -1);width:3em;display:inline-flex;align-items:center;justify-content:center;min-height:calc( var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, 1px) - var(--tct-input-focus-border-bottom-width, 1px) );height:calc( var(--tct-input-height, 44px) - var(--tct-input-focus-border-top-width, 1px) - var(--tct-input-focus-border-bottom-width, 1px) );font-size:var(--tct-input-prefix-font-size, inherit);color:var(--tct-input-prefix-font-color, inherit);background-color:var(--tct-input-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2)))));transition:color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), background-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.input-prefix{border-top-left-radius:calc( var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, 1px) - var(--tct-input-border-left-width, 1px) );border-bottom-left-radius:calc( var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, 1px) - var(--tct-input-border-left-width, 1px) );pointer-events:none;}.input-suffix{border-top-right-radius:calc( var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, 1px) - var(--tct-input-border-right-width, 1px) );border-bottom-right-radius:calc( var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, 1px) - var(--tct-input-border-right-width, 1px) )}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}.pw-show{position:absolute;margin-right:var(--tct-scale-2, var(--app-scale-2, 20px))}.btn-clear{margin-top:calc(var(--tct-input-border-top-width, 1px) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, 1px) / 2);height:22px;--tct-btn-icon-width:17px;--tct-btn-icon-height:22px;--tct-icon-size:17px}.messages-container{height:0px;overflow:hidden;background-color: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-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));transition:height var(--tct-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));margin-top:2px;z-index:1;position:absolute;width:100%;color:var(--tct-input-messages-font-color, inherit)}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(--tct-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)))}.input-field[disabled]{cursor:not-allowed}.right-aligned .input-field{text-align:right}.has-error label{color:var(--tct-input-error-label-font-color, var(--tct-input-label-font-color, inherit))}.has-error:not(.has-focus) .input-prefix,.has-error:not(.has-focus) .input-suffix{color:var(--tct-input-error-prefix-font-color, inherit);background-color:var(--tct-input-error-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--app-var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}.has-error .input-container:not(:focus-within){border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}.icon-left{width:26px;height:26px}.vertical-separator{height:calc(var(--comp-input-min-height) - 2px);border-right:1px solid var(--tct-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))))))}";
 
 const Q2Input = class {
   constructor(hostRef) {
@@ -2932,14 +2932,15 @@ const Q2Input = class {
     }
     this.formattedValueObject = this.getFormattedValue(this.stringValue, true);
     handleAriaLabel(this);
+    if (this.textHidden === undefined) {
+      this.textHidden = this.type === 'password';
+    }
   }
   componentDidLoad() {
     if (!this.pseudo) {
       this.inputField.value = this.formattedValueObject.formattedValue;
     }
-    if (this.textHidden === undefined) {
-      this.textHidden = this.type === 'password';
-    }
+    overrideFocus(this.hostElement);
   }
   componentDidRender() {
     this.scheduledAfterRender.forEach(fn => fn());
@@ -3105,9 +3106,10 @@ const Q2Input = class {
     this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));
   }
   ///////// HOST ELEMENT EVENTS //////
-  onHostElementFocus() {
+  onHostElementFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
     this.inputField.focus();
-    this.inputField.dispatchEvent(new FocusEvent('focus', { bubbles: false }));
   }
   onHostElementChange(event) {
     if (event.target === this.hostElement && !this.hostElement.onchange) {

package/dist/esm/q2-loading-element.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance } from './index-be8376c0.js';
 import { a as atoms } from './shapes-81c11dfe.js';
 
-const stylesCss = "q2-loading-element{display:block}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px))\n        var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background-color:var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, var(--t-gray-14, #f2f2f2)))}.skeleton-shape.circle{border-radius:50%;padding-top:100%}";
+const stylesCss = "q2-loading-element{display:block}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background-color:var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, var(--t-gray-14, #f2f2f2)))}.skeleton-shape.circle{border-radius:50%;padding-top:100%}";
 
 const Q2Loading = class {
   constructor(hostRef) {

package/dist/esm/q2-loc.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h } from './index-be8376c0.js';
-import { l as loc } from './index-476b86cc.js';
+import { l as loc } from './index-ec6660af.js';
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}";
 

package/dist/esm/q2-message.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, g as getElement } from './index-be8376c0.js';
-import { i as isFirefox, n as nextPaint } from './index-476b86cc.js';
+import { e as isFirefox, o as overrideFocus, n as nextPaint, i as isEventFromElement } from './index-ec6660af.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1, 5px)));border-left-style:solid;display:grid;gap:var(--tct-scale-1, var(--app-scale-1, 5px));align-items:flex-start;background:var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message-icon{width:24px}.message-content{flex:1}::slotted(ul){padding-left:var(--tct-scale-l3, var(--app-scale-3, 15px))}:host(:not([appearance])),:host([appearance=standard]){margin:var(--tct-scale-l3, var(--app-scale-3, 15px)) 0}:host(:not([appearance])) .message,:host([appearance=standard]) .message{grid-template-columns:24px 1fr;--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3, 15px)));padding:var(--comp-padding);padding-top:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1, 5px)));padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2, 10px)))}:host(:not([appearance])) .message-content,:host([appearance=standard]) .message-content{padding-top:var(--tct-scale-1, var(--app-scale-1, 5px))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){margin:var(--tct-scale-l3, var(--app-scale-3, 15px)) 0}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1, 5px)));border-left-style:solid;display:grid;gap:var(--tct-scale-1, var(--app-scale-1, 5px));align-items:flex-start;background:var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{width:24px}.message-content{flex:1}::slotted(ul){padding-left:var(--tct-scale-l3, var(--app-scale-3, 15px))}:host(:not([appearance])),:host([appearance=standard]){margin:var(--tct-scale-l3, var(--app-scale-3, 15px)) 0}:host(:not([appearance])) .message,:host([appearance=standard]) .message{grid-template-columns:24px 1fr;--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3, 15px)));padding:var(--comp-padding);padding-top:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1, 5px)));padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2, 10px)))}:host(:not([appearance])) .message-content,:host([appearance=standard]) .message-content{padding-top:var(--tct-scale-1, var(--app-scale-1, 5px))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){margin:var(--tct-scale-l3, var(--app-scale-3, 15px)) 0}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}";
 
 const Q2Message = class {
   constructor(hostRef) {
@@ -13,6 +13,9 @@ const Q2Message = class {
   get isFirefox() {
     return isFirefox();
   }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
   async present() {
     const { isFirefox } = this;
     this.presentToggle = !this.presentToggle;
@@ -22,12 +25,17 @@ const Q2Message = class {
       this.presentToggle = false;
     });
   }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.hostElement.shadowRoot.querySelector('.message').focus();
+  }
   render() {
     const { isFirefox } = this;
     const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;
     const addDivForAriaLive = !isFirefox && this.presentToggle;
     const { description } = this;
-    return (h("div", { class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'polite', "aria-atomic": description ? undefined : 'true', "aria-relevant": description ? undefined : 'all' }, this.appearance === 'standard' ? generateIcon(this.type) : '', addDivForAriaLive && h("div", { class: "sr" }), h("div", { class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", null))));
+    return (h("div", { tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description ? undefined : 'all' }, this.appearance === 'standard' ? generateIcon(this.type) : '', addDivForAriaLive && h("div", { class: "sr" }), h("div", { class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", null))));
   }
   get hostElement() { return getElement(this); }
 };

package/dist/esm/q2-optgroup.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, g as getElement } from './index-be8376c0.js';
-import { c as createGuid, l as loc } from './index-476b86cc.js';
+import { c as createGuid, l as loc } from './index-ec6660af.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}.q2-optgroup-header{background-color:var(\n        --tct-optgroup-header-bg,\n        var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6))))\n    );padding:var(--tct-scale-1, var(--app-scale-1, 5px))\n        var(--tct-scale-2, var(--app-scale-2, 10px));font-weight:var(--tct-optgroup-header-font-weight, 600);text-transform:var(--tct-optgroup-header-text-transform, uppercase);}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}.q2-optgroup-header{background-color:var(--tct-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))));padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-2, var(--app-scale-2, 10px));font-weight:var(--tct-optgroup-header-font-weight, 600);text-transform:var(--tct-optgroup-header-text-transform, uppercase);}";
 
 const Q2Optgroup = class {
   constructor(hostRef) {

package/dist/esm/q2-option.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-be8376c0.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-be8376c0.js';
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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{padding:0 var(--tct-scale-2, var(--app-scale-2, 10px));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px))) 1fr;align-items:center;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1, 5px))}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):hover),:host([active]),:host(:focus){background-color:var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))}q2-icon{grid-area:icon;--tct-icon-size:var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px)))}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
 
@@ -17,43 +17,12 @@ const Q2Option = class {
       this.click.emit();
     };
   }
-  connectedCallback() {
-    this.checkDisabledStatus();
-    this.checkSelectedStatus();
-    this.checkMultiSelectHiddenStatus();
-  }
-  checkDisabledStatus() {
-    const { disabled, disabledGroup, hostElement } = this;
-    const isDisabled = disabled || disabledGroup;
-    if (isDisabled)
-      hostElement.setAttribute('aria-disabled', 'true');
-    else
-      hostElement.removeAttribute('aria-disabled');
-  }
-  checkSelectedStatus() {
-    const { selected, hostElement } = this;
-    if (selected)
-      hostElement.setAttribute('aria-selected', 'true');
-    else
-      hostElement.removeAttribute('aria-selected');
-  }
-  checkMultiSelectHiddenStatus() {
-    const { _multiSelectHidden, hostElement } = this;
-    if (_multiSelectHidden)
-      hostElement.setAttribute('aria-hidden', 'true');
-    else
-      hostElement.removeAttribute('aria-hidden');
-  }
   render() {
-    return (h(Fragment, null, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content", onClick: this.onClick }, h("slot", null))));
+    const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
+    const isDisabled = disabled || disabledGroup;
+    return (h(Host, { "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": selected ? 'true' : undefined, "aria-hidden": _multiSelectHidden ? 'true' : undefined }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content", onClick: this.onClick }, h("slot", null))));
   }
   get hostElement() { return getElement(this); }
-  static get watchers() { return {
-    "disabled": ["checkDisabledStatus"],
-    "disabledGroup": ["checkDisabledStatus"],
-    "selected": ["checkSelectedStatus"],
-    "_multiSelectHidden": ["checkMultiSelectHiddenStatus"]
-  }; }
 };
 Q2Option.style = stylesCss;
 

package/dist/esm/q2-radio-group.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
-import { c as createGuid, l as loc } from './index-476b86cc.js';
+import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index-ec6660af.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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{margin-top:var(--tct-scale-2, var(--app-scale-2, 10px))}fieldset{padding:0;margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, transparent, white)}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(\n        --tct-input-label-optional-margin-left,\n        var(--tct-scale-1, var(--app-scale-1, 5px))\n    );color:var(\n        --tct-input-label-optional-font-color,\n        var(--tct-a11y-color, var(--t-a11y-gray-color, #767676))\n    );font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}.flexed.right{justify-content:right}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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{margin-top:var(--tct-scale-2, var(--app-scale-2, 10px))}fieldset{padding:0;margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, transparent, white)}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, #767676)));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}.flexed.right{justify-content:right}";
 
 const Q2RadioGroup = class {
   constructor(hostRef) {
@@ -31,6 +31,7 @@ const Q2RadioGroup = class {
     observer.observe(this.hostElement, { childList: true });
     this.mutationObserver = observer;
     this.onMutationObserved();
+    overrideFocus(this.hostElement);
   }
   /////// OBSERVERS ///////
   valueUpdated() {
@@ -60,6 +61,13 @@ const Q2RadioGroup = class {
       }
     }
   }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    const radio = this.hostElement.querySelector('q2-radio[checked]') ||
+      this.hostElement.querySelector('q2-radio');
+    radio === null || radio === void 0 ? void 0 : radio.dispatchEvent(new FocusEvent('focus'));
+  }
   render() {
     return (h("div", null, this.label || this.optional ? (h("div", { class: "group-legend" }, this.label && loc(this.label), this.optional ? (h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'))) : (''))) : (''), h("fieldset", { class: `q2-radio-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerRadioChange, "aria-required": `${!this.optional}` }, this.label || this.optional ? (h("legend", { class: "sr-only" }, this.label && loc(this.label), this.optional ? (h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'))) : (''))) : (''), this.hasError ? (h("div", { class: `error-icon-container ${this.label || this.optional ? '' : 'no-label'}` }, h("q2-icon", { class: "h(4) w(4) mrg-b(2)", type: "error" }))) : (''), this.inputDom())));
   }

package/dist/esm/q2-radio.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
-import { c as createGuid, h as handleAriaLabel, l as loc } from './index-476b86cc.js';
+import { c as createGuid, h as handleAriaLabel, o as overrideFocus, l as loc } from './index-ec6660af.js';
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}q2-radio{margin-top:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px));margin-right:var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px));display:block}q2-radio .radio-container{margin-bottom:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px))}q2-radio .radio-container label[for]{font-weight:var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));align-items:center;cursor:pointer;margin-right:1rem;display:grid;grid-template-columns:18px 1fr;gap:var(--tct-scale-1, var(--app-scale-1, 5px))}q2-radio .radio-container svg{border-radius:50%;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));outline:0;width:100%}q2-radio .radio-container circle:nth-child(1){stroke-width:2;stroke:var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))))}q2-radio .radio-container input:focus+label svg{box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}q2-radio .radio-container input:focus+label circle:nth-child(1){stroke:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}q2-radio .radio-container input:checked+label circle:nth-child(1){background-color:var(--tct-radio-checked-bg, transparent);stroke:var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}q2-radio .radio-container input:checked+label .label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}q2-radio .radio-container input:checked+label circle:nth-child(2){fill:var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}q2-radio .radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}q2-radio .radio-tile label[for]{align-items:center;border-radius:3px;border:2px solid var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));cursor:pointer;display:block;padding:1rem;position:relative;text-align:center;transition:border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));white-space:nowrap}q2-radio .radio-tile input:focus+label{border-color:#0079c1;box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}q2-radio .radio-tile input:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e));box-shadow:inset 0 0 0 2px #ffffff}q2-radio .radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid #0079c1;border-left-width:5px;border-left:8px solid transparent;border-right-width:5px;border-right:8px solid transparent;bottom:0;content:\"\";height:0;left:50%;margin-left:-5px;position:absolute;width:0}q2-radio input:disabled+label{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}";
 
@@ -21,6 +21,9 @@ const Q2Radio = class {
   componentWillLoad() {
     handleAriaLabel(this);
   }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
   ////////// OBSERVERS //////////
   ariaLabelObserver() {
     handleAriaLabel(this);
@@ -31,8 +34,13 @@ const Q2Radio = class {
       event.stopImmediatePropagation();
     }
   }
+  delegateFocus(event) {
+    if (event.target === this.hostElement) {
+      this.inputField.focus();
+    }
+  }
   render() {
-    return (h("div", { class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { class: "sr", id: this.id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { htmlFor: this.id, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { viewBox: "0 0 18 18" }, h("circle", { stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", null))))));
+    return (h("div", { class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { ref: el => (this.inputField = el), class: "sr", id: this.id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { htmlFor: this.id, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { viewBox: "0 0 18 18" }, h("circle", { stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", null))))));
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {