q2-tecton-elements 1.37.0 → 1.38.0

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2597758.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}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}.loading-wrapper{height:44px;width:100%;align-items:center;justify-content:center}.loading-wrapper:not([hidden]){display:flex}iframe{width:100%;height:auto;overflow-y:hidden;border:none}iframe:not([hidden]){display:inline-block}.slot-wrapper:focus{outline:none;box-shadow:var(--const-global-focus)}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-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}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}.loading-wrapper{height:44px;width:100%;align-items:center;justify-content:center}.loading-wrapper:not([hidden]){display:flex}iframe{width:100%;height:auto;overflow-y:hidden;border:none}iframe:not([hidden]){display:inline-block}.slot-wrapper:focus{outline:none;box-shadow:var(--const-global-focus)}";
 
 const TectonTabPane = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"tecton-tab-pane.entry.cjs.js","mappings":"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","names":["h"],"sources":["./src/components/tecton-tab-pane/styles.scss?tag=tecton-tab-pane&encapsulation=shadow","./src/components/tecton-tab-pane/index.tsx"],"sourcesContent":["@import '../q2-tab-pane/styles.scss';\n\n.loading-wrapper { \n    height: 44px;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n}\n.loading-wrapper:not([hidden]) {\n    display: flex;\n}\niframe {\n    width: 100%;\n    height: auto;\n    overflow-y: hidden;\n    border: none;\n}\niframe:not([hidden]) {\n    display: inline-block;\n}\n\n.slot-wrapper:focus {\n    outline: none;\n    box-shadow: var(--const-global-focus);\n}\n","import { Component, ComponentInterface, Element, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { Q2Badge } from '../q2-badge';\n\n@Component({\n    tag: 'tecton-tab-pane',\n    styleUrl: 'styles.scss',\n    shadow: true,\n})\nexport class TectonTabPane implements ComponentInterface {\n    @Prop({ reflect: true }) value: string;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) selected: boolean;\n    @Prop() index: number;\n    @Prop() guid: number;\n    // above props duplicated from q2-tab-pane.\n    // Unable to extend due to Stencil decorator limitation\n    @Prop({ reflect: true }) provided: boolean;\n    @Prop({ reflect: true }) url: string;\n    @Prop({ reflect: true }) moduleId: string;\n    @Prop({ reflect: true }) minHeight: string;\n    @Prop({ reflect: true }) badgeCount: number;\n    @Prop({ reflect: true }) badgeDescription: string;\n    @Prop({ reflect: true }) badgeTheme: Q2Badge['theme'];\n    @Prop({ reflect: true }) badgeStatus: Q2Badge['status'];\n    @Prop() authPayload: { key: string; value: string }[];\n    @Prop() showForm: boolean;\n    @State() _showForm: boolean;\n    @Element() hostElement: HTMLElement;\n\n    @Event({ bubbles: true }) badge: EventEmitter<boolean>;\n\n    @Watch('badgeCount')\n    @Watch('badgeDescription')\n    @Watch('badgeTheme')\n    @Watch('badgeStatus')\n    badgeObserver() {\n        this.badge.emit();\n    }\n\n    get iframeTitle() {\n        return this.moduleId.split('.').slice(-2).join('-');\n    }\n    componentWillRender(): void | Promise<void> {\n        const loadingWrapper: HTMLDivElement = this.hostElement.shadowRoot.querySelector('.loading-wrapper');\n        if (loadingWrapper) {\n            loadingWrapper.style.minHeight = this.minHeight;\n            loadingWrapper.hidden = !this.selected;\n        }\n    }\n\n    componentWillLoad() {\n        this._showForm = this.showForm;\n    }\n\n    componentDidRender() {\n        const formElement = this.hostElement.shadowRoot.querySelector('form');\n\n        if (!!formElement && !!formElement.parentElement) {\n            formElement.submit();\n            this._showForm = false;\n        }\n    }\n\n    ///////// Observers /////////\n    @Watch('selected')\n    selectedObserver() {\n        const loader: HTMLDivElement = this.hostElement.shadowRoot.querySelector('div[slot=\"loading-wrapper\"]');\n        this._showForm = this.showForm; // reset state\n\n        if (loader) {\n            loader.hidden = !this.selected;\n        }\n    }\n\n    ///////// Actions /////////\n    onIFrameLoad = (event: Event) => {\n        const iframe = event.target as HTMLIFrameElement;\n\n        iframe.contentWindow &&\n            iframe.contentWindow.postMessage(\n                `[iFrameSizer]${this.moduleId}:0:false:false:32:true:true:null:documentElementOffset`,\n                '*'\n            );\n    };\n\n    ///////// View Methods /////////\n    render() {\n        return (\n            <div\n                id={`tab-pane-${this.guid}-${this.index}`}\n                class={`tab-pane${this.selected ? '' : ' hidden'}`}\n                role=\"tabpanel\"\n                tabindex=\"-1\"\n                aria-hidden={`${!this.selected}`}\n                aria-labelledby={`tab-${this.guid}-${this.index}`}\n            >\n                {this.selected && this.provided !== undefined && !this.provided && (\n                    <div>\n                        <slot name=\"loading-wrapper\" />\n                        <iframe\n                            hidden\n                            name={this.moduleId}\n                            scrolling=\"no\"\n                            src={this.showForm && this.authPayload.length ? '' : this.url || ''}\n                            data-module-id={this.moduleId}\n                            style={this.minHeight ? { minHeight: this.minHeight } : null}\n                            onLoad={this.onIFrameLoad}\n                            title={this.iframeTitle}\n                            allow=\"geolocation; camera\"\n                        />\n                        {this._showForm && this.authPayload ? (\n                            <form\n                                hidden\n                                method=\"post\"\n                                action={this.url}\n                                target={this.moduleId}\n                                encType=\"multipart/form-data\"\n                            >\n                                {this.authPayload.map(element => {\n                                    return (\n                                        <input\n                                            type=\"hidden\"\n                                            value={element.value}\n                                            name={element.key}\n                                        />\n                                    );\n                                })}\n                            </form>\n                        ) : (\n                            ''\n                        )}\n                    </div>\n                )}\n                <div\n                    class=\"slot-wrapper\"\n                    hidden={this.selected && this.provided !== undefined && !this.provided}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n"],"version":3}
+{"file":"tecton-tab-pane.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,yhCAAyhC;;MCQ9hC,aAAa;;;;;IAoEtB,iBAAY,GAAG,CAAC,KAAY;MACxB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA2B,CAAC;MAEjD,MAAM,CAAC,aAAa;QAChB,MAAM,CAAC,aAAa,CAAC,WAAW,CAC5B,gBAAgB,IAAI,CAAC,QAAQ,wDAAwD,EACrF,GAAG,CACN,CAAC;KACT,CAAC;;;;;;;;;;;;;;;;;;;EAhDF,aAAa;IACT,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;GACrB;EAED,IAAI,WAAW;IACX,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GACvD;EACD,mBAAmB;IACf,MAAM,cAAc,GAAmB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACrG,IAAI,cAAc,EAAE;MAChB,cAAc,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;MAChD,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;KAC1C;GACJ;EAED,iBAAiB;IACb,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;GAClC;EAED,kBAAkB;IACd,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAEtE,IAAI,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,WAAW,CAAC,aAAa,EAAE;MAC9C,WAAW,CAAC,MAAM,EAAE,CAAC;MACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KAC1B;GACJ;;EAID,gBAAgB;IACZ,MAAM,MAAM,GAAmB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;IACxG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;IAE/B,IAAI,MAAM,EAAE;MACR,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;KAClC;GACJ;;EAcD,MAAM;IACF,QACIA,iBACI,EAAE,EAAE,YAAY,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,EACzC,KAAK,EAAE,WAAW,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,SAAS,EAAE,EAClD,IAAI,EAAC,UAAU,EACf,QAAQ,EAAC,IAAI,iBACA,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,qBACf,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,IAEhD,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC3DA,qBACIA,kBAAM,IAAI,EAAC,iBAAiB,GAAG,EAC/BA,oBACI,MAAM,QACN,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,SAAS,EAAC,IAAI,EACd,GAAG,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,oBACnD,IAAI,CAAC,QAAQ,EAC7B,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,EAC5D,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,KAAK,EAAC,qBAAqB,GAC7B,EACD,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,IAC/BA,kBACI,MAAM,QACN,MAAM,EAAC,MAAM,EACb,MAAM,EAAE,IAAI,CAAC,GAAG,EAChB,MAAM,EAAE,IAAI,CAAC,QAAQ,EACrB,OAAO,EAAC,qBAAqB,IAE5B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO;MACzB,QACIA,mBACI,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,IAAI,EAAE,OAAO,CAAC,GAAG,GACnB,EACJ;KACL,CAAC,CACC,KAEP,EAAE,CACL,CACC,CACT,EACDA,iBACI,KAAK,EAAC,cAAc,EACpB,MAAM,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAEtEA,qBAAQ,CACN,CACJ,EACR;GACL;;;;;;;;;;;;;;","names":["h"],"sources":["./src/components/tecton-tab-pane/styles.scss?tag=tecton-tab-pane&encapsulation=shadow","./src/components/tecton-tab-pane/index.tsx"],"sourcesContent":["@import '../q2-tab-pane/styles.scss';\n\n.loading-wrapper { \n    height: 44px;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n}\n.loading-wrapper:not([hidden]) {\n    display: flex;\n}\niframe {\n    width: 100%;\n    height: auto;\n    overflow-y: hidden;\n    border: none;\n}\niframe:not([hidden]) {\n    display: inline-block;\n}\n\n.slot-wrapper:focus {\n    outline: none;\n    box-shadow: var(--const-global-focus);\n}\n","import { Component, ComponentInterface, Element, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { Q2Badge } from '../q2-badge';\n\n@Component({\n    tag: 'tecton-tab-pane',\n    styleUrl: 'styles.scss',\n    shadow: true,\n})\nexport class TectonTabPane implements ComponentInterface {\n    @Prop({ reflect: true }) value: string;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) selected: boolean;\n    @Prop() index: number;\n    @Prop() guid: number;\n    // above props duplicated from q2-tab-pane.\n    // Unable to extend due to Stencil decorator limitation\n    @Prop({ reflect: true }) provided: boolean;\n    @Prop({ reflect: true }) url: string;\n    @Prop({ reflect: true }) moduleId: string;\n    @Prop({ reflect: true }) minHeight: string;\n    @Prop({ reflect: true }) badgeCount: number;\n    @Prop({ reflect: true }) badgeDescription: string;\n    @Prop({ reflect: true }) badgeTheme: Q2Badge['theme'];\n    @Prop({ reflect: true }) badgeStatus: Q2Badge['status'];\n    @Prop() authPayload: { key: string; value: string }[];\n    @Prop() showForm: boolean;\n    @State() _showForm: boolean;\n    @Element() hostElement: HTMLElement;\n\n    @Event({ bubbles: true }) badge: EventEmitter<boolean>;\n\n    @Watch('badgeCount')\n    @Watch('badgeDescription')\n    @Watch('badgeTheme')\n    @Watch('badgeStatus')\n    badgeObserver() {\n        this.badge.emit();\n    }\n\n    get iframeTitle() {\n        return this.moduleId.split('.').slice(-2).join('-');\n    }\n    componentWillRender(): void | Promise<void> {\n        const loadingWrapper: HTMLDivElement = this.hostElement.shadowRoot.querySelector('.loading-wrapper');\n        if (loadingWrapper) {\n            loadingWrapper.style.minHeight = this.minHeight;\n            loadingWrapper.hidden = !this.selected;\n        }\n    }\n\n    componentWillLoad() {\n        this._showForm = this.showForm;\n    }\n\n    componentDidRender() {\n        const formElement = this.hostElement.shadowRoot.querySelector('form');\n\n        if (!!formElement && !!formElement.parentElement) {\n            formElement.submit();\n            this._showForm = false;\n        }\n    }\n\n    ///////// Observers /////////\n    @Watch('selected')\n    selectedObserver() {\n        const loader: HTMLDivElement = this.hostElement.shadowRoot.querySelector('div[slot=\"loading-wrapper\"]');\n        this._showForm = this.showForm; // reset state\n\n        if (loader) {\n            loader.hidden = !this.selected;\n        }\n    }\n\n    ///////// Actions /////////\n    onIFrameLoad = (event: Event) => {\n        const iframe = event.target as HTMLIFrameElement;\n\n        iframe.contentWindow &&\n            iframe.contentWindow.postMessage(\n                `[iFrameSizer]${this.moduleId}:0:false:false:32:true:true:null:documentElementOffset`,\n                '*'\n            );\n    };\n\n    ///////// View Methods /////////\n    render() {\n        return (\n            <div\n                id={`tab-pane-${this.guid}-${this.index}`}\n                class={`tab-pane${this.selected ? '' : ' hidden'}`}\n                role=\"tabpanel\"\n                tabindex=\"-1\"\n                aria-hidden={`${!this.selected}`}\n                aria-labelledby={`tab-${this.guid}-${this.index}`}\n            >\n                {this.selected && this.provided !== undefined && !this.provided && (\n                    <div>\n                        <slot name=\"loading-wrapper\" />\n                        <iframe\n                            hidden\n                            name={this.moduleId}\n                            scrolling=\"no\"\n                            src={this.showForm && this.authPayload.length ? '' : this.url || ''}\n                            data-module-id={this.moduleId}\n                            style={this.minHeight ? { minHeight: this.minHeight } : null}\n                            onLoad={this.onIFrameLoad}\n                            title={this.iframeTitle}\n                            allow=\"geolocation; camera\"\n                        />\n                        {this._showForm && this.authPayload ? (\n                            <form\n                                hidden\n                                method=\"post\"\n                                action={this.url}\n                                target={this.moduleId}\n                                encType=\"multipart/form-data\"\n                            >\n                                {this.authPayload.map(element => {\n                                    return (\n                                        <input\n                                            type=\"hidden\"\n                                            value={element.value}\n                                            name={element.key}\n                                        />\n                                    );\n                                })}\n                            </form>\n                        ) : (\n                            ''\n                        )}\n                    </div>\n                )}\n                <div\n                    class=\"slot-wrapper\"\n                    hidden={this.selected && this.provided !== undefined && !this.provided}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n"],"version":3}

package/dist/collection/components/q2-action-sheet/styles.css

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 
 :host {

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 
 :host {

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 
 :host {

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 
 :host {
@@ -75,7 +75,7 @@ button {
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 
 :host {
@@ -230,6 +230,7 @@ button:disabled {
   --comp-hover-inner-ring-color: var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));
   --comp-hover-box-shadow: 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);
   --comp-active-box-shadow: var(--comp-box-shadow);
+  --comp-disabled-box-shadow: var(--comp-box-shadow);
   --comp-focus-visible-outer-ring-color: var(--tct-btn-primary-focus-visible-outer-ring-color, var(--const-focus-color));
   --comp-focus-visible-inner-ring-color: var(--tct-btn-primary-focus-visible-inner-ring-color, var(--comp-font-color));
   --comp-focus-visible-box-shadow: 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);
@@ -352,6 +353,7 @@ button:disabled {
   --comp-hover-inner-ring-color: var(--tct-btn-secondary-hover-inner-ring-color, var(--app-white));
   --comp-hover-box-shadow: 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);
   --comp-active-box-shadow: var(--comp-box-shadow);
+  --comp-disabled-box-shadow: var(--comp-box-shadow);
   --comp-focus-visible-outer-ring-color: var(--tct-btn-secondary-focus-visible-outer-ring-color, var(--const-focus-color));
   --comp-focus-visible-inner-ring-color: var(--tct-btn-secondary-focus-visible-inner-ring-color, var(--app-white));
   --comp-focus-visible-box-shadow: 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);
@@ -473,6 +475,7 @@ button:disabled {
   --comp-hover-inner-ring-color: var(--tct-btn-destroy-hover-inner-ring-color, var(--comp-font-color));
   --comp-hover-box-shadow: 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);
   --comp-active-box-shadow: var(--comp-box-shadow);
+  --comp-disabled-box-shadow: var(--comp-box-shadow);
   --comp-focus-visible-outer-ring-color: var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--const-focus-color));
   --comp-focus-visible-inner-ring-color: var(--tct-btn-destroy-focus-visible-inner-ring-color, var(--comp-font-color));
   --comp-focus-visible-box-shadow: 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);
