q2-tecton-elements 1.37.1 → 1.38.1

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2597758.js');
-const index$1 = require('./index-6f9f259c.js');
+const index$1 = require('./index-09c712ea.js');
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline}";
 
 const Q2Loc = class {
   constructor(hostRef) {

package/dist/cjs/q2-loc.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"q2-loc.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,mrBAAmrB;;MCQxrB,KAAK;;;;;;EAId,MAAM;IACF,OAAOA,sBAAOC,WAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,CAAQ,CAAC;GAC7D;;;;;;","names":["h","loc"],"sources":["./src/components/q2-loc/styles.scss?tag=q2-loc&encapsulation=shadow","./src/components/q2-loc/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    display: inline\n}","import { Component, Prop, h } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({\n    tag: 'q2-loc',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Loc {\n    @Prop({ reflect: true }) value: string;\n    @Prop() substitutions: string[];\n\n    render() {\n        return <span>{loc(this.value, this.substitutions)}</span>;\n    }\n}\n"],"version":3}
+{"file":"q2-loc.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,8qBAA8qB;;MCQnrB,KAAK;;;;;;EAId,MAAM;IACF,OAAOA,sBAAOC,WAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,CAAQ,CAAC;GAC7D;;;;;;","names":["h","loc"],"sources":["./src/components/q2-loc/styles.scss?tag=q2-loc&encapsulation=shadow","./src/components/q2-loc/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    display: inline\n}","import { Component, Prop, h } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({\n    tag: 'q2-loc',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Loc {\n    @Prop({ reflect: true }) value: string;\n    @Prop() substitutions: string[];\n\n    render() {\n        return <span>{loc(this.value, this.substitutions)}</span>;\n    }\n}\n"],"version":3}

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2597758.js');
-const index$1 = require('./index-6f9f259c.js');
+const index$1 = require('./index-09c712ea.js');
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){padding-left:var(--tct-scale-l3, var(--app-scale-3x, 15px))}:host(:not([appearance])),:host([appearance=standard]){margin:var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){margin:var(--tct-scale-l3, var(--app-scale-3x, 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-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 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, #C35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #C35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #C35500))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){padding-left:var(--tct-scale-l3, var(--app-scale-3x, 15px))}:host(:not([appearance])),:host([appearance=standard]){margin:var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){margin:var(--tct-scale-l3, var(--app-scale-3x, 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-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 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, #C35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #C35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #C35500))}: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) {
@@ -21,6 +21,9 @@ const Q2Message = class {
   componentDidLoad() {
     index$1.overrideFocus(this.hostElement);
   }
+  /**
+   * Prompts assistive technology to announce the message.
+   */
   async present() {
     const { isFirefox } = this;
     this.presentToggle = !this.presentToggle;

package/dist/cjs/q2-message.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"q2-message.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,8yIAA8yI;;MCQnzI,SAAS;;;gBACmE,MAAM;sBAC7B,UAAU;uBACxB,KAAK;;;EAMrD,IAAI,SAAS;IACT,OAAOA,iBAAc,EAAE,CAAC;GAC3B;EAED,gBAAgB;IACZC,qBAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GACnC;EAGD,MAAM,OAAO;IACT,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3B,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;IACzC,IAAI,CAAC,SAAS;MAAE,OAAO;IACvBC,iBAAS,CAAC;MACN,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC9B,CAAC,CAAC;GACN;EAGD,aAAa,CAAC,KAAiB;IAC3B,IAAI,CAACC,0BAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;MAAE,OAAO;IACzD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAc,UAAU,CAAC,CAAC,KAAK,EAAE,CAAC;GAC9E;EAED,MAAM;IACF,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3B,MAAM,wBAAwB,GAAG,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;IACjE,MAAM,iBAAiB,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;IAC3D,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IAC7B,MAAM,YAAY,GAAWC,WAAG,CAAC,+BAA+B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,EAAE,CAAC,CAAC;IAElG,QACIC,iBACI,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO,eAC5B,WAAW,GAAG,SAAS,GAAG,WAAW,iBACnC,WAAW,GAAG,SAAS,GAAG,MAAM,mBAC9B,WAAW,GAAG,SAAS,GAAG,KAAK,aACtC,kBAAkB,IAEzB,IAAI,CAAC,UAAU,KAAK,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,EACjE,iBAAiB,IAAIA,iBAAK,KAAK,EAAC,IAAI,GAAO,EAC5CA,iBAAK,KAAK,EAAC,kBAAkB,IAAE,YAAY,CAAO,EAClDA,iBACI,KAAK,EAAC,iBAAiB,iBACV,wBAAwB,GAAG,MAAM,GAAG,SAAS,IAE1DA,qBAAQ,CACN,CACJ,EACR;GACL;EAED,WAAW,CAAC,IAAY;IACpB,MAAM,OAAO,GAAG;MACZ,OAAO,EAAE,SAAS;MAClB,OAAO,EAAE,SAAS;MAClB,MAAM,EAAE,OAAO;MACf,KAAK,EAAE,OAAO;MACd,IAAI,EAAE,MAAM;KACf,CAAC;IAEF,MAAM,QAAQ,GAAW,OAAO,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC;IAEvD,QACIA,qBACI,IAAI,EAAE,QAAQ,EACd,KAAK,EAAC,cAAc,GACtB,EACJ;GACL;;;;;;;","names":["checkIfFirefox","overrideFocus","nextPaint","isEventFromElement","loc","h"],"sources":["./src/components/q2-message/styles.scss?tag=q2-message&encapsulation=shadow","./src/components/q2-message/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.message {\n    border-left-width: #{var-list(var-prefixer(message-bar-width), --app-scale-1x, 5px)};\n    border-left-style: solid;\n    --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n    display: grid;\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n    align-items: flex-start;\n    background: var-list(\n        --tct-message-background,\n        var-prefixer(message-bg),\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: #{var-list(var-prefixer(message-font-color), inherit)};\n    box-shadow: #{var-list(var-prefixer(message-box-shadow), inherit)};\n    border-radius: #{var-list(var-prefixer(message-border-radius), inherit)};\n\n    &:focus {\n        box-shadow: var(--const-global-focus);\n    }\n}\n\n.message-icon {\n    --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n    --tct-icon-size: var(--comp-icon-size);\n    top: var(--comp-top-offset);\n    margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n    flex: 1;\n    line-height: var(--comp-line-height);\n}\n\n::slotted(ul) {\n    padding-left: var-list(--tct-scale-l3, --app-scale-3x, 15px);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n    margin: var-list(--tct-scale-l3, --app-scale-3x, 15px) 0;\n\n    .message {\n        --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n        --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n        grid-template-columns: var(--comp-icon-size) 1fr;\n        padding: var(--comp-padding);\n        padding-left: calc(var(--comp-padding) - #{var-list(--tct-scale-2, --app-scale-2x, 10px)});\n        padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-l3, --app-scale-3x, 15px) 0;\n    }\n}\n\n:host([appearance='minimal']) {\n    margin: 0;\n\n    .message {\n        padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n        grid-template-columns: 1fr;\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n    }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1);\n    }\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n    }\n}\n\n:host([type='success']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00);\n    }\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n    }\n}\n\n:host([type='warning']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-warning, --const-stoplight-warning, #C35500);\n    }\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #C35500)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #C35500)};\n    }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000);\n    }\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n    }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-message',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Message {\n    @Prop({ reflect: true }) type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n    @Prop({ reflect: true }) appearance: 'minimal' | 'standard' = 'standard';\n    @Prop({ reflect: true }) description: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() presentToggle: boolean;\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div class=\"sr message-label\">{messageLabel}</div>\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    messageIcon(type: string) {\n        const iconMap = {\n            success: 'success',\n            warning: 'warning',\n            danger: 'error',\n            error: 'error',\n            info: 'info',\n        };\n\n        const iconType: string = iconMap[type] || iconMap.info;\n\n        return (\n            <q2-icon\n                type={iconType}\n                class=\"message-icon\"\n            />\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-message.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,yyIAAyyI;;MCQ9yI,SAAS;;;gBACmE,MAAM;sBAC7B,UAAU;uBACxB,KAAK;;;EAMrD,IAAI,SAAS;IACT,OAAOA,iBAAc,EAAE,CAAC;GAC3B;EAED,gBAAgB;IACZC,qBAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GACnC;;;;EAMD,MAAM,OAAO;IACT,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3B,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;IACzC,IAAI,CAAC,SAAS;MAAE,OAAO;IACvBC,iBAAS,CAAC;MACN,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC9B,CAAC,CAAC;GACN;EAGD,aAAa,CAAC,KAAiB;IAC3B,IAAI,CAACC,0BAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;MAAE,OAAO;IACzD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAc,UAAU,CAAC,CAAC,KAAK,EAAE,CAAC;GAC9E;EAED,MAAM;IACF,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3B,MAAM,wBAAwB,GAAG,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;IACjE,MAAM,iBAAiB,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;IAC3D,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IAC7B,MAAM,YAAY,GAAWC,WAAG,CAAC,+BAA+B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,EAAE,CAAC,CAAC;IAElG,QACIC,iBACI,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO,eAC5B,WAAW,GAAG,SAAS,GAAG,WAAW,iBACnC,WAAW,GAAG,SAAS,GAAG,MAAM,mBAC9B,WAAW,GAAG,SAAS,GAAG,KAAK,aACtC,kBAAkB,IAEzB,IAAI,CAAC,UAAU,KAAK,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,EACjE,iBAAiB,IAAIA,iBAAK,KAAK,EAAC,IAAI,GAAO,EAC5CA,iBAAK,KAAK,EAAC,kBAAkB,IAAE,YAAY,CAAO,EAClDA,iBACI,KAAK,EAAC,iBAAiB,iBACV,wBAAwB,GAAG,MAAM,GAAG,SAAS,IAE1DA,qBAAQ,CACN,CACJ,EACR;GACL;EAED,WAAW,CAAC,IAAY;IACpB,MAAM,OAAO,GAAG;MACZ,OAAO,EAAE,SAAS;MAClB,OAAO,EAAE,SAAS;MAClB,MAAM,EAAE,OAAO;MACf,KAAK,EAAE,OAAO;MACd,IAAI,EAAE,MAAM;KACf,CAAC;IAEF,MAAM,QAAQ,GAAW,OAAO,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC;IAEvD,QACIA,qBACI,IAAI,EAAE,QAAQ,EACd,KAAK,EAAC,cAAc,GACtB,EACJ;GACL;;;;;;;","names":["checkIfFirefox","overrideFocus","nextPaint","isEventFromElement","loc","h"],"sources":["./src/components/q2-message/styles.scss?tag=q2-message&encapsulation=shadow","./src/components/q2-message/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.message {\n    border-left-width: #{var-list(var-prefixer(message-bar-width), --app-scale-1x, 5px)};\n    border-left-style: solid;\n    --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n    display: grid;\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n    align-items: flex-start;\n    background: var-list(\n        --tct-message-background,\n        var-prefixer(message-bg),\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: #{var-list(var-prefixer(message-font-color), inherit)};\n    box-shadow: #{var-list(var-prefixer(message-box-shadow), inherit)};\n    border-radius: #{var-list(var-prefixer(message-border-radius), inherit)};\n\n    &:focus {\n        box-shadow: var(--const-global-focus);\n    }\n}\n\n.message-icon {\n    --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n    --tct-icon-size: var(--comp-icon-size);\n    top: var(--comp-top-offset);\n    margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n    flex: 1;\n    line-height: var(--comp-line-height);\n}\n\n::slotted(ul) {\n    padding-left: var-list(--tct-scale-l3, --app-scale-3x, 15px);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n    margin: var-list(--tct-scale-l3, --app-scale-3x, 15px) 0;\n\n    .message {\n        --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n        --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n        grid-template-columns: var(--comp-icon-size) 1fr;\n        padding: var(--comp-padding);\n        padding-left: calc(var(--comp-padding) - #{var-list(--tct-scale-2, --app-scale-2x, 10px)});\n        padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-l3, --app-scale-3x, 15px) 0;\n    }\n}\n\n:host([appearance='minimal']) {\n    margin: 0;\n\n    .message {\n        padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n        grid-template-columns: 1fr;\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n    }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1);\n    }\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n    }\n}\n\n:host([type='success']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00);\n    }\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n    }\n}\n\n:host([type='warning']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-warning, --const-stoplight-warning, #C35500);\n    }\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #C35500)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #C35500)};\n    }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n    .message {\n        border-left-color: var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000);\n    }\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n    }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-message',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Message {\n    @Prop({ reflect: true }) type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n    @Prop({ reflect: true }) appearance: 'minimal' | 'standard' = 'standard';\n    @Prop({ reflect: true }) description: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() presentToggle: boolean;\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    /**\n     * Prompts assistive technology to announce the message.\n     */\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div class=\"sr message-label\">{messageLabel}</div>\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    messageIcon(type: string) {\n        const iconMap = {\n            success: 'success',\n            warning: 'warning',\n            danger: 'error',\n            error: 'error',\n            info: 'info',\n        };\n\n        const iconType: string = iconMap[type] || iconMap.info;\n\n        return (\n            <q2-icon\n                type={iconType}\n                class=\"message-icon\"\n            />\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/q2-month-picker.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2597758.js');
-const index$1 = require('./index-6f9f259c.js');
+const index$1 = require('./index-09c712ea.js');
 
-const q2MonthPickerCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";
+const q2MonthPickerCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";
 
 const Q2MonthPicker = class {
   constructor(hostRef) {

package/dist/cjs/q2-month-picker.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"q2-month-picker.entry.cjs.js","mappings":"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","names":["loc","overrideFocus","h","index"],"sources":["./src/components/q2-calendar/q2-month-picker.scss?tag=q2-month-picker&encapsulation=shadow","./src/components/q2-calendar/q2-month-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.month-container {\n    --comp-month-primary-background: #{var-list(--tct-btn-primary-background, var-prefixer(btn-primary-bg), #2e2e2e)};\n    --comp-month-primary-font-color: #{var-list(var-prefixer(btn-primary-font-color), --tct-white, --app-white, #ffffff)};\n    --comp-month-primary-background: #{var-list(\n            --tct-btn-secondary-background,\n            --tct-btn-secondary-bg,\n            --t-button-default-bg,\n            #cccccc\n        )};\n    --comp-month-secondary-font-color: #{var-list(\n            var-prefixer(btn-secondary-font-color),\n            --t-button-default-font-color,\n            #2e2e2e\n        )};\n    .navigation {\n        display: flex;\n        justify-content: space-between;\n        flex-direction: row;\n        .year-btn {\n            padding: 0 1rem;\n            display: flex;\n            align-items: center;\n            .year {\n                margin-right: 0.2rem;\n            }\n            .year-icon {\n                --t-icon-stroke-width: 2px;\n                width: 16px;\n                height: 16px;\n                transition: all 0.3s ease-in-out;\n                &.on {\n                    transform: rotate(-180deg);\n                }\n            }\n        }\n        .month-controller {\n            display: flex;\n            align-items: center;\n        }\n    }\n    .month-list {\n        display: grid;\n        grid-template-columns: auto auto auto;\n        .month {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 0.5rem 0;\n            .month-button {\n                border-radius: 50%;\n                aspect-ratio: 1;\n                width: 50px;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                &:hover {\n                    background: var(--comp-month-primary-background);\n                    color: var(--comp-month-secondary-font-color);\n                    cursor: pointer;\n                }\n                &:active,\n                &.active {\n                    background: var(--comp-month-primary-background);\n                    color: var(--comp-month-primary-font-color);\n                }\n            }\n        }\n    }\n\n    .today-label {\n        padding: 0.5rem 0;\n        color: var-list(\n            var-prefixer(calendar-day-selected-outline-color),\n            --tct-stoplight-info,\n            --const-stoplight-info,\n            #0079c1\n        );\n    }\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Event, EventEmitter } from '@stencil/core';\nimport { loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-month-picker',\n    shadow: true,\n    styleUrl: 'q2-month-picker.scss',\n})\nexport class Q2MonthPicker implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) year: number = Number(\n        new Date().toLocaleString('en-US', { year: 'numeric' })\n    );\n    @Prop({ reflect: true }) disabledMonths: string[];\n    @Prop() today: string;\n    @Element() hostElement: HTMLElement;\n    @Event() viewChange: EventEmitter;\n    @Event() toggleChange: EventEmitter;\n    @State() selectedIndex: number = 0;\n    @State() focusedIndex: number = 0;\n    @State() showYearLayer: boolean = false;\n    scheduledAfterRender: (() => void)[] = [];\n\n    private monthGrid = [\n        [0, 1, 2],\n        [3, 4, 5],\n        [6, 7, 8],\n        [9, 10, 11],\n    ];\n    private months = [\n        'January',\n        'February',\n        'March',\n        'April',\n        'May',\n        'June',\n        'July',\n        'August',\n        'September',\n        'October',\n        'November',\n        'December',\n    ].map(mon => ({\n        label: loc(`tecton.element.calendar.months.${mon}`),\n        abbr: loc(`tecton.element.calendar.months.abbr.${mon}`),\n    }));\n\n    componentDidRender() {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    onMonthSelection = (event: MouseEvent) => {\n        const targetElement = (event.target as HTMLButtonElement).closest('.month-button') as HTMLElement;\n        if (targetElement?.dataset?.index) {\n            this.selectMonth(Number(targetElement?.dataset?.index));\n        }\n    };\n\n    onMonthKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'Escape' || event.key === 'Esc') {\n            this.toggleChange.emit({ close: true });\n            return;\n        }\n        const monthIndex = (event.target as HTMLElement).dataset.index;\n        if (!monthIndex) return;\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            event.stopPropagation();\n            this.selectMonth(Number(monthIndex));\n        } else {\n            const nextMonthIndex = this.moveMonth(this.monthGrid, Number(monthIndex), event);\n            this.focusMonth(nextMonthIndex);\n        }\n    };\n\n    moveMonth = (grid: number[][], index: number, event: KeyboardEvent) => {\n        const rows = grid.length;\n        const cols = grid[0].length;\n        const row = Math.floor(index / cols);\n        const col = index % cols;\n        const current = [row, col];\n        if (event.key === 'ArrowUp') {\n            event.stopPropagation();\n            event.preventDefault();\n            return grid[Math.max(0, current[0] - 1)][current[1]];\n        } else if (event.key === 'ArrowDown') {\n            event.stopPropagation();\n            event.preventDefault();\n            return grid[Math.min(rows - 1, current[0] + 1)][current[1]];\n        } else if (event.key === 'ArrowLeft') {\n            event.stopPropagation();\n            event.preventDefault();\n            return Math.max(0, index - 1);\n        } else if (event.key === 'ArrowRight') {\n            event.stopPropagation();\n            event.preventDefault();\n            return Math.min(this.months.length - 1, index + 1);\n        } else {\n            return grid[current[0]][current[1]];\n        }\n    };\n\n    focusMonth = (index: number) => {\n        const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n            `.month-button[data-index=\"${index}\"]`\n        );\n        if (nextMonth) {\n            this.focusedIndex = index;\n            nextMonth.focus();\n        }\n    };\n\n    selectMonth = (index: number) => {\n        this.selectedIndex = index;\n        this.focusedIndex = index;\n        const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n            `.month-button[data-index=\"${index}\"]`\n        );\n        this.hostElement.shadowRoot\n            .querySelectorAll<HTMLElement>(`.month-button`)\n            ?.forEach(el => el.classList.remove('active'));\n        nextMonth?.classList.add('active');\n        nextMonth?.focus();\n        const value = {\n            view: 'day', // change to day view\n            monthIndex: index,\n            selectedYear: this.year,\n        };\n        this.hostElement.onchange?.(\n            new CustomEvent('click', {\n                bubbles: true,\n                detail: value,\n            })\n        );\n        this.viewChange.emit(value);\n    };\n    selectYear = (year: number) => {\n        this.year = Math.max(1970, year);\n    };\n\n    render() {\n        return (\n            <div\n                class=\"month-container\"\n                onKeyDown={this.onMonthKeydown}\n            >\n                <div class=\"navigation\">\n                    <q2-btn\n                        class=\"year-btn\"\n                        onClick={() =>\n                            this.viewChange.emit({\n                                view: 'year',\n                                selectedYear: this.year,\n                            })\n                        }\n                    >\n                        <span class=\"year\">{this.year}</span>\n                        <q2-icon\n                            class=\"year-icon off\"\n                            type=\"chevron-down\"\n                        ></q2-icon>\n                    </q2-btn>\n                    <div class=\"month-controller\">\n                        <div class=\"cal-year-prev-next\">\n                            <q2-btn\n                                label={loc('tecton.element.calendar.previousYear')}\n                                hide-label\n                                class=\"cal-nav-btn prev-year\"\n                                test-id=\"previousYearButton\"\n                                onClick={() => this.selectYear(this.year - 1)}\n                            >\n                                <q2-icon type=\"arrow-left\" />\n                            </q2-btn>\n                            <q2-btn\n                                label={loc('tecton.element.calendar.nextYear')}\n                                hide-label\n                                class=\"cal-nav-btn next-year\"\n                                test-id=\"nextYearButton\"\n                                onClick={() => this.selectYear(this.year + 1)}\n                            >\n                                <q2-icon type=\"arrow-right\" />\n                            </q2-btn>\n                        </div>\n                    </div>\n                </div>\n                <div\n                    class=\"month-list\"\n                    onClick={this.onMonthSelection}\n                >\n                    {this.months.map((month, index) => (\n                        <div class=\"month\">\n                            <span\n                                role=\"button\"\n                                class=\"month-button\"\n                                data-index={index}\n                                aria-label={month.label}\n                                tabindex={index === this.focusedIndex ? 0 : -1}\n                            >\n                                {month.abbr}\n                            </span>\n                        </div>\n                    ))}\n                </div>\n                {this.today && (\n                    <div class=\"today-label\">\n                        {loc('tecton.element.calendar.today')}: {this.today}\n                    </div>\n                )}\n            </div>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-month-picker.entry.cjs.js","mappings":"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","names":["loc","overrideFocus","h","index"],"sources":["./src/components/q2-calendar/q2-month-picker.scss?tag=q2-month-picker&encapsulation=shadow","./src/components/q2-calendar/q2-month-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.month-container {\n    --comp-month-primary-background: #{var-list(--tct-btn-primary-background, var-prefixer(btn-primary-bg), #2e2e2e)};\n    --comp-month-primary-font-color: #{var-list(var-prefixer(btn-primary-font-color), --tct-white, --app-white, #ffffff)};\n    --comp-month-primary-background: #{var-list(\n            --tct-btn-secondary-background,\n            --tct-btn-secondary-bg,\n            --t-button-default-bg,\n            #cccccc\n        )};\n    --comp-month-secondary-font-color: #{var-list(\n            var-prefixer(btn-secondary-font-color),\n            --t-button-default-font-color,\n            #2e2e2e\n        )};\n    .navigation {\n        display: flex;\n        justify-content: space-between;\n        flex-direction: row;\n        .year-btn {\n            padding: 0 1rem;\n            display: flex;\n            align-items: center;\n            .year {\n                margin-right: 0.2rem;\n            }\n            .year-icon {\n                --t-icon-stroke-width: 2px;\n                width: 16px;\n                height: 16px;\n                transition: all 0.3s ease-in-out;\n                &.on {\n                    transform: rotate(-180deg);\n                }\n            }\n        }\n        .month-controller {\n            display: flex;\n            align-items: center;\n        }\n    }\n    .month-list {\n        display: grid;\n        grid-template-columns: auto auto auto;\n        .month {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 0.5rem 0;\n            .month-button {\n                border-radius: 50%;\n                aspect-ratio: 1;\n                width: 50px;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                &:hover {\n                    background: var(--comp-month-primary-background);\n                    color: var(--comp-month-secondary-font-color);\n                    cursor: pointer;\n                }\n                &:active,\n                &.active {\n                    background: var(--comp-month-primary-background);\n                    color: var(--comp-month-primary-font-color);\n                }\n            }\n        }\n    }\n\n    .today-label {\n        padding: 0.5rem 0;\n        color: var-list(\n            var-prefixer(calendar-day-selected-outline-color),\n            --tct-stoplight-info,\n            --const-stoplight-info,\n            #0079c1\n        );\n    }\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Event, EventEmitter } from '@stencil/core';\nimport { loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-month-picker',\n    shadow: true,\n    styleUrl: 'q2-month-picker.scss',\n})\nexport class Q2MonthPicker implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) year: number = Number(\n        new Date().toLocaleString('en-US', { year: 'numeric' })\n    );\n    @Prop({ reflect: true }) disabledMonths: string[];\n    @Prop() today: string;\n    @Element() hostElement: HTMLElement;\n    @Event() viewChange: EventEmitter;\n    @Event() toggleChange: EventEmitter;\n    @State() selectedIndex: number = 0;\n    @State() focusedIndex: number = 0;\n    @State() showYearLayer: boolean = false;\n    scheduledAfterRender: (() => void)[] = [];\n\n    private monthGrid = [\n        [0, 1, 2],\n        [3, 4, 5],\n        [6, 7, 8],\n        [9, 10, 11],\n    ];\n    private months = [\n        'January',\n        'February',\n        'March',\n        'April',\n        'May',\n        'June',\n        'July',\n        'August',\n        'September',\n        'October',\n        'November',\n        'December',\n    ].map(mon => ({\n        label: loc(`tecton.element.calendar.months.${mon}`),\n        abbr: loc(`tecton.element.calendar.months.abbr.${mon}`),\n    }));\n\n    componentDidRender() {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    onMonthSelection = (event: MouseEvent) => {\n        const targetElement = (event.target as HTMLButtonElement).closest('.month-button') as HTMLElement;\n        if (targetElement?.dataset?.index) {\n            this.selectMonth(Number(targetElement?.dataset?.index));\n        }\n    };\n\n    onMonthKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'Escape' || event.key === 'Esc') {\n            this.toggleChange.emit({ close: true });\n            return;\n        }\n        const monthIndex = (event.target as HTMLElement).dataset.index;\n        if (!monthIndex) return;\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            event.stopPropagation();\n            this.selectMonth(Number(monthIndex));\n        } else {\n            const nextMonthIndex = this.moveMonth(this.monthGrid, Number(monthIndex), event);\n            this.focusMonth(nextMonthIndex);\n        }\n    };\n\n    moveMonth = (grid: number[][], index: number, event: KeyboardEvent) => {\n        const rows = grid.length;\n        const cols = grid[0].length;\n        const row = Math.floor(index / cols);\n        const col = index % cols;\n        const current = [row, col];\n        if (event.key === 'ArrowUp') {\n            event.stopPropagation();\n            event.preventDefault();\n            return grid[Math.max(0, current[0] - 1)][current[1]];\n        } else if (event.key === 'ArrowDown') {\n            event.stopPropagation();\n            event.preventDefault();\n            return grid[Math.min(rows - 1, current[0] + 1)][current[1]];\n        } else if (event.key === 'ArrowLeft') {\n            event.stopPropagation();\n            event.preventDefault();\n            return Math.max(0, index - 1);\n        } else if (event.key === 'ArrowRight') {\n            event.stopPropagation();\n            event.preventDefault();\n            return Math.min(this.months.length - 1, index + 1);\n        } else {\n            return grid[current[0]][current[1]];\n        }\n    };\n\n    focusMonth = (index: number) => {\n        const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n            `.month-button[data-index=\"${index}\"]`\n        );\n        if (nextMonth) {\n            this.focusedIndex = index;\n            nextMonth.focus();\n        }\n    };\n\n    selectMonth = (index: number) => {\n        this.selectedIndex = index;\n        this.focusedIndex = index;\n        const nextMonth = this.hostElement.shadowRoot.querySelector<HTMLElement>(\n            `.month-button[data-index=\"${index}\"]`\n        );\n        this.hostElement.shadowRoot\n            .querySelectorAll<HTMLElement>(`.month-button`)\n            ?.forEach(el => el.classList.remove('active'));\n        nextMonth?.classList.add('active');\n        nextMonth?.focus();\n        const value = {\n            view: 'day', // change to day view\n            monthIndex: index,\n            selectedYear: this.year,\n        };\n        this.hostElement.onchange?.(\n            new CustomEvent('click', {\n                bubbles: true,\n                detail: value,\n            })\n        );\n        this.viewChange.emit(value);\n    };\n    selectYear = (year: number) => {\n        this.year = Math.max(1970, year);\n    };\n\n    render() {\n        return (\n            <div\n                class=\"month-container\"\n                onKeyDown={this.onMonthKeydown}\n            >\n                <div class=\"navigation\">\n                    <q2-btn\n                        class=\"year-btn\"\n                        onClick={() =>\n                            this.viewChange.emit({\n                                view: 'year',\n                                selectedYear: this.year,\n                            })\n                        }\n                    >\n                        <span class=\"year\">{this.year}</span>\n                        <q2-icon\n                            class=\"year-icon off\"\n                            type=\"chevron-down\"\n                        ></q2-icon>\n                    </q2-btn>\n                    <div class=\"month-controller\">\n                        <div class=\"cal-year-prev-next\">\n                            <q2-btn\n                                label={loc('tecton.element.calendar.previousYear')}\n                                hide-label\n                                class=\"cal-nav-btn prev-year\"\n                                test-id=\"previousYearButton\"\n                                onClick={() => this.selectYear(this.year - 1)}\n                            >\n                                <q2-icon type=\"arrow-left\" />\n                            </q2-btn>\n                            <q2-btn\n                                label={loc('tecton.element.calendar.nextYear')}\n                                hide-label\n                                class=\"cal-nav-btn next-year\"\n                                test-id=\"nextYearButton\"\n                                onClick={() => this.selectYear(this.year + 1)}\n                            >\n                                <q2-icon type=\"arrow-right\" />\n                            </q2-btn>\n                        </div>\n                    </div>\n                </div>\n                <div\n                    class=\"month-list\"\n                    onClick={this.onMonthSelection}\n                >\n                    {this.months.map((month, index) => (\n                        <div class=\"month\">\n                            <span\n                                role=\"button\"\n                                class=\"month-button\"\n                                data-index={index}\n                                aria-label={month.label}\n                                tabindex={index === this.focusedIndex ? 0 : -1}\n                            >\n                                {month.abbr}\n                            </span>\n                        </div>\n                    ))}\n                </div>\n                {this.today && (\n                    <div class=\"today-label\">\n                        {loc('tecton.element.calendar.today')}: {this.today}\n                    </div>\n                )}\n            </div>\n        );\n    }\n}\n"],"version":3}

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2597758.js');
-const index$1 = require('./index-6f9f259c.js');
+const index$1 = require('./index-09c712ea.js');
 
-const stylesCss$1 = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-multi-select-header-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
+const stylesCss$1 = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
 
 const Q2Optgroup = class {
   constructor(hostRef) {
@@ -53,7 +53,7 @@ const Q2Optgroup = class {
 };
 Q2Optgroup.style = stylesCss$1;
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host(:focus),:host(:hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-multiline-icon-size, var(--t-option-selected-multiline-icon-size, var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:\"content\"}: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:var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-option-active-color, inherit)}:host(:focus){border:1px solid #33b4ff}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:\"icon content\";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host(:focus),:host(:hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-multiline-icon-size, var(--t-option-selected-multiline-icon-size, var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:\"content\"}: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:var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-option-active-color, inherit)}:host(:focus){border:1px solid #33b4ff}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
 
 const Q2Option = class {
   constructor(hostRef) {

package/dist/cjs/q2-optgroup_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"q2-optgroup.q2-option.entry.cjs.js","mappings":"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","names":["stylesCss","createGuid","h","loc","Host"],"sources":["./src/components/q2-optgroup/styles.scss?tag=q2-optgroup&encapsulation=shadow","./src/components/q2-optgroup/index.tsx","./src/components/q2-option/styles.scss?tag=q2-option&encapsulation=shadow","./src/components/q2-option/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.q2-optgroup-header {\n    --comp-header-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px) var-list(--tct-scale-2, --app-scale-2x, 10px)};\n    background: var-list(\n        --tct-optgroup-header-background,\n        var-prefixer(optgroup-header-bg),\n        --tct-gray-13,\n        --t-gray-13,\n        --tct-gray-l2,\n        --app-gray-l2,\n        #e6e6e6\n    );\n    color: var-list(--tct-optgroup-header-color, inherit);\n    padding: var-list(var-prefixer(optgroup-header-padding), --comp-header-padding);\n    font-weight: var-list(var-prefixer(optgroup-header-font-weight), 600);\n    text-transform: var-list(var-prefixer(optgroup-header-text-transform), uppercase);\n    position: sticky;\n    top: calc(var(--comp-multi-select-header-height, 0px) + var-list(var-prefixer(optgroup-top), 0px));\n    z-index: 5; // Keeps the optgroup over any hover of focus states\n}\n","import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n    tag: 'q2-optgroup',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Optgroup implements ComponentInterface {\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) label: string;\n    @Element() hostElement: HTMLElement;\n    @State() hidden: boolean = false;\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\n\n    /// LIFECYCLE HOOKS ///\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.setHidden);\n        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n        this.mutationObserver = observer;\n\n        // set initially\n        this.setHidden();\n        this.disabledWatcher(this.disabled);\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\n\n    get headerId() {\n        return `q2-optgroup-header-${this.guid}`;\n    }\n\n    get options() {\n        return Array.from(this.hostElement.querySelectorAll('q2-option'));\n    }\n\n    ///// OBSERVERS ///////\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\n\n    render() {\n        return (\n            <div\n                class=\"q2-optgroup-container\"\n                hidden={this.hidden}\n                aria-labelledby={this.headerId}\n                role=\"group\"\n            >\n                <div\n                    class=\"q2-optgroup-header\"\n                    id={this.headerId}\n                >\n                    {(this.label && loc(this.label)) || ''}\n                </div>\n                <div class=\"q2-optgroup-options\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    align-items: center;\n    grid-template-areas: 'icon content';\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-multiline-icon-size), var-prefixer(option-selected-icon-size), 26px)};\n}\n\n:host([_no-select]) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host(:not([aria-disabled]):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n    border: 1px solid #33b4ff;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n    display: block;\n    grid-area: content;\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'q2-option',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Option implements ComponentInterface {\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem')}\n     * @private\n     */\n    @Prop({ reflect: true }) role: string = 'option';\n    @Prop({ mutable: true }) display: string;\n    @Prop({ reflect: true }) value: string;\n    @Prop({ reflect: true }) disabled: boolean;\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true }) disabledGroup: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true }) selected: boolean;\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true }) multiline: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true }) active: boolean;\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' }) _multiSelectHidden: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n    @Event() displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    mutationObserver: MutationObserver;\n\n    componentWillLoad() {\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    initDisplay() {\n        if (this.multiline) return;\n        if (this.display && !this.hostElement?.textContent?.trim()) {\n            this.hostElement.textContent = this.display;\n        } else if (!this.display && this.hostElement.textContent.trim()) {\n            this.display = this.hostElement.textContent.trim();\n        }\n    }\n\n    mutationHandler = (mutations: MutationRecord[]) => {\n        const display = (this.display || '').trim();\n        const textContent = (this.hostElement?.textContent || '').trim();\n        if (display === textContent || this.multiline) return;\n        for (const mut of mutations) {\n            if (mut.type === 'childList' || mut.type === 'characterData') {\n                this.display = textContent;\n            } else if (mut.type === 'attributes' && mut.attributeName === 'display') {\n                this.hostElement.textContent = display;\n            }\n        }\n        if (this.hostElement.ariaSelected) this.displayChanged.emit({ display: this.display, value: this.value });\n    };\n\n    render() {\n        const { disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={this.display}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-optgroup.q2-option.entry.cjs.js","mappings":";;;;;;;AAAA,MAAMA,WAAS,GAAG,k+CAAk+C;;MCQv+C,UAAU;;;IAKnB,SAAI,GAAWC,kBAAU,EAAE,CAAC;IAoB5B,cAAS,GAAG;MACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC,CAAC;KACjF,CAAC;oBA1B2C,KAAK;;kBAGvB,KAAK;;;EAMhC,iBAAiB;IACb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACtD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACzF,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;;IAGjC,IAAI,CAAC,SAAS,EAAE,CAAC;IACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACvC;EAED,oBAAoB;IAChB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;IACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;GAChC;EAMD,IAAI,QAAQ;IACR,OAAO,sBAAsB,IAAI,CAAC,IAAI,EAAE,CAAC;GAC5C;EAED,IAAI,OAAO;IACP,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;GACrE;;EAKD,eAAe,CAAC,QAAiB;IAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG;MACpB,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ,CAAC;KAClC,CAAC,CAAC;GACN;EAED,MAAM;IACF,QACIC,iBACI,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO,IAEZA,iBACI,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,IAEhB,CAAC,IAAI,CAAC,KAAK,IAAIC,WAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CACpC,EACND,iBAAK,KAAK,EAAC,qBAAqB,IAC5BA,qBAAQ,CACN,CACJ,EACR;GACL;;;;;;;;ACzEL,MAAM,SAAS,GAAG,ixEAAixE;;MCOtxE,QAAQ;;;;IAwDjB,oBAAe,GAAG,CAAC,SAA2B;;MAC1C,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC;MAC5C,MAAM,WAAW,GAAG,CAAC,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,WAAW,KAAI,EAAE,EAAE,IAAI,EAAE,CAAC;MACjE,IAAI,OAAO,KAAK,WAAW,IAAI,IAAI,CAAC,SAAS;QAAE,OAAO;MACtD,KAAK,MAAM,GAAG,IAAI,SAAS,EAAE;QACzB,IAAI,GAAG,CAAC,IAAI,KAAK,WAAW,IAAI,GAAG,CAAC,IAAI,KAAK,eAAe,EAAE;UAC1D,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC;SAC9B;aAAM,IAAI,GAAG,CAAC,IAAI,KAAK,YAAY,IAAI,GAAG,CAAC,aAAa,KAAK,SAAS,EAAE;UACrE,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,OAAO,CAAC;SAC1C;OACJ;MACD,IAAI,IAAI,CAAC,WAAW,CAAC,YAAY;QAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;KAC7G,CAAC;gBA9DsC,QAAQ;;;;;;;;8BAwBwC,KAAK;;EAO7F,iBAAiB;IACb,IAAI,CAAC,WAAW,EAAE,CAAC;GACtB;EAED,gBAAgB;IACZ,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAC5D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9G,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;GACpC;EAED,WAAW;;IACP,IAAI,IAAI,CAAC,SAAS;MAAE,OAAO;IAC3B,IAAI,IAAI,CAAC,OAAO,IAAI,EAAC,MAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,WAAW,0CAAE,IAAI,EAAE,CAAA,EAAE;MACxD,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;KAC/C;SAAM,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE;MAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACtD;GACJ;EAgBD,MAAM;IACF,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC;IACvE,MAAM,UAAU,GAAG,QAAQ,IAAI,aAAa,CAAC;IAE7C,QACIA,QAACE,UAAI,IACD,QAAQ,EAAC,IAAI,mBACE,UAAU,GAAG,MAAM,GAAG,SAAS,mBAC/B,GAAG,CAAC,CAAC,QAAQ,EAAE,iBACjB,kBAAkB,GAAG,MAAM,GAAG,SAAS,EACpD,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,QAAQ,IAAIF,qBAAS,IAAI,EAAC,WAAW,GAAG,EAC9CA,iBAAK,KAAK,EAAC,SAAS,IAChBA,qBAAQ,CACN,CACH,EACT;GACL;;;;;;;;","names":["stylesCss","createGuid","h","loc","Host"],"sources":["./src/components/q2-optgroup/styles.scss?tag=q2-optgroup&encapsulation=shadow","./src/components/q2-optgroup/index.tsx","./src/components/q2-option/styles.scss?tag=q2-option&encapsulation=shadow","./src/components/q2-option/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.q2-optgroup-header {\n    --comp-header-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px) var-list(--tct-scale-2, --app-scale-2x, 10px)};\n    background: var-list(\n        --tct-optgroup-header-background,\n        var-prefixer(optgroup-header-bg),\n        --tct-gray-13,\n        --t-gray-13,\n        --tct-gray-l2,\n        --app-gray-l2,\n        #e6e6e6\n    );\n    color: var-list(--tct-optgroup-header-color, inherit);\n    padding: var-list(var-prefixer(optgroup-header-padding), --comp-header-padding);\n    font-weight: var-list(var-prefixer(optgroup-header-font-weight), 600);\n    text-transform: var-list(var-prefixer(optgroup-header-text-transform), uppercase);\n    position: sticky;\n    top: calc(var(--comp-popover-top-container-height, 0px) + var-list(var-prefixer(optgroup-top), 0px));\n    z-index: 5; // Keeps the optgroup over any hover or focus states\n}\n","import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({\n    tag: 'q2-optgroup',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Optgroup implements ComponentInterface {\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) label: string;\n    @Element() hostElement: HTMLElement;\n    @State() hidden: boolean = false;\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\n\n    /// LIFECYCLE HOOKS ///\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.setHidden);\n        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n        this.mutationObserver = observer;\n\n        // set initially\n        this.setHidden();\n        this.disabledWatcher(this.disabled);\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\n\n    get headerId() {\n        return `q2-optgroup-header-${this.guid}`;\n    }\n\n    get options() {\n        return Array.from(this.hostElement.querySelectorAll('q2-option'));\n    }\n\n    ///// OBSERVERS ///////\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\n\n    render() {\n        return (\n            <div\n                class=\"q2-optgroup-container\"\n                hidden={this.hidden}\n                aria-labelledby={this.headerId}\n                role=\"group\"\n            >\n                <div\n                    class=\"q2-optgroup-header\"\n                    id={this.headerId}\n                >\n                    {(this.label && loc(this.label)) || ''}\n                </div>\n                <div class=\"q2-optgroup-options\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n    padding: var-list(var-prefixer(option-padding), --comp-padding);\n    min-height: 44px;\n    align-items: center;\n    cursor: pointer;\n    grid-template-columns:\n        var(--comp-selected-icon-size)\n        1fr;\n    align-items: center;\n    grid-template-areas: 'icon content';\n    gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:hover),\n:host([active]) {\n    position: relative;\n    z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n    --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n    --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-multiline-icon-size), var-prefixer(option-selected-icon-size), 26px)};\n}\n\n:host([_no-select]) {\n    grid-template-columns: 1fr;\n    grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    pointer-events: none;\n}\n\n:host([aria-hidden]) {\n    display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n    display: grid;\n}\n\n:host(:not([aria-disabled]):hover),\n:host([active]),\n:host(:focus) {\n    background: var-list(\n        --tct-option-active-background,\n        --tct-option-active-bg,\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n    border: 1px solid #33b4ff;\n}\n\nq2-icon {\n    grid-area: icon;\n    --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n    display: block;\n    grid-area: content;\n\n    :host(:not([multiline])) & {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'q2-option',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Option implements ComponentInterface {\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem')}\n     * @private\n     */\n    @Prop({ reflect: true }) role: string = 'option';\n    @Prop({ mutable: true }) display: string;\n    @Prop({ reflect: true }) value: string;\n    @Prop({ reflect: true }) disabled: boolean;\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true }) disabledGroup: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true }) selected: boolean;\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true }) multiline: boolean;\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true }) active: boolean;\n    @Prop({ reflect: true, attribute: '_multiSelectHidden' }) _multiSelectHidden: boolean = false;\n\n    @Element() hostElement: HTMLElement;\n    @Event() displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    mutationObserver: MutationObserver;\n\n    componentWillLoad() {\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true, characterData: true });\n        this.mutationObserver = observer;\n    }\n\n    initDisplay() {\n        if (this.multiline) return;\n        if (this.display && !this.hostElement?.textContent?.trim()) {\n            this.hostElement.textContent = this.display;\n        } else if (!this.display && this.hostElement.textContent.trim()) {\n            this.display = this.hostElement.textContent.trim();\n        }\n    }\n\n    mutationHandler = (mutations: MutationRecord[]) => {\n        const display = (this.display || '').trim();\n        const textContent = (this.hostElement?.textContent || '').trim();\n        if (display === textContent || this.multiline) return;\n        for (const mut of mutations) {\n            if (mut.type === 'childList' || mut.type === 'characterData') {\n                this.display = textContent;\n            } else if (mut.type === 'attributes' && mut.attributeName === 'display') {\n                this.hostElement.textContent = display;\n            }\n        }\n        if (this.hostElement.ariaSelected) this.displayChanged.emit({ display: this.display, value: this.value });\n    };\n\n    render() {\n        const { disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={this.display}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/q2-option-list.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2597758.js');
-const index$1 = require('./index-6f9f259c.js');
+const index$1 = require('./index-09c712ea.js');
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";
 
 const Q2OptionList = class {
   constructor(hostRef) {
@@ -52,8 +52,10 @@ const Q2OptionList = class {
         }
         else {
           this.activeIndex = index;
-          if (shouldSelect)
+          if (shouldSelect) {
             this.selectOption(this.allOptions[index]);
+            this.popoverState.emit({ open: false, action: 'select' });
+          }
           else
             this.setActiveElement(index);
         }
@@ -150,7 +152,7 @@ const Q2OptionList = class {
     };
     this.internalKeydownHandler = (event) => {
       event.stopPropagation();
-      const { activeIndex, customSearch, allOptions } = this;
+      const { activeIndex, customSearch, allOptions, multiple } = this;
       const { key, shiftKey } = event;
       let newOption;
       switch (key) {
@@ -166,6 +168,9 @@ const Q2OptionList = class {
           if (!newOption || newOption.disabled)
             break;
           this.selectOption(newOption);
+          if (multiple)
+            break;
+          this.popoverState.emit({ open: false, action: 'select' });
           break;
         case 'Enter':
           event.preventDefault();
@@ -173,6 +178,9 @@ const Q2OptionList = class {
           if (!newOption || newOption.disabled)
             break;
           this.selectOption(newOption);
+          if (multiple)
+            break;
+          this.popoverState.emit({ open: false, action: 'select' });
           break;
         case 'ArrowUp':
           event.preventDefault();
@@ -250,9 +258,9 @@ const Q2OptionList = class {
     /* tslint:enable:cyclomatic-complexity */
     this.focusoutHandler = (event) => {
       const { relatedTarget } = event;
-      const isInDropdown = this.allOptions.includes(relatedTarget);
-      const isInLightDom = !isInDropdown && this.hostElement.contains(relatedTarget);
-      if (isInDropdown || isInLightDom) {
+      const isInQ2OptionList = this.allOptions.includes(relatedTarget);
+      const isInLightDom = !isInQ2OptionList && this.hostElement.contains(relatedTarget);
+      if (isInQ2OptionList || isInLightDom) {
         event.stopPropagation();
       }
     };
@@ -260,6 +268,9 @@ const Q2OptionList = class {
       const target = event.target;
       const option = target.closest('q2-option');
       this.selectOption(option);
+      if (this.multiple)
+        return;
+      this.popoverState.emit({ open: false, action: 'select' });
     };
     this.customSearch = undefined;
     this.noSelect = undefined;
@@ -454,9 +465,6 @@ const Q2OptionList = class {
     else
       this.selectedOptions = values;
     this.change.emit({ value: selectedValue, values });
-    if (multiple)
-      return;
-    this.popoverState.emit({ open: false, action: 'select' });
   }
   adjustActiveOptionAndScroll(numToAdd) {
     this.activeIndex += numToAdd;
@@ -531,7 +539,7 @@ const Q2OptionList = class {
   }
   /// DOM ///
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, index.h("div", { class: "options", "aria-label": index$1.loc('tecton.element.optionList.label', [this.label]), role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, index.h("slot", null)))));
+    return (index.h(index.Host, null, index.h("div", { class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, index.h("div", { class: "options", "aria-label": index$1.loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, index.h("slot", null)))));
   }
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {