q2-tecton-elements 1.10.3 → 1.10.4

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, g as getElement } from './index-5fa3e016.js';
-import { c as createGuid } from './index-da24669a.js';
-import { i as icons } from './icons-17612675.js';
+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';
 
 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-5fa3e016.js';
-import { c as createGuid, b as setMessageHeight, h as handleAriaLabel, l as loc, m as messagesDOM, d as labelDOM } from './index-da24669a.js';
+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';
 
 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{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:var(\n        --tct-input-bg,\n        var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2)))\n    );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(\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 Q2Input = class {
   constructor(hostRef) {

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

@@ -1,5 +1,5 @@
-import { r as registerInstance } from './index-5fa3e016.js';
-import { a as atoms } from './shapes-073c5aad.js';
+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%}";
 

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-5fa3e016.js';
-import { l as loc } from './index-da24669a.js';
+import { r as registerInstance, h } from './index-be8376c0.js';
+import { l as loc } from './index-476b86cc.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,6 +1,7 @@
-import { r as registerInstance, h } from './index-5fa3e016.js';
+import { r as registerInstance, h, g as getElement } from './index-be8376c0.js';
+import { i as isFirefox, n as nextPaint } from './index-476b86cc.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(--app-scale-1, 5px));border-left-style:solid;display:flex;align-items:flex-start;background:var(--tct-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, inherit);box-shadow:var(--tct-message-box-shadow, inherit);border-radius:var(--tct-message-border-radius, inherit)}::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{padding:var(--tct-message-padding, var(--app-scale-3, 15px))}: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(--app-scale-2, 10px))}: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(\n        --tct-stoplight-success,\n        var(--const-stoplight-success, #0e8a00)\n    );--tct-icon-stroke-secondary:var(\n        --tct-stoplight-success,\n        var(--const-stoplight-success, #0e8a00)\n    )}: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(\n        --tct-stoplight-warning,\n        var(--const-stoplight-warning, #f0b400)\n    );--tct-icon-stroke-secondary:var(\n        --tct-stoplight-warning,\n        var(--const-stoplight-warning, #f0b400)\n    )}: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))}.message-icon{width:24px;margin-top:calc(var(--tct-scale-1, var(--app-scale-1, 5px)) * -1);margin-right:var(--tct-scale-1, var(--app-scale-1, 5px));margin-left:calc(var(--tct-scale-2, var(--app-scale-2, 10px)) * -1)}.message-content{flex:1}";
+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 Q2Message = class {
   constructor(hostRef) {
@@ -9,9 +10,26 @@ const Q2Message = class {
     this.appearance = 'standard';
     this.description = false;
   }
+  get isFirefox() {
+    return isFirefox();
+  }
+  async present() {
+    const { isFirefox } = this;
+    this.presentToggle = !this.presentToggle;
+    if (!isFirefox)
+      return;
+    nextPaint(() => {
+      this.presentToggle = false;
+    });
+  }
   render() {
-    return (h("div", { class: "message", role: this.description ? undefined : 'alert' }, this.appearance === 'standard' ? generateIcon(this.type) : '', h("div", { class: "message-content" }, h("slot", null))));
+    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))));
   }
+  get hostElement() { return getElement(this); }
 };
 function generateIcon(type) {
   const iconMap = {

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, g as getElement } from './index-5fa3e016.js';
-import { c as createGuid, l as loc } from './index-da24669a.js';
+import { r as registerInstance, h, g as getElement } from './index-be8376c0.js';
+import { c as createGuid, l as loc } from './index-476b86cc.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);}";
 

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-5fa3e016.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, 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}";
 

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-5fa3e016.js';
-import { c as createGuid, l as loc } from './index-da24669a.js';
+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';
 