@@ -598,6 +601,7 @@ button:disabled {
   --comp-hover-inner-ring-color: var(--tct-btn-escape-hover-inner-ring-color, var(--comp-background));
   --comp-hover-box-shadow: 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);
   --comp-active-box-shadow: var(--comp-box-shadow);
+  --comp-disabled-box-shadow: var(--comp-box-shadow);
   --comp-focus-visible-outer-ring-color: var(--tct-btn-escape-focus-visible-outer-ring-color, var(--const-focus-color));
   --comp-focus-visible-inner-ring-color: var(--tct-btn-escape-focus-visible-inner-ring-color, var(--comp-background));
   --comp-focus-visible-box-shadow: 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);
@@ -722,6 +726,7 @@ button:disabled {
   --comp-hover-inner-ring-color: var(--tct-btn-neutral-hover-inner-ring-color, var(--app-white));
   --comp-hover-box-shadow: 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);
   --comp-active-box-shadow: var(--comp-box-shadow);
+  --comp-disabled-box-shadow: var(--comp-box-shadow);
   --comp-focus-visible-outer-ring-color: var(--tct-btn-neutral-focus-visible-outer-ring-color, var(--const-focus-color));
   --comp-focus-visible-inner-ring-color: var(--tct-btn-neutral-focus-visible-inner-ring-color, var(--comp-background));
   --comp-focus-visible-box-shadow: 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);
