q2-tecton-elements 1.10.6 → 1.10.9

package/dist/cjs/q2-tecton-elements.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["q2-icon.cjs",[[1,"q2-icon",{"type":[513],"label":[513]}]]],["q2-calendar.cjs",[[1,"q2-calendar",{"value":[1537],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"optional":[516],"disabled":[516],"invalid":[1540],"typeable":[516],"placeholder":[513],"buttonLabel":[513,"button-label"],"disabledMsg":[513,"disabled-msg"],"calendarLabel":[513,"calendar-label"],"disclaimer":[513],"displayFormat":[513,"display-format"],"startDate":[513,"start-date"],"endDate":[513,"end-date"],"cutoffTime":[513,"cutoff-time"],"daysOfWeekChecksum":[514,"days-of-week-checksum"],"popDirection":[513,"pop-direction"],"errors":[1040],"invalidDates":[16],"validDates":[16],"onsuccess":[16],"dropdownOpen":[32],"keyboardSelection":[32],"typedValue":[32],"dateList":[32],"hintMessage":[32],"hintMessageType":[32]},[[0,"change","defaultChangeHandler"],[0,"error","defaultErrorHandler"],[0,"success","defaultSuccessHandler"]]]]],["q2-dropdown.cjs",[[1,"q2-dropdown",{"type":[513],"icon":[513],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"disabled":[516],"popDirection":[513,"pop-direction"],"name":[513],"context":[513],"contextValue":[513,"context-value"],"resolvedType":[513,"resolved-type"],"dropdownOpen":[32]}]]],["q2-select.cjs",[[1,"q2-select",{"label":[513],"hideLabel":[516,"hide-label"],"value":[1025],"ariaLabel":[513,"aria-label"],"selectedOptions":[1032,"selected-options"],"disabled":[516],"invalid":[516],"errors":[16],"multiple":[516],"minRows":[2,"min-rows"],"popDirection":[513,"pop-direction"],"searchable":[516],"multilineOptions":[516,"multiline-options"],"optional":[516],"dropdownOpen":[32],"onlyShowingSelected":[32],"activeOptionId":[32],"searchText":[32],"hasCustomDisplay":[32],"inputFocused":[32],"statusMessage":[32]},[[0,"change","onHostElementChange"],[0,"input","onHostElementInput"],[0,"click","clickHandler"],[0,"keydown","keydownHandler"]]]]],["q2-editable-field.cjs",[[1,"q2-editable-field",{"value":[1537],"editing":[1540],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"type":[513],"formatModifier":[513,"format-modifier"],"truncated":[513],"maxlength":[514],"persistentLabel":[516,"persistent-label"],"hints":[16],"errors":[16]},[[0,"change","onHostElementChange"]]]]],["q2-section.cjs",[[1,"q2-section",{"label":[513],"collapsible":[516],"noCollapseIcon":[516,"no-collapse-icon"],"expanded":[1540],"contentHeight":[32],"hasYieldedHeader":[32]},[[0,"change","defaultChangeHandler"]]]]],["q2-stepper.cjs",[[1,"q2-stepper",{"currentStep":[1538,"current-step"],"stepCount":[1026,"step-count"],"lastEnabledStep":[1026,"last-enabled-step"],"scrollEnabled":[32],"showScrollLeft":[32],"showScrollRight":[32]},[[0,"change","defaultChangeHandler"]]]]],["q2-tab-container.cjs",[[1,"q2-tab-container",{"value":[1537],"type":[513],"name":[513],"color":[513],"noPrint":[516,"no-print"],"hasLeft":[32],"hasRight":[32],"scrollEnabled":[32],"showScrollLeft":[32],"showScrollRight":[32],"tabs":[32]},[[0,"change","defaultChangeHandler"],[9,"resize","onResize"],[0,"focus","onFocus"]]]]],["q2-avatar.cjs",[[1,"q2-avatar",{"name":[513],"initials":[513],"src":[513],"icon":[1],"badSrc":[32]}]]],["q2-carousel.cjs",[[4,"q2-carousel",{"autoPlay":[516,"auto-play"],"fullWidthPanes":[516,"full-width-panes"],"hidePagination":[516,"hide-pagination"],"showNavigationArrows":[516,"show-navigation-arrows"],"ariaLabel":[513,"aria-label"],"label":[513],"index":[1538],"universalCarouselOptions":[32],"fullWidthDisplayOptions":[32],"activePaneIndex":[32],"applyFocus":[32],"compactMode":[32],"autoPlayInProgress":[32],"carouselWrapperWidth":[32],"tabIndex":[32]},[[0,"change","onHostElementChange"]]]]],["q2-checkbox.cjs",[[1,"q2-checkbox",{"checked":[1540],"type":[513],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"indeterminate":[516],"disabled":[516],"value":[513],"name":[513],"hasError":[516,"has-error"],"groupDisabled":[516,"group-disabled"],"alignment":[513]},[[0,"change","defaultChangeHandler"]]]]],["q2-checkbox-group.cjs",[[1,"q2-checkbox-group",{"label":[513],"value":[1040],"disabled":[516],"optional":[516],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"]]]]],["q2-option.cjs",[[1,"q2-option",{"role":[513],"tabindex":[513],"display":[513],"value":[513],"disabled":[516],"optionId":[513,"option-id"],"disabledGroup":[516,"disabled-group"],"selected":[516],"hidden":[516],"multiline":[516],"active":[516],"_multiSelectHidden":[516,"_multiselecthidden"]}]]],["q2-radio-group.cjs",[[1,"q2-radio-group",{"label":[513],"value":[1025],"disabled":[516],"name":[513],"optional":[516],"tilelayout":[516],"tileAlignment":[513,"tile-alignment"],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"]]]]],["q2-textarea.cjs",[[1,"q2-textarea",{"value":[1025],"label":[513],"hideLabel":[516,"hide-label"],"hideMessages":[516,"hide-messages"],"optional":[516],"placeholder":[513],"disabled":[516],"readonly":[516],"spellcheck":[516],"maxlength":[1538],"rows":[514],"cols":[514],"resize":[513],"errors":[16],"hints":[16],"hasFocus":[32],"downParams":[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]],["q2-carousel-pane.cjs",[[4,"q2-carousel-pane",{"index":[2],"siblingCount":[2,"sibling-count"],"hideFromScreenReader":[516,"hide-from-screen-reader"],"isActivePane":[516,"is-active-pane"],"label":[513]}]]],["q2-loading-element.cjs",[[0,"q2-loading-element",{"shape":[513],"width":[513],"height":[513],"borderRadius":[513,"border-radius"]}]]],["q2-loc.cjs",[[1,"q2-loc",{"value":[513],"substitutions":[16]}]]],["q2-optgroup.cjs",[[1,"q2-optgroup",{"disabled":[516],"label":[513],"hidden":[32]}]]],["q2-radio.cjs",[[4,"q2-radio",{"label":[513],"hideLabel":[516,"hide-label"],"value":[513],"disabled":[516],"checked":[516],"name":[513],"ariaLabel":[513,"aria-label"],"groupDisabled":[4,"group-disabled"],"groupTileLayout":[4,"group-tile-layout"]},[[0,"click","onHostClick"]]]]],["q2-stepper-pane.cjs",[[1,"q2-stepper-pane",{"label":[513],"description":[513],"isActive":[516,"is-active"]}]]],["q2-tab-pane.cjs",[[1,"q2-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2]}]]],["tecton-tab-pane.cjs",[[1,"tecton-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2],"provided":[516],"url":[513],"moduleId":[513,"module-id"],"minHeight":[513,"min-height"],"authPayload":[16],"showForm":[4,"show-form"],"_showForm":[32]}]]],["q2-dropdown-item.cjs",[[1,"q2-dropdown-item",{"disabled":[516],"removable":[516],"separator":[516],"label":[513],"ariaLabel":[513,"aria-label"],"value":[513]},[[0,"focus","onHostElementFocus"]]]]],["q2-message.cjs",[[1,"q2-message",{"type":[513],"appearance":[513],"description":[516],"presentToggle":[32],"present":[64]}]]],["q2-input.cjs",[[1,"q2-input",{"value":[1025],"label":[513],"hideLabel":[516,"hide-label"],"type":[513],"placeholder":[513],"disabled":[516],"autocomplete":[513],"autocorrect":[513],"autocapitalize":[513],"hideMessages":[516,"hide-messages"],"iconLeft":[513,"icon-left"],"iconRight":[513,"icon-right"],"readonly":[516],"clearable":[516],"optional":[516],"formatModifier":[513,"format-modifier"],"maxlength":[1538],"pseudo":[516],"showVisibilityToggle":[516,"show-visibility-toggle"],"textHidden":[1540,"text-hidden"],"ariaControls":[1,"aria-controls"],"role":[1],"ariaOwns":[1,"aria-owns"],"ariaLabel":[513,"aria-label"],"ariaHaspopup":[1,"aria-haspopup"],"ariaExpanded":[4,"aria-expanded"],"ariaActivedescendant":[8,"aria-activedescendant"],"errors":[16],"hints":[16],"formattedValueObject":[32],"hasFocus":[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]],["click-elsewhere.cjs",[[0,"click-elsewhere"]]],["q2-btn_2.cjs",[[1,"q2-btn",{"ariaExpanded":[4,"aria-expanded"],"ariaHasPopup":[8,"aria-has-popup"],"ariaControls":[1,"aria-controls"],"ariaSelected":[4,"aria-selected"],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"tabIndex":[2,"tab-index"],"intent":[513],"disabled":[516],"type":[513],"loading":[516],"badge":[516],"active":[516],"fab":[516],"iconPosition":[32]},[[2,"click","disable"],[0,"focus","delegateFocus"]]],[1,"q2-loading",{"type":[513],"shape":[513],"modifiers":[513],"counts":[513],"label":[513],"ariaLabel":[513,"aria-label"],"inline":[516]}]]]], options);
+  return index.bootstrapLazy([["q2-icon.cjs",[[1,"q2-icon",{"type":[513],"label":[513]}]]],["q2-calendar.cjs",[[1,"q2-calendar",{"value":[1537],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"optional":[516],"disabled":[516],"invalid":[1540],"typeable":[516],"placeholder":[513],"buttonLabel":[513,"button-label"],"disabledMsg":[513,"disabled-msg"],"calendarLabel":[513,"calendar-label"],"disclaimer":[513],"displayFormat":[513,"display-format"],"startDate":[513,"start-date"],"endDate":[513,"end-date"],"cutoffTime":[513,"cutoff-time"],"daysOfWeekChecksum":[514,"days-of-week-checksum"],"popDirection":[513,"pop-direction"],"assume":[513],"errors":[1040],"invalidDates":[16],"validDates":[16],"onsuccess":[16],"dropdownOpen":[32],"keyboardSelection":[32],"typedValue":[32],"dateList":[32],"hintMessage":[32],"hintMessageType":[32]},[[0,"change","defaultChangeHandler"],[0,"error","defaultErrorHandler"],[0,"success","defaultSuccessHandler"],[0,"focus","delegateFocus"]]]]],["q2-dropdown.cjs",[[1,"q2-dropdown",{"type":[513],"icon":[513],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"disabled":[516],"popDirection":[513,"pop-direction"],"name":[513],"context":[513],"contextValue":[513,"context-value"],"resolvedType":[513,"resolved-type"],"dropdownOpen":[32]},[[0,"focus","delegateFocus"]]]]],["q2-select.cjs",[[1,"q2-select",{"label":[513],"hideLabel":[516,"hide-label"],"value":[1025],"ariaLabel":[513,"aria-label"],"selectedOptions":[1032,"selected-options"],"disabled":[516],"invalid":[516],"errors":[16],"multiple":[516],"minRows":[2,"min-rows"],"popDirection":[513,"pop-direction"],"searchable":[516],"multilineOptions":[516,"multiline-options"],"optional":[516],"dropdownOpen":[32],"onlyShowingSelected":[32],"activeOptionId":[32],"searchText":[32],"hasCustomDisplay":[32],"inputFocused":[32],"statusMessage":[32]},[[0,"change","onHostElementChange"],[0,"input","onHostElementInput"],[0,"focus","delegateFocus"],[0,"click","clickHandler"],[0,"keydown","keydownHandler"]]]]],["q2-editable-field.cjs",[[1,"q2-editable-field",{"value":[1537],"editing":[1540],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"type":[513],"formatModifier":[513,"format-modifier"],"truncated":[513],"maxlength":[514],"persistentLabel":[516,"persistent-label"],"hints":[16],"errors":[16]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"]]]]],["q2-carousel.cjs",[[4,"q2-carousel",{"autoPlay":[516,"auto-play"],"fullWidthPanes":[516,"full-width-panes"],"hidePagination":[516,"hide-pagination"],"showNavigationArrows":[516,"show-navigation-arrows"],"ariaLabel":[513,"aria-label"],"label":[513],"index":[1538],"universalCarouselOptions":[32],"fullWidthDisplayOptions":[32],"activePaneIndex":[32],"applyFocus":[32],"applyPaginationFocus":[32],"autoPlayInProgress":[32],"compactMode":[32],"carouselWrapperWidth":[32]},[[0,"change","onHostElementChange"],[0,"clickCarouselPane","carouselPaneClicked"],[0,"focus","delegateFocus"]]]]],["q2-section.cjs",[[1,"q2-section",{"label":[513],"collapsible":[516],"noCollapseIcon":[516,"no-collapse-icon"],"expanded":[1540],"contentHeight":[32],"hasYieldedHeader":[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["q2-stepper.cjs",[[1,"q2-stepper",{"currentStep":[1538,"current-step"],"stepCount":[1026,"step-count"],"lastEnabledStep":[1026,"last-enabled-step"],"scrollEnabled":[32],"showScrollLeft":[32],"showScrollRight":[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["q2-tab-container.cjs",[[1,"q2-tab-container",{"value":[1537],"type":[513],"name":[513],"color":[513],"noPrint":[516,"no-print"],"hasLeft":[32],"hasRight":[32],"scrollEnabled":[32],"showScrollLeft":[32],"showScrollRight":[32],"tabs":[32]},[[0,"change","defaultChangeHandler"],[9,"resize","onResize"],[0,"focus","onFocus"]]]]],["q2-avatar.cjs",[[1,"q2-avatar",{"name":[513],"initials":[513],"src":[513],"icon":[1],"badSrc":[32]}]]],["q2-checkbox.cjs",[[1,"q2-checkbox",{"checked":[1540],"type":[513],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"indeterminate":[516],"disabled":[516],"value":[513],"name":[513],"hasError":[516,"has-error"],"groupDisabled":[516,"group-disabled"],"alignment":[513]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["q2-checkbox-group.cjs",[[1,"q2-checkbox-group",{"label":[513],"value":[1040],"disabled":[516],"optional":[516],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"]]]]],["q2-option.cjs",[[1,"q2-option",{"role":[513],"tabindex":[513],"display":[513],"value":[513],"disabled":[516],"optionId":[513,"option-id"],"disabledGroup":[516,"disabled-group"],"selected":[516],"hidden":[516],"multiline":[516],"active":[516],"_multiSelectHidden":[516,"_multiselecthidden"]}]]],["q2-radio-group.cjs",[[1,"q2-radio-group",{"label":[513],"value":[1025],"disabled":[516],"name":[513],"optional":[516],"tilelayout":[516],"tileAlignment":[513,"tile-alignment"],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"]]]]],["q2-textarea.cjs",[[1,"q2-textarea",{"value":[1025],"label":[513],"hideLabel":[516,"hide-label"],"hideMessages":[516,"hide-messages"],"optional":[516],"placeholder":[513],"disabled":[516],"readonly":[516],"spellcheck":[516],"maxlength":[1538],"rows":[514],"cols":[514],"resize":[513],"errors":[16],"hints":[16],"hasFocus":[32],"downParams":[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]],["q2-carousel-pane.cjs",[[4,"q2-carousel-pane",{"index":[2],"siblingCount":[2,"sibling-count"],"isActivePane":[516,"is-active-pane"],"label":[513]}]]],["q2-loading-element.cjs",[[0,"q2-loading-element",{"shape":[513],"width":[513],"height":[513],"borderRadius":[513,"border-radius"]}]]],["q2-loc.cjs",[[1,"q2-loc",{"value":[513],"substitutions":[16]}]]],["q2-optgroup.cjs",[[1,"q2-optgroup",{"disabled":[516],"label":[513],"hidden":[32]}]]],["q2-radio.cjs",[[4,"q2-radio",{"label":[513],"hideLabel":[516,"hide-label"],"value":[513],"disabled":[516],"checked":[516],"name":[513],"ariaLabel":[513,"aria-label"],"groupDisabled":[4,"group-disabled"],"groupTileLayout":[4,"group-tile-layout"]},[[0,"click","onHostClick"],[0,"focus","delegateFocus"]]]]],["q2-stepper-pane.cjs",[[1,"q2-stepper-pane",{"label":[513],"description":[513],"isActive":[516,"is-active"]}]]],["q2-tab-pane.cjs",[[1,"q2-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2]}]]],["tecton-tab-pane.cjs",[[1,"tecton-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2],"provided":[516],"url":[513],"moduleId":[513,"module-id"],"minHeight":[513,"min-height"],"authPayload":[16],"showForm":[4,"show-form"],"_showForm":[32]}]]],["q2-dropdown-item.cjs",[[1,"q2-dropdown-item",{"disabled":[516],"removable":[516],"separator":[516],"label":[513],"ariaLabel":[513,"aria-label"],"value":[513]},[[0,"focus","onHostElementFocus"]]]]],["q2-message.cjs",[[1,"q2-message",{"type":[513],"appearance":[513],"description":[516],"presentToggle":[32],"present":[64]},[[0,"focus","delegateFocus"]]]]],["q2-input.cjs",[[1,"q2-input",{"value":[1025],"label":[513],"hideLabel":[516,"hide-label"],"type":[513],"placeholder":[513],"disabled":[516],"autocomplete":[513],"autocorrect":[513],"autocapitalize":[513],"hideMessages":[516,"hide-messages"],"iconLeft":[513,"icon-left"],"iconRight":[513,"icon-right"],"readonly":[516],"clearable":[516],"optional":[516],"formatModifier":[513,"format-modifier"],"maxlength":[1538],"pseudo":[516],"showVisibilityToggle":[516,"show-visibility-toggle"],"textHidden":[1540,"text-hidden"],"ariaControls":[1,"aria-controls"],"role":[1],"ariaOwns":[1,"aria-owns"],"ariaLabel":[513,"aria-label"],"ariaHaspopup":[1,"aria-haspopup"],"ariaExpanded":[4,"aria-expanded"],"ariaActivedescendant":[8,"aria-activedescendant"],"errors":[16],"hints":[16],"formattedValueObject":[32],"hasFocus":[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]],["click-elsewhere.cjs",[[0,"click-elsewhere"]]],["q2-btn_2.cjs",[[1,"q2-btn",{"ariaExpanded":[4,"aria-expanded"],"ariaHasPopup":[8,"aria-has-popup"],"ariaControls":[1,"aria-controls"],"ariaSelected":[4,"aria-selected"],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"tabIndex":[2,"tab-index"],"intent":[513],"disabled":[516],"type":[513],"loading":[516],"badge":[516],"active":[516],"fab":[516],"iconPosition":[32]},[[2,"click","disable"],[0,"focus","delegateFocus"]]],[1,"q2-loading",{"type":[513],"shape":[513],"modifiers":[513],"counts":[513],"label":[513],"ariaLabel":[513,"aria-label"],"inline":[516]}]]]], options);
 });

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2e53804.js');
-const index$1 = require('./index-f4153f5a.js');
+const index$1 = require('./index-a55d3c34.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;margin-top:var(--tct-textarea-margin-top, var(--app-scale-6x, 30px));margin-bottom:var(--tct-textarea-margin-bottom, var(--app-scale-6x, 30px));font-size:var(--tct-textarea-font-size, var(--app-font-size, inherit))}:host([hidden]){display:none}label{display:block;padding-left:var(--tct-textarea-label-padding-left, 0);padding-right:var(--tct-textarea-label-padding-right, 0);margin-top:var(--tct-textarea-label-margin-top, 0);margin-bottom:var(\n        --tct-textarea-label-margin-bottom,\n        var(--tct-scale-1x, var(--app-scale-1x, 5px))\n    );color:var(--tct-textarea-label-font-color, inherit);font-size:var(--tct-textarea-label-font-size, inherit);font-weight:var(--tct-textarea-label-font-weight, 600);text-transform:var(--tct-textarea-label-text-transform, none);letter-spacing:var(--tct-textarea-label-letter-spacing, normal);transition:color var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.optional-tag{margin-left:var(\n        --tct-textarea-label-optional-margin-left,\n        var(--tct-scale-1x, var(--app-scale-1x, 5px))\n    );color:var(\n        --tct-textarea-label-optional-font-color,\n        var(--tct-a11y-color, var(--t-a11y-gray-color, #767676))\n    );font-size:var(--tct-textarea-label-optional-font-size, 12px);font-weight:var(--tct-textarea-label-optional-font-weight, 400)}.input-container{min-height:var(--comp-textarea-min-height, var(--tct-textarea-min-height));height:100%;--comp-textarea-border-top-left-radius:var(\n        --tct-textarea-border-top-left-radius,\n        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n    );--comp-textarea-border-top-right-radius:var(\n        --tct-textarea-border-top-right-radius,\n        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n    );--comp-textarea-border-bottom-right-radius:var(\n        --tct-textarea-border-bottom-right-radius,\n        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n    );--comp-textarea-border-bottom-left-radius:var(\n        --tct-textarea-border-bottom-left-radius,\n        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n    );--comp-textarea-border-radius:var(--comp-textarea-border-top-left-radius)\n        var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n        var(--comp-textarea-border-bottom-left-radius);--comp-textarea-border-width:var(--tct-textarea-border-top-width, 1px)\n        var(--tct-textarea-border-right-width, 1px) var(--tct-textarea-border-bottom-width, 1px)\n        var(--tct-textarea-border-left-width, 1px);--comp-textarea-focus-border-width:var(--tct-textarea-focus-border-top-width, 1px)\n        var(--tct-textarea-focus-border-right-width, 1px)\n        var(--tct-textarea-focus-border-bottom-width, 1px)\n        var(--tct-textarea-focus-border-left-width, 1px);--comp-textarea-icon-clearance:34px}.content-container{--comp-textarea-min-height:44px;--comp-textarea-min-width:150px;position:relative;display:inline-block;min-height:var(--comp-textarea-min-height, var(--tct-textarea-min-height, 44px));min-width:var(--comp-textarea-min-width, var(--tct-textarea-min-width, 150px))}:host(:not([cols])) .content-container{width:100%}textarea{resize:none;height:100%;-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;min-height:var(--comp-textarea-min-height, var(--tct-textarea-min-height));padding:var(--tct-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))\n        var(--tct-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));background-color:var(\n        --tct-textarea-bg,\n        var(--t-input-bg, var(--tct-gray-14, var(--app-gray-14, #f2f2f2)))\n    );color:var(--tct-textarea-font-color, var(--t-input-font-color, inherit));border-width:var(--comp-textarea-border-width);border-style:solid;border-color:var(\n        --tct-textarea-border-color,\n        var(--t-input-border, var(--tct-gray-11, var(--app-gray-11, #cccccc)))\n    );border-radius:var(--comp-textarea-border-radius);box-shadow:var(--tct-textarea-box-shadow, none);scrollbar-width:thin;scrollbar-color:var(--t-a11y-gray-color) transparent;transition:border-width\n            var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n        border-color var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),\n        box-shadow var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}textarea::-webkit-scrollbar{width:var(--app-scale-1x);height:var(--app-scale-1x);margin:var(--app-scale-1x)}textarea::-webkit-scrollbar-thumb{background:var(--t-a11y-gray-color);border-radius:2px}textarea::-webkit-scrollbar-track{background:transparent}textarea:not([cols]){width:100%}textarea:focus{border-width:var(--comp-textarea-focus-border-width, 1px);border-color:var(\n        --tct-textarea-focus-border-color,\n        var(--t-input-focus, var(--tct-gray-9, var(--app-gray-9, #999999)))\n    );box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)),\n        var(--tct-textarea-focus-box-shadow, 0 0 transparent)}textarea::placeholder{color:var(\n        --tct-textarea-placeholder-font-color,\n        var(\n            --t-input-placeholder-font-color,\n            var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n        )\n    )}q2-icon{margin-top:calc(var(--tct-textarea-border-top-width, 1px) / 2);margin-bottom:calc(var(--tct-textarea-border-bottom-width, 1px) / 2);pointer-events:none;position:absolute;top:var(--tct-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));color:var(\n        --tct-textarea-icon-stroke-primary,\n        var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))\n    );right:0;margin-right:var(--tct-scale-2x, var(--app-scale-2x, 10px));--tct-icon-stroke-primary:var(\n        --tct-textarea-icon-stroke-primary,\n        var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n    );--t-icon-stroke-primary:var(\n        --tct-textarea-icon-stroke-primary,\n        var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))))\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))}.messages-container{height:0px;overflow:hidden;background-color:var(\n        --tct-message-bg,\n        var(--tct-gray-14, var(--app-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))\n    );box-shadow:var(\n        --tct-textarea-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-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));margin-top:2px;z-index:1;position:absolute;width:100%;color:var(--tct-textarea-messages-font-color, inherit)}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(\n        --tct-textarea-disabled-opacity,\n        var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))\n    )}textarea[disabled]{cursor:not-allowed}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance)}.has-error label{color:var(\n        --tct-textarea-error-label-font-color,\n        var(--tct-textarea-label-font-color, inherit)\n    )}.has-error textarea:not(:focus){border-color:var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #c30000))}.max-length{color:var(--tct-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77)));font-size:var(\n        --tct-textarea-max-length-font-size,\n        var(--tct-font-size-small, var(--app-font-size-small, 12px))\n    );position:absolute;right:0}.btn-resize{--tct-textarea-resize-icon-padding:calc(\n        calc(\n                var(--tct-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)) -\n                    var(--tct-textarea-resize-icon-size, 12px)\n            ) / 2\n    );width:var(--tct-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px));height:var(--tct-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px));background:var(--tct-textarea-resize-btn-background, transparent);stroke:var(--tct-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77)));border:0;position:absolute;right:calc(var(--tct-textarea-resize-icon-padding) * -1 + 2px);bottom:calc(var(--tct-textarea-resize-icon-padding) * -1 + 2px);display:block;padding:var(--tct-textarea-resize-icon-padding);font-size:0}.btn-resize:focus{outline:none;box-shadow:none}:host([resize='both']) .btn-resize{cursor:se-resize}:host([resize='vertical']) .btn-resize{cursor:s-resize}:host([resize='horizontal']) .btn-resize{cursor:e-resize}";
+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-textarea-margin-top, var(--app-scale-6x, 30px));margin-bottom:var(--tct-textarea-margin-bottom, var(--app-scale-6x, 30px));font-size:var(--tct-textarea-font-size, var(--app-font-size, inherit))}:host([hidden]){display:none}label{display:block;padding-left:var(--tct-textarea-label-padding-left, 0);padding-right:var(--tct-textarea-label-padding-right, 0);margin-top:var(--tct-textarea-label-margin-top, 0);margin-bottom:var(--tct-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px)));color:var(--tct-textarea-label-font-color, inherit);font-size:var(--tct-textarea-label-font-size, inherit);font-weight:var(--tct-textarea-label-font-weight, 600);text-transform:var(--tct-textarea-label-text-transform, none);letter-spacing:var(--tct-textarea-label-letter-spacing, normal);transition:color var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}.optional-tag{margin-left:var(--tct-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)));color:var(--tct-textarea-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, #767676)));font-size:var(--tct-textarea-label-optional-font-size, 12px);font-weight:var(--tct-textarea-label-optional-font-weight, 400)}.input-container{min-height:var(--comp-textarea-min-height, var(--tct-textarea-min-height));height:100%;--comp-textarea-border-top-left-radius:var(\n      --tct-textarea-border-top-left-radius,\n      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n  );--comp-textarea-border-top-right-radius:var(\n      --tct-textarea-border-top-right-radius,\n      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n  );--comp-textarea-border-bottom-right-radius:var(\n      --tct-textarea-border-bottom-right-radius,\n      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n  );--comp-textarea-border-bottom-left-radius:var(\n      --tct-textarea-border-bottom-left-radius,\n      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n  );--comp-textarea-border-radius:var(--comp-textarea-border-top-left-radius)\n      var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n      var(--comp-textarea-border-bottom-left-radius);--comp-textarea-border-width:var(--tct-textarea-border-top-width, 1px)\n      var(--tct-textarea-border-right-width, 1px) var(--tct-textarea-border-bottom-width, 1px)\n      var(--tct-textarea-border-left-width, 1px);--comp-textarea-focus-border-width:var(--tct-textarea-focus-border-top-width, 1px)\n      var(--tct-textarea-focus-border-right-width, 1px)\n      var(--tct-textarea-focus-border-bottom-width, 1px)\n      var(--tct-textarea-focus-border-left-width, 1px);--comp-textarea-icon-clearance:34px}.content-container{--comp-textarea-min-height:44px;--comp-textarea-min-width:150px;position:relative;display:inline-block;min-height:var(--comp-textarea-min-height, var(--tct-textarea-min-height, 44px));min-width:var(--comp-textarea-min-width, var(--tct-textarea-min-width, 150px))}:host(:not([cols])) .content-container{width:100%}textarea{resize:none;height:100%;-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;min-height:var(--comp-textarea-min-height, var(--tct-textarea-min-height));padding:var(--tct-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))) var(--tct-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));background-color:var(--tct-textarea-bg, var(--t-input-bg, var(--tct-gray-14, var(--app-gray-14, #f2f2f2))));color:var(--tct-textarea-font-color, var(--t-input-font-color, inherit));border-width:var(--comp-textarea-border-width);border-style:solid;border-color:var(--tct-textarea-border-color, var(--t-input-border, var(--tct-gray-11, var(--app-gray-11, #cccccc))));border-radius:var(--comp-textarea-border-radius);box-shadow:var(--tct-textarea-box-shadow, none);scrollbar-width:thin;scrollbar-color:var(--t-a11y-gray-color) transparent;transition:border-width var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), border-color var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), box-shadow var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)))}textarea::-webkit-scrollbar{width:var(--app-scale-1x);height:var(--app-scale-1x);margin:var(--app-scale-1x)}textarea::-webkit-scrollbar-thumb{background:var(--t-a11y-gray-color);border-radius:2px}textarea::-webkit-scrollbar-track{background:transparent}textarea:not([cols]){width:100%}textarea:focus{border-width:var(--comp-textarea-focus-border-width, 1px);border-color:var(--tct-textarea-focus-border-color, var(--t-input-focus, var(--tct-gray-9, var(--app-gray-9, #999999))));box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-textarea-focus-box-shadow, 0 0 transparent)}textarea::placeholder{color:var(--tct-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))))}q2-icon{margin-top:calc(var(--tct-textarea-border-top-width, 1px) / 2);margin-bottom:calc(var(--tct-textarea-border-bottom-width, 1px) / 2);pointer-events:none;position:absolute;top:var(--tct-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));color:var(--tct-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))));right:0;margin-right:var(--tct-scale-2x, var(--app-scale-2x, 10px));--tct-icon-stroke-primary:var(\n      --tct-textarea-icon-stroke-primary,\n      var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))))\n  );--t-icon-stroke-primary:var(\n      --tct-textarea-icon-stroke-primary,\n      var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))))\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))}.messages-container{height:0px;overflow:hidden;background-color:var(--tct-message-bg, var(--tct-gray-14, var(--app-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));box-shadow:var(--tct-textarea-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-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));margin-top:2px;z-index:1;position:absolute;width:100%;color:var(--tct-textarea-messages-font-color, inherit)}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(--tct-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)))}textarea[disabled]{cursor:not-allowed}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance)}.has-error label{color:var(--tct-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit))}.has-error textarea:not(:focus){border-color:var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #c30000))}.max-length{color:var(--tct-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77)));font-size:var(--tct-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px)));position:absolute;right:0}.btn-resize{--tct-textarea-resize-icon-padding:calc(\n      calc(\n              var(--tct-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)) -\n                  var(--tct-textarea-resize-icon-size, 12px)\n          ) / 2\n  );width:var(--tct-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px));height:var(--tct-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px));background:var(--tct-textarea-resize-btn-background, transparent);stroke:var(--tct-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77)));border:0;position:absolute;right:calc(var(--tct-textarea-resize-icon-padding) * -1 + 2px);bottom:calc(var(--tct-textarea-resize-icon-padding) * -1 + 2px);display:block;padding:var(--tct-textarea-resize-icon-padding);font-size:0}.btn-resize:focus{outline:none;box-shadow:none}:host([resize=both]) .btn-resize{cursor:se-resize}:host([resize=vertical]) .btn-resize{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";
 
 const Q2Textarea = class {
   constructor(hostRef) {
@@ -102,6 +102,9 @@ const Q2Textarea = class {
     this.scheduledAfterRender.forEach(fn => fn());
     this.scheduledAfterRender = [];
   }
+  componentDidLoad() {
+    index$1.overrideFocus(this.hostElement);
+  }
   get hasError() {
     return Array.isArray(this.errors) && this.errors.length > 0;
   }
@@ -152,9 +155,10 @@ const Q2Textarea = class {
     this.hasFocus && this.scheduledAfterRender.push(() => index$1.setMessageHeight(this));
   }
   ///////// HOST ELEMENT EVENTS //////
-  onHostElementFocus() {
+  onHostElementFocus(event) {
+    if (!index$1.isEventFromElement(event, this.hostElement))
+      return;
     this.textareaField.focus();
-    this.textareaField.dispatchEvent(new FocusEvent('focus', { bubbles: false }));
   }
   onHostElementChange(event) {
     if (event.target === this.hostElement && !this.hostElement.onchange) {

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2e53804.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}.tab-pane[aria-hidden='true']{display:none}.tab-pane:focus{outline:none;box-shadow:none}.loading-wrapper{height:44px;width:100%;align-items:center;justify-content:center}.loading-wrapper:not([hidden]){display:flex}iframe{width:100%;height:auto;overflow-y:hidden;border:none}iframe:not([hidden]){display:inline-block}.slot-wrapper:focus{outline:none;box-shadow:var(--const-global-focus)}";
+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}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}.loading-wrapper{height:44px;width:100%;align-items:center;justify-content:center}.loading-wrapper:not([hidden]){display:flex}iframe{width:100%;height:auto;overflow-y:hidden;border:none}iframe:not([hidden]){display:inline-block}.slot-wrapper:focus{outline:none;box-shadow:var(--const-global-focus)}";
 
 const TectonTabPane = class {
   constructor(hostRef) {
@@ -49,7 +49,7 @@ const TectonTabPane = class {
   }
   ///////// View Methods /////////
   render() {
-    return (index.h("div", { id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-expanded": `${!!this.selected}`, "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (index.h("div", null, index.h("slot", { name: "loading-wrapper" }), index.h("iframe", { hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (index.h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
+    return (index.h("div", { id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (index.h("div", null, index.h("slot", { name: "loading-wrapper" }), index.h("iframe", { hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (index.h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
       return (index.h("input", { type: "hidden", value: element.value, name: element.key }));
     }))) : (''))), index.h("div", { class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, index.h("slot", null))));
   }

package/dist/collection/components/q2-avatar/index.js

@@ -48,7 +48,7 @@ export class Q2Avatar {
   static get is() { return "q2-avatar"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]

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

@@ -1,120 +1,122 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *:active {
-    outline: none;
+  outline: none;
 }
 
 *:focus {
-    outline: none;
-    box-shadow: var(--const-global-focus);
+  outline: none;
+  box-shadow: var(--const-global-focus);
 }
 
 :host {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 ::-moz-focus-inner {
-    border: none;
+  border: none;
 }
 
 input,
 textarea,
 button {
-    font-family: inherit;
-    font-size: inherit;
+  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;
+  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;
+  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;
+  display: none;
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 .invisible {
-    visibility: hidden;
+  visibility: hidden;
 }
 
-
 .avatar-img {
-    object-fit: cover;
-    height: var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));
-    width: var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));
-    border-radius: var(--tct-avatar-img-br, 50%);
-    background-color: var(--tct-avatar-bg, #9e9e9e);
+  object-fit: cover;
+  height: var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));
+  width: var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));
+  border-radius: var(--tct-avatar-img-br, 50%);
+  background-color: var(--tct-avatar-bg, #9e9e9e);
 }
 
 .avatar-initials {
-    height: var(--tct-avatar-height, 44px);
-    width: var(--tct-avatar-width, 44px);
-    background-color: var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e));
-    border-radius: var(--tct-avatar-br, 50%);
+  height: var(--tct-avatar-height, 44px);
+  width: var(--tct-avatar-width, 44px);
+  background-color: var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e));
+  border-radius: var(--tct-avatar-br, 50%);
 }
 
 .size-1 {
-    --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);
+  --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);
 }
+
 .size-2 {
-    --tct-avatar-font-size: var(--tct-avatar-size-2, 50px);
+  --tct-avatar-font-size: var(--tct-avatar-size-2, 50px);
 }
+
 .size-3 {
-    --tct-avatar-font-size: var(--tct-avatar-size-3, 40px);
+  --tct-avatar-font-size: var(--tct-avatar-size-3, 40px);
 }
+
 .size-4 {
-    --tct-avatar-font-size: var(--tct-avatar-size-4, 30px);
+  --tct-avatar-font-size: var(--tct-avatar-size-4, 30px);
 }
 
 text {
-    fill: var(--tct-avatar-color, #ffffff);
-    font-weight: var(--tct-avatar-font-weight, 200);
-    font-size: var(--tct-avatar-font-size, 40px);
+  fill: var(--tct-avatar-color, #ffffff);
+  font-weight: var(--tct-avatar-font-weight, 200);
+  font-size: var(--tct-avatar-font-size, 40px);
 }
 
 .fallback {
-    height: var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));
-    width: var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));
-    border-radius: var(--tct-avatar-fallback-br, var(--tct-avatar-img-br, 50%));
-    background-color: var(--tct-avatar-fallback-bg, var(--tct-avatar-bg, #9e9e9e));
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  height: var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));
+  width: var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));
+  border-radius: var(--tct-avatar-fallback-br, var(--tct-avatar-img-br, 50%));
+  background-color: var(--tct-avatar-fallback-bg, var(--tct-avatar-bg, #9e9e9e));
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 q2-icon {
-    --t-icon-size: var(--tct-avatar-fallback-icon-size, 65%);
-    --t-icon-fill: var(--tct-avatar-fallback-fill, transparent);
-    --t-icon-stroke-primary: var(--tct-avatar-fallback-stroke-primary, currentcolor);
-    --t-icon-stroke-secondary: var(--tct-avatar-fallback-stroke-secondary, currentcolor);
-    color: var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff)));
-    width: var(--t-icon-size);
-    height: var(--t-icon-size);
-}
+  --t-icon-size: var(--tct-avatar-fallback-icon-size, 65%);
+  --t-icon-fill: var(--tct-avatar-fallback-fill, transparent);
+  --t-icon-stroke-primary: var(--tct-avatar-fallback-stroke-primary, currentcolor);
+  --t-icon-stroke-secondary: var(--tct-avatar-fallback-stroke-secondary, currentcolor);
+  color: var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff)));
+  width: var(--t-icon-size);
+  height: var(--t-icon-size);
+}

package/dist/collection/components/q2-btn/index.js

@@ -1,5 +1,5 @@
 import { Component, State, Prop, h, Watch, Listen, Element } from '@stencil/core';
-import { handleAriaLabel, loc } from 'src/utils';
+import { handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';
 export class Q2Btn {
   constructor() {
     this.handleSlotChange = () => {
@@ -11,16 +11,20 @@ export class Q2Btn {
     this.handleIcons();
     handleAriaLabel(this);
   }
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
+  }
   disable(ev) {
     if (this.disabled) {
       ev.stopImmediatePropagation();
     }
   }
   delegateFocus(event) {
-    if (event.target === this.hostElement) {
-      this.hostElement.shadowRoot.querySelector('button').focus();
-    }
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.hostElement.shadowRoot.querySelector('button').focus();
   }
+  //////// Method //////////
   ////////// OBSERVERS //////////
   ariaLabelObserver() {
     handleAriaLabel(this);