-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}";
+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 Q2RadioGroup = class {
   constructor(hostRef) {
@@ -65,7 +65,11 @@ const Q2RadioGroup = class {
   }
   inputDom() {
     if (this.tilelayout) {
-      return (h("div", { class: this.tileAlignment === 'left' ? 'flexed left' : 'flexed' }, h("slot", null)));
+      const { tileAlignment } = this;
+      const alignment = ['left', 'center', 'right'].includes(tileAlignment)
+        ? tileAlignment
+        : 'center';
+      return (h("div", { class: `flexed ${alignment}` }, h("slot", null)));
     }
     else {
       return h("slot", null);

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5fa3e016.js';
-import { c as createGuid, h as handleAriaLabel, l as loc } from './index-da24669a.js';
+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';
 
 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))}";
 

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5fa3e016.js';
-import { c as createGuid, l as loc } from './index-da24669a.js';
+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';
 
 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}@keyframes expandVertical{0%{height:0}}@keyframes collapseVertical{100%{height:0}}:host{display:block;background-color:var(--tct-section-bg, var(--t-section-bg, var(--tct-white, var(--app-white, #ffffff))));color:var(--tct-section-font-color, var(--t-section-font-color, #2e2e2e));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, 3px));margin:var(--tct-scale-3, var(--app-scale-3, 15px))}@media screen and (max-width: 767px){:host{margin:var(--tct-scale-3, var(--app-scale-3, 15px)) 0}}.q2-section-wrapper{display:block;padding:var(--tct-scale-1, var(--app-scale-1, 5px)) 0}.q2-section-wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, inherit)}.q2-section-header{padding:0 var(--tct-scale-3, var(--app-scale-3, 15px));display:flex}.has-header .q2-section-header{min-height:44px}.q2-section-header-content{flex:1 1 100%;min-width:0;align-self:center}.collapsible .q2-section-header-content{cursor:pointer}.title{margin:0;font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}.toggle-icon{transition:transform var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}.collapsed .toggle-icon{transform:rotate(180deg)}.q2-section-content-wrapper{height:auto}.q2-section-content{padding:var(--tct-scale-2, var(--app-scale-2, 10px))\n        var(--tct-scale-3, var(--app-scale-3, 15px))}.expanded.animate .q2-section-content-wrapper{animation:expandVertical var(--tct-tween-2, var(--app-tween-2, 0.4s ease)) forwards}.collapsed .q2-section-content-wrapper{height:0;animation:collapseVertical 0s forwards;animation-duration:0;padding-top:0;visibility:hidden;overflow:hidden}.collapsed.animate .q2-section-content-wrapper{animation:collapseVertical var(--tct-tween-1, var(--app-tween-1, 0.2s ease)) forwards}.animate .q2-section-content-wrapper{overflow:hidden}";
 

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5fa3e016.js';
-import { c as createGuid, s as setPopProperties, l as loc, h as handleAriaLabel } from './index-da24669a.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
+import { c as createGuid, s as setPopProperties, l as loc, h as handleAriaLabel } from './index-476b86cc.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:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0}.custom-display-content{position:absolute;bottom:0;left:calc(var-list(--tct-scale-2, --app-scale-2, 10px) + 1px);height:44px;width:calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3, 15px));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var-list(--tct-scale-3, --app-scale-3, 15px) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3, 15px))}.dropdown-open .q2-select-dropdown{overflow-y:auto;max-height:300px}.multi-select-header{padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-2, var(--app-scale-2, 10px))}.show-all-options{margin-right:var(--tct-scale-1, var(--app-scale-1, 5px));margin-left:var(--tct-scale-2, var(--app-scale-2, 10px))}.q2-element-dropdown.dropup{bottom:40px}";
 

package/dist/esm/q2-stepper-pane.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, g as getElement } from './index-5fa3e016.js';
-import { c as createGuid, l as loc } from './index-da24669a.js';
+import { r as registerInstance, h, g as getElement } from './index-be8376c0.js';
+import { c as createGuid, l as loc } from './index-476b86cc.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;position:relative}";
 

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-5fa3e016.js';
-import { a as addSmoothScrollPolyfill, l as loc } from './index-da24669a.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-be8376c0.js';
+import { a as addSmoothScrollPolyfill, l as loc } from './index-476b86cc.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;position:relative}ul{--comp-bullet-bg:var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1)));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-bullet-size, var(--t-stepper-bullet-size, 18px));--comp-bullet-gap:var(--tct-stepper-bullet-padding, var(--t-stepper-bullet-padding, var(--app-scale-2x, 10px)));--comp-bullet-border-offset:var(--tct-stepper-bullet-border-offset, var(--t-stepper-bullet-border-offset, 4px));--comp-bullet-border:var(--tct-stepper-bullet-border, var(--t-stepper-bullet-border, 2px solid var(--t-primary-l3)));--comp-bullet-font-size:var(--tct-stepper-bullet-font-size, var(--t-stepper-bullet-font-size, var(--app-font-size-small, 12px)));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--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}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none}.step-btn[aria-disabled]{cursor:default}.step-btn[aria-disabled],.step-btn[aria-disabled]+hr{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-bg:var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray12, #d9d9d9)))}.step-bubble{margin:var(--comp-bullet-gap) auto;background:var(--comp-bullet-bg);color:var(--comp-bullet-font-color);width:var(--comp-bullet-size);height:var(--comp-bullet-size);min-height:var(--comp-bullet-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}[aria-selected] .step-bubble{font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}[aria-selected] .step-bubble:before{content:\"\";position:absolute;inset:calc(var(--comp-bullet-border-offset) * -1);width:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));height:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));border-radius:50%;border:var(--comp-bullet-border)}hr{width:calc( var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size) );top:calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));left:calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-bg);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d)));font-size:var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px)));height:1.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:1}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;padding-bottom:0.2em}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to right, var(--t-base), var(--t-base-a0));left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base));right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-bg:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left{left:0}.btn-right{right:0}";
 

package/dist/esm/q2-tab-container.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5fa3e016.js';
-import { a as addSmoothScrollPolyfill, c as createGuid, l as loc } from './index-da24669a.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-be8376c0.js';
+import { a as addSmoothScrollPolyfill, c as createGuid, l as loc } from './index-476b86cc.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-container{position:relative;display:flex;flex-direction:column}.tab-list{padding:0;display:flex;margin:0;list-style:none;border-bottom:1px solid\n        var(--tct-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));white-space:nowrap;overflow-x:hidden;align-items:center}.tab-list li.nav{position:absolute;height:44px;width:46px}.tab-list li.nav-left{left:-15px;background:linear-gradient(to right, var(--tct-section-bg, var(--t-section-bg, #ffffff)) 60%, rgba(255,255,255,0))}.tab-list li.nav-right{right:-15px;background:linear-gradient(to left, var(--tct-section-bg, var(--t-section-bg, #ffffff)) 60%, rgba(255,255,255,0))}.tab-list li.nav .arrow-container{display:flex;justify-content:center;align-items:center;height:inherit;width:inherit;cursor:pointer}.tab-list li.nav .arrow-container a{padding:0;margin:0;height:inherit;width:inherit;border-bottom:0;display:flex;align-items:center;justify-content:center}.tab-list li.nav .arrow-container a q2-icon{width:19px;height:19px}.tab-list a{width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%));text-align:center;text-decoration:none;padding:var(--tct-scale-2, var(--app-scale-2, 10px));margin:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px))\n        0;color:var(--tct-tab-inactive-color, var(--t-tab-inactive, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));border-bottom:3px solid transparent;display:block;transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type='section']) .tab-list a{font-size:inherit;padding:var(--tct-scale-2, var(--app-scale-2, 10px))\n        var(--tct-scale-1, var(--app-scale-1, 5px))}@media screen and (max-width: 767px){.tab-list a{font-size:inherit;padding:var(--tct-scale-2, var(--app-scale-2, 10px))\n            var(--tct-scale-1, var(--app-scale-1, 5px))}}@media print{.tab-list.no-print{display:none}}.tab-list a:hover{color:var(--tct-tab-active-color, var(--t-tab-active, #2e2e2e));background-color:var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}.tab-list a[aria-selected='true']{color:var(--tct-tab-active-color, var(--t-tab-active, #2e2e2e));border-color:currentColor;width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background-color:var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit))}:host([color='alt']) .tab-list a{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive, inherit))}:host([color='alt']) .tab-list a:hover,:host([color='alt']) .tab-list a[aria-selected='true']{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active, inherit))}.tab-content{padding:var(--tct-scale-2, var(--app-scale-2, 10px)) 0}.tab-content:focus{outline:none;box-shadow:none}";
+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;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1, 5px))));list-style:none;border-bottom:1px solid var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));display:block;transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));font-size:inherit;padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background-color:var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentColor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background-color:var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit))}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) 0;padding:var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding)))}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to right, var(--t-base), var(--t-base-a0));left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base));right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-bg:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left{left:0}.btn-right{right:0}";
 
 addSmoothScrollPolyfill();
 const userAgent = navigator.userAgent.toLowerCase();