@@ -844,6 +849,7 @@ button:disabled {
   --comp-hover-inner-ring-color: var(--tct-btn-neutral-text-hover-inner-ring-color, var(--comp-background));
   --comp-hover-box-shadow: 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);
   --comp-active-box-shadow: var(--comp-box-shadow);
+  --comp-disabled-box-shadow: var(--comp-box-shadow);
   --comp-focus-visible-outer-ring-color: var(--tct-btn-neutral-text-focus-visible-outer-ring-color, var(--const-focus-color));
   --comp-focus-visible-inner-ring-color: var(--tct-btn-neutral-text-focus-visible-inner-ring-color, var(--app-white));
   --comp-focus-visible-box-shadow: 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);
@@ -968,7 +974,7 @@ button:disabled {
   border-radius: var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, var(--tct-btn-border-radius, 0)));
 }
 :host button.icon-only:hover, :host button.icon-only:focus {
-  background-color: var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));
+  background: var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));
 }
 :host(:not([intent])[active]) button.icon-only {
   background-color: var(--tct-btn-icon-active-background, var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));
@@ -976,6 +982,15 @@ button:disabled {
 :host(:not([intent])) button.icon-only:hover *, :host(:not([intent])) button.icon-only:focus *, :host(:not([intent])[active]) button.icon-only * {
   color: var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))));
 }
+:host(:not([intent])) button:not(.icon-only) {
+  height: var(--tct-btn-height, auto);
+  padding-inline: var(--tct-btn-padding-inline, 0);
+  font-weight: var(--tct-btn-font-weight);
+  border-radius: var(--tct-btn-border-radius, 0);
+}
+:host(:not([intent])) button:not(.icon-only):hover, :host(:not([intent])) button:not(.icon-only):focus {
+  background: var(--tct-btn-hover-background);
+}
 :host([badge]) button {
   padding: var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));
   font-size: var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));

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

