q2-tecton-elements 1.44.1 → 1.45.0

package/dist/collection/components/q2-item/q2-item.js

@@ -0,0 +1,145 @@
+import { h, Fragment } from "@stencil/core";
+import { hasSlotContent } from "../../utils/index";
+export class Q2Item {
+    constructor() {
+        this.renderTrigger = 0;
+        this.clickable = undefined;
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    componentDidLoad() {
+        if (typeof MutationObserver !== 'undefined') {
+            const observer = new MutationObserver(() => (this.renderTrigger += 1));
+            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });
+            this.mutationObserver = observer;
+        }
+        this.setClickable();
+    }
+    // #endregion
+    // #region Local methods
+    get actionClasses() {
+        const classes = ['action'];
+        if (!this.hasBulletSlotContent) {
+            classes.push(`action-no-bullet`);
+        }
+        return classes.join(' ');
+    }
+    get bulletClasses() {
+        const classes = ['bullet'];
+        if (!this.hasFooterSlotContent) {
+            classes.push(`bullet-no-footer`);
+        }
+        return classes.join(' ');
+    }
+    get footerClasses() {
+        const classes = ['footer'];
+        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {
+            classes.push(`footer-no-action-nor-bullet`);
+        }
+        else if (!this.hasActionSlotContent) {
+            classes.push(`footer-no-action`);
+        }
+        else if (!this.hasBulletSlotContent) {
+            classes.push(`footer-no-bullet`);
+        }
+        return classes.join(' ');
+    }
+    get hasActionSlotContent() {
+        return hasSlotContent(this.hostElement, 'action');
+    }
+    get hasBodySlotContent() {
+        return hasSlotContent(this.hostElement, 'body');
+    }
+    get hasBulletSlotContent() {
+        return hasSlotContent(this.hostElement, 'bullet');
+    }
+    get hasHeaderSlotContent() {
+        return hasSlotContent(this.hostElement, 'header');
+    }
+    get hasFooterSlotContent() {
+        return hasSlotContent(this.hostElement, 'footer');
+    }
+    get itemClasses() {
+        const classes = ['item'];
+        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {
+            classes.push(`item-no-action-nor-bullet`);
+        }
+        else if (!this.hasActionSlotContent) {
+            classes.push(`item-no-action`);
+        }
+        else if (!this.hasBulletSlotContent) {
+            classes.push(`item-no-bullet`);
+        }
+        if (!this.hasFooterSlotContent) {
+            classes.push(`item-no-footer`);
+        }
+        return classes.join(' ');
+    }
+    get mainClasses() {
+        const classes = ['main'];
+        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {
+            classes.push(`main-no-action-nor-bullet`);
+        }
+        else if (!this.hasBulletSlotContent) {
+            classes.push(`main-no-bullet`);
+        }
+        return classes.join(' ');
+    }
+    setClickable() {
+        var _a, _b, _c, _d;
+        if (this.clickable) {
+            (_a = this.itemElement) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'button');
+            (_b = this.itemElement) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
+        }
+        else {
+            (_c = this.itemElement) === null || _c === void 0 ? void 0 : _c.removeAttribute('role');
+            (_d = this.itemElement) === null || _d === void 0 ? void 0 : _d.removeAttribute('tabindex');
+        }
+    }
+    // #endregion
+    // #region Render methods
+    render() {
+        this.setClickable();
+        return (h(Fragment, { key: 'd5ba951c9454ce295806c0c12381c97d766010c6' }, h("div", { key: 'ce49d5fbe107d66f77a0eae1e6719c2567fd52c8', class: this.itemClasses, ref: el => (this.itemElement = el) }, this.hasBulletSlotContent && (h("div", { key: '4fb7c74d6e4da51c9c40e4eac1b86557d8498f0f', class: this.bulletClasses }, h("slot", { key: 'f9029c81cc4b955c04fcd7e2445cd8b4a9dc1807', name: "bullet" }))), h("div", { key: 'eeef4eb04e2f636b8fbc10c7629a1d1e90ce9867', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: 'eedc08d67609dba329306406b19323989496fa30', class: "header" }, h("slot", { key: '7ca6467804317ef7b54ca4b7893def703aa0a07a', name: "header" }))), this.hasBodySlotContent && (h("div", { key: 'cb7e3fb9eae10c3d3481975563edb7b1a9615fbf', class: "body" }, h("slot", { key: '9fd0a9a4b82671a47ec02ca87ae3512f54f0aeb4', name: "body" })))), this.hasActionSlotContent && (h("div", { key: 'e20c1a4c400f607dfe5299a9e564b1937870e5a8', class: this.actionClasses }, h("slot", { key: '9fe4231d6af81ba6e69de4c00da41d8d4ca7ae89', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '08afea866e6750c4c3ea06a004e2e4fef50e2a7f', class: this.footerClasses }, h("slot", { key: 'a0502cd05cc9af67a3c1496e11fa23235e887be3', name: "footer" }))))));
+    }
+    static get is() { return "q2-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["q2-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["q2-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "clickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the item clickable."
+                },
+                "attribute": "clickable",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "renderTrigger": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=q2-item.js.map

package/dist/collection/components/q2-item/q2-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-item.js","sourceRoot":"","sources":["../../../../src/components/q2-item/q2-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, State, Prop, Fragment } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n@Component({\n    tag: 'q2-item',\n    styleUrl: 'q2-item.scss',\n    shadow: true,\n})\nexport class Q2Item {\n    // #region Own Properties\n\n    @Element() hostElement: HTMLElement;\n    mutationObserver: MutationObserver;\n    itemElement: HTMLDivElement;\n\n    // #endregion\n    // #region State() Variables\n\n    @State() renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Makes the item clickable. */\n    @Prop({ reflect: true })\n    clickable: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(() => (this.renderTrigger += 1));\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n        }\n        this.setClickable();\n    }\n    // #endregion\n    // #region Local methods\n\n    get actionClasses() {\n        const classes = ['action'];\n        if (!this.hasBulletSlotContent) {\n            classes.push(`action-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get bulletClasses() {\n        const classes = ['bullet'];\n        if (!this.hasFooterSlotContent) {\n            classes.push(`bullet-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get footerClasses() {\n        const classes = ['footer'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`footer-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`footer-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`footer-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get hasActionSlotContent() {\n        return hasSlotContent(this.hostElement, 'action');\n    }\n\n    get hasBodySlotContent() {\n        return hasSlotContent(this.hostElement, 'body');\n    }\n\n    get hasBulletSlotContent() {\n        return hasSlotContent(this.hostElement, 'bullet');\n    }\n\n    get hasHeaderSlotContent() {\n        return hasSlotContent(this.hostElement, 'header');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    get itemClasses() {\n        const classes = ['item'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`item-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`item-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`item-no-bullet`);\n        }\n        if (!this.hasFooterSlotContent) {\n            classes.push(`item-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get mainClasses() {\n        const classes = ['main'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`main-no-action-nor-bullet`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`main-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    setClickable() {\n        if (this.clickable) {\n            this.itemElement?.setAttribute('role', 'button');\n            this.itemElement?.setAttribute('tabindex', '0');\n        } else {\n            this.itemElement?.removeAttribute('role');\n            this.itemElement?.removeAttribute('tabindex');\n        }\n    }\n\n    // #endregion\n    // #region Render methods\n\n    render() {\n        this.setClickable();\n        return (\n            <Fragment>\n                <div\n                    class={this.itemClasses}\n                    ref={el => (this.itemElement = el)}\n                >\n                    {this.hasBulletSlotContent && (\n                        <div class={this.bulletClasses}>\n                            <slot name=\"bullet\" />\n                        </div>\n                    )}\n                    <div class={this.mainClasses}>\n                        {this.hasHeaderSlotContent && (\n                            <div class=\"header\">\n                                <slot name=\"header\" />\n                            </div>\n                        )}\n                        {this.hasBodySlotContent && (\n                            <div class=\"body\">\n                                <slot name=\"body\" />\n                            </div>\n                        )}\n                    </div>\n                    {this.hasActionSlotContent && (\n                        <div class={this.actionClasses}>\n                            <slot name=\"action\" />\n                        </div>\n                    )}\n                    {this.hasFooterSlotContent && (\n                        <div class={this.footerClasses}>\n                            <slot name=\"footer\" />\n                        </div>\n                    )}\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-list/q2-list.css

@@ -0,0 +1,173 @@
+* {
+  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;
+}
+
+* {
+  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([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)), :host([bordered]:not([bordered=false])) .header {
+  border-bottom: var(--tct-list-item-separator, 1px solid #949494);
+}
+
+.header {
+  --comp-default-header-padding: var(--app-scale-2x, 8px) var(--app-scale-4x, 16px);
+  display: flex;
+  gap: var(--app-scale-3x, 12px);
+  padding: var(--tct-list-header-padding, var(--tct-item-padding, var(--comp-default-header-padding)));
+  min-height: var(--tct-list-header-min-height, var(--t-list-header-min-height, 44px));
+}
+.header-spacebetween {
+  justify-content: space-between;
+}
+.header-start {
+  justify-content: flex-start;
+}
+.header-end {
+  justify-content: flex-end;
+}
+.header .label {
+  width: 100%;
+  height: var(--tct-list-label-height, 44px);
+  line-height: var(--tct-list-label-line-height, 44px);
+  font-size: var(--tct-list-label-font-size, 16px);
+  font-weight: var(--tct-list-label-font-weight, 600);
+  color: var(--tct-list-label-font-color, var(--t-text, #4d4d4d));
+}
+
+.main {
+  grid-column: 2;
+  grid-row: 1;
+}
+.main-no-action-nor-bullet {
+  grid-column: 1;
+}
+.main-no-bullet {
+  grid-column: 1;
+}

package/dist/collection/components/q2-list/q2-list.js

@@ -0,0 +1,126 @@
+import { h } from "@stencil/core";
+import { hasSlotContent } from "../../utils/index";
+export class Q2List {
+    constructor() {
+        this.scheduledAfterRender = [];
+        // #endregion
+        // #region Local methods
+        this.onMutationObserved = () => {
+            this.renderTrigger += 1;
+            this.scheduledAfterRender.push(() => {
+                Array.from(this.hostElement.children).forEach(child => {
+                    if (child.tagName === 'Q2-ITEM')
+                        child.role = 'listitem';
+                });
+            });
+        };
+        this.label = undefined;
+        this.renderTrigger = 0;
+        this.bordered = undefined;
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    componentDidLoad() {
+        if (typeof MutationObserver !== 'undefined') {
+            const observer = new MutationObserver(this.onMutationObserved);
+            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });
+            this.mutationObserver = observer;
+            this.onMutationObserved();
+        }
+    }
+    componentDidRender() {
+        this.scheduledAfterRender.forEach(fn => fn());
+        this.scheduledAfterRender = [];
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = null;
+        }
+    }
+    get hasLabelContent() {
+        return !!this.label;
+    }
+    get hasFilterSlot() {
+        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');
+    }
+    get headerClasses() {
+        const classes = ['header'];
+        if (this.hasLabelContent && this.hasFilterSlot) {
+            classes.push('header-spacebetween');
+        }
+        else if (this.hasLabelContent && !this.hasFilterSlot) {
+            classes.push('header-start');
+        }
+        else if (!this.hasLabelContent && this.hasFilterSlot) {
+            classes.push('header-end');
+        }
+        return classes.join(' ');
+    }
+    get listClasses() {
+        const classes = ['list'];
+        return classes.join(' ');
+    }
+    // #endregion
+    // #region Render methods
+    render() {
+        return (h("div", { key: '37b0671ca94200f7e753f2b5e02a3dfd00efc6a3', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: 'a00b89d9153d707f5b7a3c0aaea857e5d489caff', class: this.headerClasses }, h("div", { key: '6ab05c1b898d8340526e9c45b457eb1920d37431', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'cb491e1700fc4312aa65016f897c35501ada01ff', name: "filter" }))), h("div", { key: 'b5af288fd5a3b233f981f67156bf1fbb59e1326d', role: "list" }, h("slot", { key: '3c48768066b42cecfc998506537a9447b5b61ff5' }))));
+    }
+    static get is() { return "q2-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["q2-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["q2-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "label text on header area"
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "bordered": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds a border between each items"
+                },
+                "attribute": "bordered",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "renderTrigger": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=q2-list.js.map

package/dist/collection/components/q2-list/q2-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-list.js","sourceRoot":"","sources":["../../../../src/components/q2-list/q2-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n@Component({\n    tag: 'q2-list',\n    styleUrl: 'q2-list.scss',\n    shadow: true,\n})\nexport class Q2List {\n    // #region Own Properties\n\n    @Element() hostElement: HTMLElement;\n    mutationObserver: MutationObserver;\n    listElement: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    /** label text on header area */\n    @Prop({ reflect: true }) label: string;\n\n    // #endregion\n    // #region State() Variables\n\n    @State() renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds a border between each items */\n    @Prop({ mutable: true, reflect: true }) bordered: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(this.onMutationObserved);\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n            this.onMutationObserved();\n        }\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    // #endregion\n    // #region Local methods\n\n    onMutationObserved = () => {\n        this.renderTrigger += 1;\n        this.scheduledAfterRender.push(() => {\n            Array.from(this.hostElement.children).forEach(child => {\n                if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n            });\n        });\n    };\n\n    get hasLabelContent() {\n        return !!this.label;\n    }\n\n    get hasFilterSlot() {\n        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');\n    }\n\n    get headerClasses() {\n        const classes = ['header'];\n        if (this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-spacebetween');\n        } else if (this.hasLabelContent && !this.hasFilterSlot) {\n            classes.push('header-start');\n        } else if (!this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-end');\n        }\n        return classes.join(' ');\n    }\n\n    get listClasses() {\n        const classes = ['list'];\n        return classes.join(' ');\n    }\n\n    // #endregion\n    // #region Render methods\n\n    render() {\n        return (\n            <div\n                class={this.listClasses}\n                ref={el => (this.listElement = el)}\n            >\n                {(this.hasFilterSlot || this.hasLabelContent) && (\n                    <div class={this.headerClasses}>\n                        <div class=\"label\">{this.label}</div>\n                        {this.hasFilterSlot && <slot name=\"filter\" />}\n                    </div>\n                )}\n                <div role=\"list\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-loc/q2-loc.js

@@ -6,7 +6,7 @@ export class Q2Loc {
         this.value = undefined;
     }
     render() {
-        return h("span", { key: '09a4c48caab9a3dc8e3390544bdf555610e3c645' }, loc(this.value, this.substitutions));
+        return h("span", { key: '3b8059b85a21870fc1b8e9ff9d89cad6afe2df36' }, loc(this.value, this.substitutions));
     }
     static get is() { return "q2-loc"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-message/q2-message.css

@@ -102,12 +102,14 @@ button {
 }
 
 ::slotted(ul) {
-  padding-left: var(--tct-scale-l3, var(--app-scale-3x, 15px));
+  --comp-list-default-padding: 0 0 0 var-list(--app-scale-3x, 15px);
+  padding: var(--tct-message-list-padding, var(--comp-list-default-padding));
 }
 
 :host(:not([appearance])),
 :host([appearance=standard]) {
-  margin: var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0;
+  --comp-default-margin: var-list(--app-scale-3x, 5px) 0;
+  margin: var(--tct-message-margin, var(--comp-default-margin));
 }
 :host(:not([appearance])) .message,
 :host([appearance=standard]) .message {
@@ -120,7 +122,8 @@ button {
 }
 :host(:not([appearance])) ::slotted(ul),
 :host([appearance=standard]) ::slotted(ul) {
-  margin: var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0;
+  --comp-list-default-margin: var-list(--app-scale-3x, 15px) 0;
+  margin: var(--tct-message-list-margin, var(--comp-list-default-margin));
 }
 
 :host([appearance=minimal]) {

package/dist/collection/components/q2-message/q2-message.js

@@ -36,7 +36,7 @@ export class Q2Message {
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: '37db942156016123583dcdfbab0a8692df8b0699', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: 'c198c1b528af1e9a53cb4d31e4f8b81abe867a4b', class: "sr" }), h("div", { key: '740490741aa9a4710a36615a6a1999d17cdb1625', class: "sr message-label" }, messageLabel), h("div", { key: '77bb02fb402cf30b1f2e10fe88acb0005f50e149', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: 'ba8c00d545b4a89826edc8e4612f720025a9cb5f' }))));
+        return (h("div", { key: 'dc36daa38d71e2adb1b5926531fa3c6864a8e7a4', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '41ea931afc6d551e6618f3041a77fc8c67fa23ea', class: "sr" }), h("div", { key: 'f77d9ae560914108eda454c0d4b4eb04302ba558', class: "sr message-label" }, messageLabel), h("div", { key: '6fb809b83d5de60625da2f9799bdbbcf2eb96eef', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: 'b03b23335c2b650f82a57abc8b2830353c5d8ae9' }))));
     }
     messageIcon(type) {
         const iconMap = {

package/dist/collection/components/q2-optgroup/q2-optgroup.js

@@ -36,7 +36,7 @@ export class Q2Optgroup {
         });
     }
     render() {
-        return (h("div", { key: 'e055edb08a1099842942582416a5550ad1a42b33', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '7daac57aba78354e023355e280bcc5ae808790ff', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'b9df8f23771b0b068f229489a74ee3e7fb7c08b8', class: "q2-optgroup-options" }, h("slot", { key: 'ff236b48776478a0da2b8ad5a30c68000a04706e' }))));
+        return (h("div", { key: 'f90275607d9a96d441d38a0580ce1b93e662634e', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'd7ebce6b9dca35f1a41c500942f6b21b6277d7b8', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '1f617b24906eb0ebe0e14520a45ae5de2e6757b5', class: "q2-optgroup-options" }, h("slot", { key: 'b90f24f7d8c10e3289041cb948587436c75a19f2' }))));
     }
     static get is() { return "q2-optgroup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-option/q2-option.css

@@ -117,7 +117,7 @@ button {
 }
 
 :host(:focus) {
-  border: 1px solid #33b4ff;
+  box-shadow: var(--tct-option-focus-box-shadow, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))) !important;
 }
 
 q2-icon {

package/dist/collection/components/q2-option/q2-option.js

@@ -50,7 +50,7 @@ export class Q2Option {
     render() {
         const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
         const isDisabled = disabled || disabledGroup;
-        return (h(Host, { key: '4ab65e5cb9b9d6a9eae7bf6f54d10aedfb0bf0d1', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: 'e97b97b66fbe497bd88b2540d7e913115c6a3493', type: "checkmark" }), h("div", { key: 'be2752322044765687780150d77e427187898260', class: "content" }, h("slot", { key: '4541c17bda9d0d399e49e80a67162cd96dfd6159' }))));
+        return (h(Host, { key: 'b6ca0e5f1a15c594a6577769c7549369573541bd', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: 'd4ddab403a45207e8f7e1c2b3611fd9ad5eafa52', type: "checkmark" }), h("div", { key: '4d10f04c3cc686a21f7e6e5d19106b61af89f6f2', class: "content" }, h("slot", { key: '2290b5fe8bbce6a3cb64c70d31df2376d51dd129' }))));
     }
     static get is() { return "q2-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-option-list/q2-option-list.js

@@ -659,7 +659,7 @@ export class Q2OptionList {
                     "references": {
                         "IOptionValue": {
                             "location": "local",
-                            "path": "/workspace/workspace/tecton-production_release_1.44.x/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
+                            "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
                             "id": "src/components/q2-option-list/q2-option-list.tsx::IOptionValue"
                         }
                     }
@@ -731,7 +731,7 @@ export class Q2OptionList {
                     "references": {
                         "IOptionValue": {
                             "location": "local",
-                            "path": "/workspace/workspace/tecton-production_release_1.44.x/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
+                            "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
                             "id": "src/components/q2-option-list/q2-option-list.tsx::IOptionValue"
                         }
                     }

package/dist/collection/components/q2-pagination/q2-pagination.js

@@ -150,7 +150,7 @@ export class Q2Pagination {
                 total,
             });
         }
-        return (h("nav", { key: '96bcb9c4a977162f1a3cf086ad71052a040fbc02', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '885ec8867dcfe56fcec401e3af167dcecc33b70f', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: '74561394c7bdb496d306e959ad5b1e5361e42ec7', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '2500a292e1823d4d24136be40a4fa4f9346bc9c8', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -159,7 +159,7 @@ export class Q2Pagination {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: 'aaaffc1971d83c47f71dc7f576043bb269589dd6', class: "btn-group" }, h("q2-btn", { key: 'dbc5c9cdcc90be091cbdc24fef330b4e83f84723', label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '6b61c526965bac728905b20081d1b3fc2ee10d13', type: "chevron-double-left" })), h("q2-btn", { key: '4156c64395f16f7c4c6ca7928f5dc50ba20007dc', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'bdb78a15f9852087531947b93e96e1b3c5518ff2', type: "chevron-left" }))), h("div", { key: 'f655f178bbbd3b41c43ca4f68442c59c8f3f0674', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '60afc8c8bd8805bf38813b73c75fb260abe8deb4', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '7ab2d59e80533d82739fc53d98416305cbe365c9', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '943e3b3a74853ec57b4939e897ad2d2296d875be', type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })), h("span", { key: 'e5da3d0850ec40c8123ec39bb3992260bf6001fc', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '7ecaaedfdb80f3fb45c5ae74da0811f88797ab2c', class: "btn-group" }, h("q2-btn", { key: '76aaadc41047bda4ff909eaa7269c6b00826cef9', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '3c2a3ecd6d8f75391a2200c6e4ee69be1fbaa6ad', type: "chevron-right" })), h("q2-btn", { key: '433de5183eb6c4350a886c691c813ab8e709a64d', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '48bf23391120c809d793b8a48c6de128b12ac75d', type: "chevron-double-right" })))));
+            })), h("div", { key: '653ee492dfd5b7e80d8d1e1eb680364cbdb13f17', class: "btn-group" }, h("q2-btn", { key: '512e60ac934efaa54a87862ab81677956d80c7dc', label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '7c0c57fbb28c7221467457ced6e2f196f5c0c41a', type: "chevron-double-left" })), h("q2-btn", { key: '5a3ad7135ac650be29b2dcbd0f4e2dd1e0303a14', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '9955d71cb14f809d7794022aff67c4403dd59e0c', type: "chevron-left" }))), h("div", { key: 'b7bbe334d869c527093f50b61419cd680dad7205', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '778f9842501854d5427f481e02924b2f967f8ec7', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '2761c3e8acd7150aba435d86c545e0903482163d', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '00e1cfc6c391311920928694844875715ed2fd97', type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })), h("span", { key: 'f14e720d12dcf4deb0b1ccf1b290f8ef1b3f9dab', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '6acb2c32ca833bdd68fe0e09cee75df7c8abaae3', class: "btn-group" }, h("q2-btn", { key: '0ac42aecaf056348a8c2e2729d1e35e7db44750b', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'f1c87ff1bc99dc529a2e5efdaad614f1b1c4b520', type: "chevron-right" })), h("q2-btn", { key: '2f6d47cc2805f3e9e3215448e5c6ca0909b7ad80', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '88a16778a20430935b7cc5d23393897f426d4548', type: "chevron-double-right" })))));
     }
     static get is() { return "q2-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -310,7 +310,7 @@ export class Q2Pagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Description of the record tupe to be displayed alongside the record count."
+                    "text": "Description of the record type to be displayed alongside the record count."
                 },
                 "attribute": "record-type",
                 "reflect": false