@@ -17,6 +17,9 @@ const Q2TabContainer = class {
     this.lastScrolled = new Date(null).getTime();
     this.hasLeft = false;
     this.hasRight = false;
+    this.scrollEnabled = false;
+    this.showScrollLeft = false;
+    this.showScrollRight = false;
     ///////// Actions /////////
     this.updateTabData = () => {
       this.updateTabPaneProps();
@@ -30,131 +33,97 @@ const Q2TabContainer = class {
       });
     };
     this.setTabs = () => {
-      this.tabs = this.tabPanes.map(({ label, value }) => {
-        return {
-          label: (label && loc(label)) || '',
-          value
-        };
-      });
+      this.tabs = this.tabPanes.map(({ label, value }) => ({
+        label: (label && loc(label)) || '',
+        value
+      }));
     };
     this.onTabClick = (event) => {
+      const isAlreadySelected = this.value === event.target.dataset.value;
+      if (isAlreadySelected)
+        return;
       this.change.emit({
         value: event.target.dataset.value
       });
     };
     this.onTabKeyDown = (event) => {
       const value = event.target.dataset.value;
-      if (event.key === 'ArrowRight' || event.key === 'Right') {
-        this.moveToAdjacentTab(value, 'next');
-        return;
-      }
-      if (event.key === 'ArrowLeft' || event.key === 'Left') {
-        this.moveToAdjacentTab(value, 'prev');
-        return;
-      }
-      if (event.code === 'Space' || event.code === 'Enter') {
-        // to prevent triggering scroll when press the space key
-        event.preventDefault();
-        this.change.emit({ value });
-        return;
+      switch (event.key) {
+        case 'ArrowRight':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'next');
+          break;
+        case 'ArrowLeft':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'prev');
+          break;
+        case 'Home':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'first');
+          break;
+        case 'End':
+          event.preventDefault();
+          this.moveToAdjacentTab(value, 'last');
+          break;
+        case 'Space':
+        case 'Enter':
+          event.preventDefault();
+          this.change.emit({ value });
+          break;
       }
     };
     this.moveToAdjacentTab = (value, direction) => {
       let index = this.tabs.map(({ value }) => value).indexOf(value);
-      let newIndex = direction === 'next'
-        ? Math.min(index + 1, this.tabs.length - 1)
-        : Math.max(index - 1, 0);
-      if (index !== newIndex) {
-        const focusedTab = this.moveFocus(newIndex);
-        // Scroll only if it overflows
-        if (this.tabList.scrollWidth > this.tabList.clientWidth) {
-          // Scroll only if it's first or last tab
-          if (newIndex !== 0 && newIndex !== this.tabs.length - 1) {
-            this.scrollByKeyboard(direction, focusedTab);
-          }
-          else {
-            // first or last element: just show or hide nav arrow
-            this.onTabScroll(direction);
-          }
-        }
+      let newIndex;
+      switch (direction) {
+        case 'next':
+          newIndex = Math.min(index + 1, this.tabs.length - 1);
+          break;
+        case 'prev':
+          newIndex = Math.max(index - 1, 0);
+          break;
+        case 'first':
+          newIndex = 0;
+          break;
+        case 'last':
+          newIndex = this.tabs.length - 1;
+          break;
       }
+      if (index === newIndex)
+        return;
+      this.moveFocus(newIndex, false);
     };
     this.moveFocus = (index, preventScroll = true) => {
       const focusedValue = this.tabs[index].value;
-      const focusedTab = this.hostElement.shadowRoot.querySelector(`.tab-list a[data-value="${focusedValue}"]`);
+      const focusedTab = this.listElement.querySelector(`[data-value="${focusedValue}"]`);
       focusedTab.focus({ preventScroll });
+      const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;
+      this.listElement.scrollTo({
+        left,
+        behavior: 'smooth'
+      });
       return focusedTab;
     };
-    this.calculateKeyboardScroll = (direction, focusedTab) => {
-      const { left: tabListLeft } = this.tabList.getBoundingClientRect();
-      const { left: focusedTabLeft } = focusedTab.getBoundingClientRect();
-      const arrowWidth = 46;
-      let scrollAmount = 0;
-      // check how much focused tab overflows
-      if (direction === 'next' &&
-        focusedTabLeft + focusedTab.clientWidth >
-          tabListLeft + this.tabList.clientWidth + arrowWidth) {
-        scrollAmount =
-          this.tabList.scrollLeft +
-            arrowWidth +
-            (focusedTabLeft + focusedTab.clientWidth) -
-            (tabListLeft + this.tabList.clientWidth);
-      }
-      else if (direction === 'prev' && focusedTabLeft + arrowWidth < tabListLeft) {
-        scrollAmount = this.tabList.scrollLeft - arrowWidth + (focusedTabLeft - tabListLeft);
-      }
-      return scrollAmount;
-    };
-    this.scrollByKeyboard = (direction, focusedTab) => {
-      const scrollAmount = this.calculateKeyboardScroll(direction, focusedTab);
-      if (scrollAmount !== 0) {
-        this.tabList.scroll({ left: scrollAmount, behavior: 'smooth' });
-        // wait to finish scroll then show or hide nav arrow
-        setTimeout(() => this.onTabScroll(), 100);
-      }
+    this.checkScrollState = () => {
+      const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
+      this.scrollEnabled = scrollWidth > clientWidth;
+      this.showScrollLeft = !!scrollLeft;
+      this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;
     };
-    this.calculateTabScroll = ({ direction, scrollWidth, clientWidth, scrollLeft }) => {
-      const directions = { prev: -1, next: 1 };
-      // step 0 means no scroll needed, re-render or resize can trigger this
-      const step = directions[direction] || 0;
-      const scrollRate = 0.5; // half of visual width
-      const delta = Math.round(clientWidth * scrollRate);
-      const newScrollLeft = scrollLeft + step * delta;
-      const scrolled = clientWidth + newScrollLeft;
-      const hasLeft = newScrollLeft > 0;
-      const hasRight = scrollWidth > scrolled;
-      return {
-        newScrollLeft,
-        hasLeft,
-        hasRight
-      };
-    };
-    this.onTabScroll = (direction) => {
-      // throttle under 50ms due to re-rendering & resizing
-      const now = new Date().getTime();
-      if (now - this.lastScrolled < 50)
-        return;
-      this.lastScrolled = now;
-      if (!this.tabList)
-        return;
-      let { scrollWidth, clientWidth, scrollLeft } = this.tabList;
-      const { newScrollLeft, hasLeft, hasRight } = this.calculateTabScroll({
-        direction,
-        scrollWidth,
-        clientWidth,
-        scrollLeft
+    this.onScrollBtnClick = (direction) => {
+      const scrollAmount = Math.floor(this.listElement.clientWidth / 2);
+      this.listElement.scrollBy({
+        left: direction === 'left' ? -scrollAmount : scrollAmount,
+        behavior: 'smooth'
       });
-      this.hasLeft = hasLeft;
-      this.hasRight = hasRight;
-      if (direction) {
-        this.tabList.scroll({ left: newScrollLeft, behavior: 'smooth' });
-      }
+    };
+    this.onSlotChange = () => {
+      this.checkScrollState();
     };
   }
   resizeIframe() {
-    return (window.TectonElements &&
-      window.TectonElements.resizeIframe &&
-      window.TectonElements.resizeIframe());
+    var _a, _b;
+    return (_b = (_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe) === null || _b === void 0 ? void 0 : _b.call(_a);
   }
   get tabPanes() {
     const tabPanes = this.hostElement.querySelectorAll('q2-tab-pane, tecton-tab-pane');
@@ -176,7 +145,7 @@ const Q2TabContainer = class {
     }
   }
   onResize() {
-    this.onTabScroll();
+    this.checkScrollState();
   }
   onFocus() {
     // firefox receives focus on overflowed element even if it's not interactive element
@@ -190,25 +159,26 @@ const Q2TabContainer = class {
     const observer = new MutationObserver(this.updateTabData);
     observer.observe(this.hostElement, { childList: true, attributes: true });
     this.mutationObserver = observer;
+    this.resizeObserver = new ResizeObserver(() => this.checkScrollState());
     this.updateTabData();
   }
   componentDidRender() {
     this.scheduledAfterRender.forEach(fn => fn());
     this.scheduledAfterRender = [];
     this.settled.emit();
-    this.onTabScroll();
   }
   componentDidLoad() {
+    this.resizeObserver.observe(this.listElement);
+    this.checkScrollState();
     const index = this.tabs.findIndex(el => el.value === this.value);
-    // move focus if the value is valid and not the first tab's value
-    if (index > 0) {
-      this.scheduledAfterRender.push(() => {
-        const tab = this.moveFocus(index, false);
-        tab.blur();
-      });
-    }
+    this.scheduledAfterRender.push(() => {
+      const tab = this.moveFocus(Math.max(index, 0), false);
+      this.value = tab.dataset.value;
+      tab.blur();
+    });
   }
   disconnectedCallback() {
+    this.resizeObserver.disconnect();
     this.mutationObserver.disconnect();
     this.mutationObserver = null;
   }
@@ -226,12 +196,12 @@ const Q2TabContainer = class {
   }
   ///////// View Methods /////////
   render() {
-    return (h("div", { class: "tab-container" }, h("ul", { class: `tab-list ${this.noPrint ? 'no-print' : ''}`, role: "tablist" }, this.hasLeft && (h("li", { role: "presentation", class: "nav nav-left", onClick: () => this.onTabScroll('prev') }, h("div", { class: "arrow-container" }, h("a", null, h("q2-icon", { type: "chevron-left" }))))), this.tabs.map((tab, index) => this.generateTab(tab, index)), this.hasRight && (h("li", { role: "presentation", class: "nav nav-right", onClick: () => this.onTabScroll('next') }, h("div", { class: "arrow-container" }, h("a", null, h("q2-icon", { type: "chevron-right" })))))), h("div", { class: "tab-content" }, h("slot", null))));
+    return (h(Fragment, null, h("div", { class: "tab-container" }, this.scrollEnabled && (h(Fragment, null, h("div", { class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { type: "chevron-left" })), h("q2-btn", { class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { type: "chevron-right" })))), h("ul", { onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.generateTab(tab, index)))), h("div", { class: "tab-content" }, h("slot", { onSlotchange: () => this.onSlotChange() }))));
   }
   generateTab(tab, index) {
     const { label, value } = tab;
     const isSelected = this.selectedTabValue === value;
-    return (h("li", { role: "presentation" }, h("a", { id: `tab-${this.guid}-${index}`, href: "javascript://", "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": `${isSelected}`, "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, label)));
+    return (h("li", { role: "presentation" }, h("button", { id: `tab-${this.guid}-${index}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": isSelected ? 'true' : undefined, "aria-controls": `tab-pane-${this.guid}-${index}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, label)));
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/q2-tab-pane.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-5fa3e016.js';
+import { r as registerInstance, h } 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}.tab-pane[aria-hidden='true']{display:none}.tab-pane:focus{outline:none;box-shadow:none}";