@@ -318,6 +318,10 @@ export class Q2Calendar {
     var _a, _b;
     return (_b = (_a = this.controlElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.input-field');
   }
+  get innerInputContainer() {
+    var _a, _b;
+    return (_b = (_a = this.controlElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.input-container');
+  }
   get defaultHintMessage() {
     return this.typeable
       ? loc('tecton.element.calendar.hint.format') + ': ' + this.defaultFormatString
@@ -462,16 +466,35 @@ export class Q2Calendar {
     toggleElement === null || toggleElement === void 0 ? void 0 : toggleElement.focus();
     toggleElement.dispatchEvent(new FocusEvent('focus'));
   }
+  /**
+   * Emulates clicking the `<input>` to display the popover if it is hidden.
+   *
+   * @testOnly
+   */
   openPopover() {
     if (this.open)
       return;
     this._togglePopover();
   }
+  /**
+   * Emulates clicking the `<input>` to hide the popover if it is visible.
+   *
+   * @testOnly
+   */
   closePopover() {
     if (!this.open)
       return;
     this._togglePopover();
   }
+  /**
+   * Emulates clicking the `<input>` to display the popover, moving to the correct month and year, and clicking the
+   * provided date.
+   *
+   * While a `string` value can be passed, we recommended passing a `Date` object. If the value is invalid, the method
+   * will not select the date.
+   *
+   * @testOnly
+   */
   async setValue(value) {
     var _a;
     const date = typeof value === 'string' ? stringToDate(value) : value;
@@ -484,6 +507,17 @@ export class Q2Calendar {
     const tableCell = (_a = this.calendarTable) === null || _a === void 0 ? void 0 : _a.querySelector(`td[data-date="${formatDateISO(date)}"]`);
     tableCell === null || tableCell === void 0 ? void 0 : tableCell.click();
   }
+  /**
+   * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.
+   *
+   * While a `string` value can be passed, we recommended passing a `Date` object. If the value is invalid, the method
+   * will not select the date.
+   *
+   * @warning
+   * Only applicable when the input is typeable.
+   *
+   * @testOnly
+   */
   async typeValue(value) {
     if (!this.typeable)
       return;
@@ -647,7 +681,7 @@ export class Q2Calendar {
     (_a = this.calendarBody.querySelector(`td[data-day="${date.getDate()}"]`)) === null || _a === void 0 ? void 0 : _a.focus();
   }
   render() {
-    return (h("click-elsewhere", { class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.inputField(), h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputField, open: this.open, direction: this.popoverDirection, "aria-label": loc('tecton.element.calendar.dialogLabel'), minHeight: this.popoverMinHeight, align: this.popoverAlignment, block: true }, this.hintField(), this.calendarPopover())));
+    return (h("click-elsewhere", { class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.inputField(), h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputContainer, open: this.open, direction: this.popoverDirection, "aria-label": loc('tecton.element.calendar.dialogLabel'), minHeight: this.popoverMinHeight, align: this.popoverAlignment, block: true }, this.hintField(), this.calendarPopover())));
   }
   hintField() {
     if (!this.hintMessage)
@@ -674,7 +708,7 @@ export class Q2Calendar {
   }
   inputField() {
     const { isTypeable } = this;
-    return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: `${!!this.open}`, hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: this.onInputChange, onInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : '', pseudo: !isTypeable, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle" }, isTypeable && (h("q2-btn", { ref: el => (this.btnCalendarToggle = el), slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: "tecton.element.calendar.toggleAriaLabel", "hide-label": true }, h("q2-icon", { type: "calendar" })))));
+    return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: `${!!this.open}`, hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: this.onInputChange, onInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : this.displayFormat || this.formatModifier, pseudo: !isTypeable, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle" }, isTypeable && (h("q2-btn", { ref: el => (this.btnCalendarToggle = el), slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: "tecton.element.calendar.toggleAriaLabel", "hide-label": true }, h("q2-icon", { type: "calendar" })))));
   }
   calendarPopover() {
     const { monthIndex, selectedYear } = this.selectedMonthYear;
@@ -1314,8 +1348,11 @@ export class Q2Calendar {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "",
-          "tags": []
+          "text": "Emulates clicking the `<input>` to display the popover if it is hidden.",
+          "tags": [{
+              "name": "testOnly",
+              "text": undefined
+            }]
         }
       },
       "closePopover": {
@@ -1326,8 +1363,11 @@ export class Q2Calendar {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "",
-          "tags": []
+          "text": "Emulates clicking the `<input>` to hide the popover if it is visible.",
+          "tags": [{
+              "name": "testOnly",
+              "text": undefined
+            }]
         }
       },
       "setValue": {
@@ -1351,8 +1391,11 @@ export class Q2Calendar {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "",
-          "tags": []
+          "text": "Emulates clicking the `<input>` to display the popover, moving to the correct month and year, and clicking the\nprovided date.\n\nWhile a `string` value can be passed, we recommended passing a `Date` object. If the value is invalid, the method\nwill not select the date.",
+          "tags": [{
+              "name": "testOnly",
+              "text": undefined
+            }]
         }
       },
       "typeValue": {
@@ -1373,8 +1416,14 @@ export class Q2Calendar {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "",
-          "tags": []
+          "text": "Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.\n\nWhile a `string` value can be passed, we recommended passing a `Date` object. If the value is invalid, the method\nwill not select the date.",
+          "tags": [{
+              "name": "warning",
+              "text": "Only applicable when the input is typeable."
+            }, {
+              "name": "testOnly",
+              "text": undefined
+            }]
         }
       }
     };