q2-tecton-elements 1.51.1 → 1.52.1

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

@@ -100,7 +100,7 @@ export class Q2Item {
     // #region Render Methods
     render() {
         const { clickable } = this;
-        return (h("div", { key: '2511d34e01575fe19d4a9becdce7a44ccc8736e7', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: '47595ae0c96465a0524c4b08f7c77997fa5ad012', class: this.bulletClasses }, h("slot", { key: '0e446493744bdc304336f20e5bab89864b430cec', name: "bullet" }))), h("div", { key: '061814832dc71b7bbe239cddb2e474f7ea91558c', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '9f27b6fa63241088951935cff169385ef23b55e4', class: "header" }, h("slot", { key: '9c99e37648c9c4c5a8b981aa16ec8a7b42a1887a', name: "header" }))), this.hasBodySlotContent && (h("div", { key: 'e8a788366c10d06fef823b9be88c40fba65d4e71', class: "body" }, h("slot", { key: '617965a59d689b0679e920794ebf9a36848f4eab', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '38c6a30f60c6a8bc8c953ed4b74a3687a0ba03a1', class: this.actionClasses }, h("slot", { key: '76efb6ba1377adcb3fc850d8966ecc49b55896b5', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '9a9bf0234ebac99487797bc93afa6e73097f1e68', class: this.footerClasses }, h("slot", { key: '91abd31668cff2657ecf57ce8b9d6f63e8d375ae', name: "footer" })))));
+        return (h("div", { key: '0829fd5b35d9479ab8a7dae744e8a09e90a1a128', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: '6fba2ecbbe6fe30121f15cda9cc5026a5c5468c2', class: this.bulletClasses }, h("slot", { key: '9bd9880d99124c1102725b5ce6ca49ac1e229cf9', name: "bullet" }))), h("div", { key: '0c184236511ba043c91a009c93680858e34de545', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '2570b5fd60955dbbc97f5f3d941a5d653785fb0e', class: "header" }, h("slot", { key: 'a438cafe8aeded03ee814f736ae897852a9f1415', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '270585a7a4ca111aedd4baeab101c353814aa72c', class: "body" }, h("slot", { key: 'cc95afec425e06c0a9edccedb0420207ccab88a0', name: "body" })))), this.hasActionSlotContent && (h("div", { key: 'c6a32baa731bd79c57a625d615058442a5bc764a', class: this.actionClasses }, h("slot", { key: '2b3104f1e0b4eed5e605c5784468f608240a881b', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '0a989b6ec5ca51e55fb44d0e90f57fe792a6bf35', class: this.footerClasses }, h("slot", { key: '76ae62c0b433f78b187853da2cf40394f7ca315e', name: "footer" })))));
     }
     static get is() { return "q2-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -94,7 +94,7 @@ export class Q2Legend {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("click-elsewhere", { key: '14c2b27428cc8a8e95bf8df62aac0c235bd65606', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: 'b597b625d0abb353d7752a9ca6ccedc9dc4eea6a' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+        return (h("click-elsewhere", { key: 'b80e97d61b66d2a3950c0e680d8f6fdf0594391a', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '14dc772fa9b1608e415573e90d4c2780c12adef5' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
     }
     static get is() { return "q2-legend"; }
     static get encapsulation() { return "shadow"; }

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

@@ -73,74 +73,71 @@ button {
   box-shadow: none;
 }
 
-.link {
+.link-container {
   --comp-link-font-bold-stroke-width: 0.5px;
   background: transparent;
   border: none;
-  color: var(--tct-link-color, var(--t-primary, inherit));
   font-size: var(--tct-link-font-size, inherit);
   font-weight: var(--tct-link-font-weight, inherit);
 }
-.link a {
+.link-container.standalone {
+  --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);
+}
+.link-container.standalone .link {
+  color: var(--tct-link-color-standalone, var(--t-primary));
   height: var(--tct-link-height, 24px);
   display: flex;
   align-items: center;
   --tct-icon-size: 16px;
   text-decoration: none;
 }
-.link a q2-icon {
+.link-container.standalone .link q2-icon {
   margin-left: var(--tct-link-label-icon-gap, 6px);
 }
-.link.standalone {
-  display: flex;
-  align-items: center;
-  color: var(--tct-link-color-standalone, var(--t-primary));
-  --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);
-}
-.link.standalone:hover {
+.link-container.standalone:hover {
   text-decoration: underline;
   -webkit-text-stroke-width: var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));
   text-stroke-width: var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));
   --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);
 }
-.link.standalone:active:hover {
+.link-container.standalone:active:hover {
   text-decoration: underline;
   -webkit-text-stroke-width: var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));
   text-stroke-width: var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));
   --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);
 }
-.link.standalone:active:hover a {
+.link-container.standalone:active:hover .link {
   color: var(--tct-link-color-standalone-active, var(--t-primary-d2));
   box-shadow: none;
 }
-.link.standalone.disabled a {
+.link-container.standalone.disabled .link {
   cursor: not-allowed;
   color: var(--tct-link-color-standalone-disabled, var(--t-primary));
   opacity: 0.5;
   text-decoration: none;
 }
-.link.standalone.disabled:hover {
+.link-container.standalone.disabled:hover {
   text-decoration: none;
 }
-.link.inline {
+.link-container.inline {
   margin: 0 var(--tct-link-side-margin, 6px);
   text-decoration: underline;
   color: var(--tct-link-color-inline, var(--t-primary));
 }
-.link.inline:hover {
+.link-container.inline:hover {
   -webkit-text-stroke-width: var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));
   text-stroke-width: var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));
 }
-.link.inline:active:hover {
+.link-container.inline:active:hover {
   -webkit-text-stroke-width: var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));
   text-stroke-width: var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));
   color: var(--tct-link-color-inline-active, var(--t-primary-d2));
   box-shadow: none;
 }
-.link.inline.disabled {
+.link-container.inline.disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
-.link.inline:focus-visible .link.inline {
+.link-container.inline:focus-visible .link-container.inline {
   box-shadow: var(--const-double-focus-ring);
 }

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

@@ -23,7 +23,7 @@ export class Q2Link {
     // #endregion
     // #region Local Methods
     get classes() {
-        const list = ['link'];
+        const list = ['link-container'];
         if (this.variant)
             list.push(this.variant);
         if (!!this.disabled)
@@ -43,7 +43,7 @@ export class Q2Link {
     // #endregion
     // #region Render Methods
     render() {
-        return this.variant === 'standalone' ? (h("div", { class: this.classes, "aria-label": this.label }, h("a", { onClick: e => this.handleClick(e), href: !!this.disabled ? undefined : this.href, target: this.target || '_self', referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "test-id": "linkAnchor" }, h("span", { class: "label" }, this.label), h("q2-icon", { type: "chevron-right" })))) : (h("a", { class: this.classes, onClick: e => this.handleClick(e), href: !!this.disabled ? undefined : this.href, target: this.target || '_self', referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "test-id": "linkAnchor" }, this.label));
+        return this.variant === 'standalone' ? (h("div", { class: this.classes, "aria-label": this.label }, h("a", { class: "link", onClick: e => this.handleClick(e), href: !!this.disabled ? undefined : this.href, target: this.target || '_self', referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "test-id": "linkAnchor" }, h("span", { class: "label" }, this.label), h("q2-icon", { type: "chevron-right" })))) : (h("a", { class: this.classes, onClick: e => this.handleClick(e), href: !!this.disabled ? undefined : this.href, target: this.target || '_self', referrerPolicy: this.referrerpolicy || undefined, title: this.tctTitle || undefined, "test-id": "linkAnchor" }, this.label));
     }
     static get is() { return "q2-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"q2-link.js","sourceRoot":"","sources":["../../../src/components/q2-link/q2-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAsB,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAE7G,MAAM,OAAO,MAAM;;wBAWK,KAAK;oBAIV,GAAG;;;;;uBAoBA,QAAQ;;IAY1B,aAAa;IACb,6BAA6B;IAE7B;;;;OAIG;IAEH,KAAK,CAAC,SAAS;QACX,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QAClF,MAA4B,aAA5B,MAAM,uBAAN,MAAM,CAAwB,KAAK,EAAE,CAAC;IAC3C,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,OAAO;QACP,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC;QACtB,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC1C,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC3C,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED,WAAW,CAAC,KAAiB;QACzB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,cAAc,EAAE,IAAI,CAAC,cAAc;YACnC,IAAI,EAAE,IAAI,CAAC,IAAI;SAClB,CAAC,CAAC;IACP,CAAC;IAED,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,OAAO,IAAI,CAAC,OAAO,KAAK,YAAY,CAAC,CAAC,CAAC,CACnC,WACI,KAAK,EAAE,IAAI,CAAC,OAAO,gBACP,IAAI,CAAC,KAAK;YAEtB,SACI,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,OAAO,EAC9B,cAAc,EAAE,IAAI,CAAC,cAAc,IAAI,SAAS,EAChD,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,aACzB,YAAY;gBAEpB,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACvC,eAAS,IAAI,EAAC,eAAe,GAAW,CACxC,CACF,CACT,CAAC,CAAC,CAAC,CACA,SACI,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,OAAO,EAC9B,cAAc,EAAE,IAAI,CAAC,cAAc,IAAI,SAAS,EAChD,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,aACzB,YAAY,IAEnB,IAAI,CAAC,KAAK,CACX,CACP,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The disabled.  */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** The link when clicked. */\n    @Prop({ reflect: true })\n    href: string = '#';\n\n    /** The label to display. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** The [referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy) */\n    @Prop({ reflect: true })\n    referrerpolicy: ReferrerPolicy;\n\n    /** The target.  */\n    @Prop({ reflect: true })\n    target: string; // _self | _blank\n\n    /** The title attribute on a tag in shadowRoot. */\n    @Prop({ reflect: true })\n    tctTitle: string;\n\n    /** The value link to display. */\n    @Prop({ reflect: true })\n    variant: string = 'inline';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the link is clicked.\n     * @legacyEvent\n     */\n    @Event()\n    tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method for click.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickLink() {\n        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n        (anchor as HTMLAnchorElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get classes() {\n        const list = ['link'];\n        if (this.variant) list.push(this.variant);\n        if (!!this.disabled) list.push('disabled');\n        return list.join(' ');\n    }\n\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n        if (this.disabled) return;\n        this.tctClick.emit({\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            href: this.href,\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return this.variant === 'standalone' ? (\n            <div\n                class={this.classes}\n                aria-label={this.label}\n            >\n                <a\n                    onClick={e => this.handleClick(e)}\n                    href={!!this.disabled ? undefined : this.href}\n                    target={this.target || '_self'}\n                    referrerPolicy={this.referrerpolicy || undefined}\n                    title={this.tctTitle || undefined}\n                    test-id=\"linkAnchor\"\n                >\n                    <span class=\"label\">{this.label}</span>\n                    <q2-icon type=\"chevron-right\"></q2-icon>\n                </a>\n            </div>\n        ) : (\n            <a\n                class={this.classes}\n                onClick={e => this.handleClick(e)}\n                href={!!this.disabled ? undefined : this.href}\n                target={this.target || '_self'}\n                referrerPolicy={this.referrerpolicy || undefined}\n                title={this.tctTitle || undefined}\n                test-id=\"linkAnchor\"\n            >\n                {this.label}\n            </a>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-link.js","sourceRoot":"","sources":["../../../src/components/q2-link/q2-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The disabled.  */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** The link when clicked. */\n    @Prop({ reflect: true })\n    href: string = '#';\n\n    /** The label to display. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** The [referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy) */\n    @Prop({ reflect: true })\n    referrerpolicy: ReferrerPolicy;\n\n    /** The target.  */\n    @Prop({ reflect: true })\n    target: string; // _self | _blank\n\n    /** The title attribute on a tag in shadowRoot. */\n    @Prop({ reflect: true })\n    tctTitle: string;\n\n    /** The value link to display. */\n    @Prop({ reflect: true })\n    variant: string = 'inline';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the link is clicked.\n     * @legacyEvent\n     */\n    @Event()\n    tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method for click.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickLink() {\n        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n        (anchor as HTMLAnchorElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get classes() {\n        const list = ['link-container'];\n        if (this.variant) list.push(this.variant);\n        if (!!this.disabled) list.push('disabled');\n        return list.join(' ');\n    }\n\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n        if (this.disabled) return;\n        this.tctClick.emit({\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            href: this.href,\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return this.variant === 'standalone' ? (\n            <div\n                class={this.classes}\n                aria-label={this.label}\n            >\n                <a\n                    class=\"link\"\n                    onClick={e => this.handleClick(e)}\n                    href={!!this.disabled ? undefined : this.href}\n                    target={this.target || '_self'}\n                    referrerPolicy={this.referrerpolicy || undefined}\n                    title={this.tctTitle || undefined}\n                    test-id=\"linkAnchor\"\n                >\n                    <span class=\"label\">{this.label}</span>\n                    <q2-icon type=\"chevron-right\"></q2-icon>\n                </a>\n            </div>\n        ) : (\n            <a\n                class={this.classes}\n                onClick={e => this.handleClick(e)}\n                href={!!this.disabled ? undefined : this.href}\n                target={this.target || '_self'}\n                referrerPolicy={this.referrerpolicy || undefined}\n                title={this.tctTitle || undefined}\n                test-id=\"linkAnchor\"\n            >\n                {this.label}\n            </a>\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-link/test/q2-link-test.e2e.js

@@ -55,8 +55,8 @@ describe('q2-link', () => {
         expect(page.root).toEqualHtml(`
             <q2-link label="Click me" href="https://q2.com" variant="standalone">
                 <mock:shadow-root>
-                <div aria-label="Click me" class="link standalone">
-                    <a href="https://q2.com" target="_self" test-id="linkAnchor">
+                <div aria-label="Click me" class="link-container standalone">
+                    <a class="link" href="https://q2.com" target="_self" test-id="linkAnchor">
                         <span class="label">Click me</span>
                         <q2-icon type="chevron-right"></q2-icon>
                     </a>
@@ -92,8 +92,8 @@ describe('q2-link', () => {
             expect(page.root).toEqualHtml(`
                 <q2-link label="Click me" href="https://q2.com" variant="standalone" target="_blank" referrerpolicy="no-referrer">
                     <mock:shadow-root>
-                    <div aria-label="Click me" class="link standalone">
-                        <a href="https://q2.com" target="_blank" referrerpolicy="no-referrer" test-id="linkAnchor">
+                    <div aria-label="Click me" class="link-container standalone">
+                        <a class="link" href="https://q2.com" target="_blank" referrerpolicy="no-referrer" test-id="linkAnchor">
                             <span class="label">Click me</span>
                             <q2-icon type="chevron-right"></q2-icon>
                         </a>
@@ -113,7 +113,7 @@ describe('q2-link', () => {
             expect(page.root).toEqualHtml(`
                 <q2-link label="Click me" href="https://q2.com" variant="inline" target="_blank" referrerpolicy="no-referrer">
                     <mock:shadow-root>
-                        <a href="https://q2.com" target="_blank" class="link inline" referrerpolicy="no-referrer" test-id="linkAnchor">
+                        <a href="https://q2.com" target="_blank" class="link-container inline" referrerpolicy="no-referrer" test-id="linkAnchor">
                             Click me
                         </a>
                     </mock:shadow-root>
@@ -130,7 +130,7 @@ describe('q2-link', () => {
                         variant="inline"
                         target="_blank"
                         referrerpolicy="no-referrer">
-                    </q2-data-table>
+                    </q2-link>
                 `,
             });
             await page.waitForChanges();

package/dist/collection/components/q2-link/test/q2-link-test.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-link-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-link/test/q2-link-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { SpecPage, newSpecPage } from '@stencil/core/testing';\nimport { setup, evaluateA11y, getListOfStyleCompilationIssues } from '@/utils/helpers';\nimport { Q2Link } from '../q2-link';\n\nfunction createNewSpecPage(props: {\n    label?: string;\n    href?: string;\n    target?: string;\n    variant?: string;\n    referrerpolicy?: string;\n    disabled?: boolean;\n}) {\n    let htmlProps: string = '';\n    if (!!props.label) {\n        htmlProps += ` label=\"${props.label}\"`;\n    }\n    if (!!props.href) {\n        htmlProps += ` href=\"${props.href}\"`;\n    }\n    if (!!props.target) {\n        htmlProps += ` target=\"${props.target}\"`;\n    }\n    if (!!props.variant) {\n        htmlProps += ` variant=\"${props.variant || 'inline'}\"`;\n    }\n    if (!!props.referrerpolicy) {\n        htmlProps += ` referrerpolicy=\"${props.referrerpolicy}\"`;\n    }\n    if (!!props.disabled) {\n        htmlProps += ` disabled=\"\"`;\n    }\n\n    return newSpecPage({\n        components: [Q2Link],\n        html: `<q2-link ${htmlProps}></q2-link>`,\n    });\n}\n\ndescribe('q2-link', () => {\n    it('properly compiles CSS vars and functions', async () => {\n        const page = await setup({ html: '<q2-link></q2-link>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-link')).toHaveLength(0);\n    });\n\n    describe('[A11y] guideline compliance', () => {\n        it('Does not have accessibility violations for inline variant(default)', async () => {\n            const page = await setup({ html: `<q2-link label=\"Click me\" href=\"https://q2.com\" />` });\n            const hasViolations = await evaluateA11y(page);\n            expect(hasViolations).toBe(false);\n        });\n        it('Does not have accessibility violations for standalone variant', async () => {\n            const page = await setup({\n                html: `<q2-link label=\"Click me\" href=\"https://q2.com\" variant=\"standalone\" />`,\n            });\n            const hasViolations = await evaluateA11y(page);\n            expect(hasViolations).toBe(false);\n        });\n    });\n\n    let page: SpecPage;\n\n    it('renders', async () => {\n        page = await createNewSpecPage({\n            label: 'Click me',\n            href: 'https://q2.com',\n            variant: 'standalone',\n        });\n\n        expect(page.root).toEqualHtml(`\n            <q2-link label=\"Click me\" href=\"https://q2.com\" variant=\"standalone\">\n                <mock:shadow-root>\n                <div aria-label=\"Click me\" class=\"link standalone\">\n                    <a href=\"https://q2.com\" target=\"_self\" test-id=\"linkAnchor\">\n                        <span class=\"label\">Click me</span>\n                        <q2-icon type=\"chevron-right\"></q2-icon>\n                    </a>\n                </div>\n                </mock:shadow-root>\n            </q2-link>\n        `);\n    });\n\n    describe('Props', () => {\n        it('should render with properties', async () => {\n            page = await createNewSpecPage({\n                label: 'Click me',\n                href: 'https://q2.com',\n                target: '_blank',\n                referrerpolicy: 'no-referrer',\n                variant: 'standalone',\n            });\n            expect(page.root.label).toBe('Click me');\n            expect(page.root.href).toBe('https://q2.com');\n            expect(page.root.target).toBe('_blank');\n            expect(page.root.variant).toBe('standalone');\n            expect(page.root.referrerpolicy).toBe('no-referrer');\n        });\n        it('should render with standalone variant', async () => {\n            page = await createNewSpecPage({\n                label: 'Click me',\n                href: 'https://q2.com',\n                target: '_blank',\n                referrerpolicy: 'no-referrer',\n                variant: 'standalone',\n            });\n            expect(page.root.label).toBe('Click me');\n            expect(page.root).toEqualHtml(`\n                <q2-link label=\"Click me\" href=\"https://q2.com\" variant=\"standalone\" target=\"_blank\" referrerpolicy=\"no-referrer\">\n                    <mock:shadow-root>\n                    <div aria-label=\"Click me\" class=\"link standalone\">\n                        <a href=\"https://q2.com\" target=\"_blank\" referrerpolicy=\"no-referrer\" test-id=\"linkAnchor\">\n                            <span class=\"label\">Click me</span>\n                            <q2-icon type=\"chevron-right\"></q2-icon>\n                        </a>\n                    </div>\n                    </mock:shadow-root>\n                </q2-link>\n            `);\n        });\n        it('should render with inline variant', async () => {\n            page = await createNewSpecPage({\n                label: 'Click me',\n                href: 'https://q2.com',\n                target: '_blank',\n                referrerpolicy: 'no-referrer',\n            });\n            expect(page.root.label).toBe('Click me');\n            expect(page.root).toEqualHtml(`\n                <q2-link label=\"Click me\" href=\"https://q2.com\" variant=\"inline\" target=\"_blank\" referrerpolicy=\"no-referrer\">\n                    <mock:shadow-root>\n                        <a href=\"https://q2.com\" target=\"_blank\" class=\"link inline\" referrerpolicy=\"no-referrer\" test-id=\"linkAnchor\">\n                            Click me\n                        </a>\n                    </mock:shadow-root>\n                </q2-link>\n            `);\n        });\n    });\n\n    describe('Test methods', () => {\n        it('clickLink()', async () => {\n            const page = await setup({\n                html: `\n                    <q2-link label=\"Click me\"\n                        href=\"https://q2.com\"\n                        variant=\"inline\"\n                        target=\"_blank\"\n                        referrerpolicy=\"no-referrer\">\n                    </q2-data-table>\n                `,\n            });\n            await page.waitForChanges();\n            const sortSpy = await page.spyOnEvent('tctClick');\n            const link = await page.find('q2-link');\n            await link.callMethod('clickLink');\n            await page.waitForChanges();\n            expect(sortSpy).toHaveReceivedEventTimes(1);\n        });\n    });\n});\n"]}
+{"version":3,"file":"q2-link-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-link/test/q2-link-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { SpecPage, newSpecPage } from '@stencil/core/testing';\nimport { setup, evaluateA11y, getListOfStyleCompilationIssues } from '@/utils/helpers';\nimport { Q2Link } from '../q2-link';\n\nfunction createNewSpecPage(props: {\n    label?: string;\n    href?: string;\n    target?: string;\n    variant?: string;\n    referrerpolicy?: string;\n    disabled?: boolean;\n}) {\n    let htmlProps: string = '';\n    if (!!props.label) {\n        htmlProps += ` label=\"${props.label}\"`;\n    }\n    if (!!props.href) {\n        htmlProps += ` href=\"${props.href}\"`;\n    }\n    if (!!props.target) {\n        htmlProps += ` target=\"${props.target}\"`;\n    }\n    if (!!props.variant) {\n        htmlProps += ` variant=\"${props.variant || 'inline'}\"`;\n    }\n    if (!!props.referrerpolicy) {\n        htmlProps += ` referrerpolicy=\"${props.referrerpolicy}\"`;\n    }\n    if (!!props.disabled) {\n        htmlProps += ` disabled=\"\"`;\n    }\n\n    return newSpecPage({\n        components: [Q2Link],\n        html: `<q2-link ${htmlProps}></q2-link>`,\n    });\n}\n\ndescribe('q2-link', () => {\n    it('properly compiles CSS vars and functions', async () => {\n        const page = await setup({ html: '<q2-link></q2-link>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-link')).toHaveLength(0);\n    });\n\n    describe('[A11y] guideline compliance', () => {\n        it('Does not have accessibility violations for inline variant(default)', async () => {\n            const page = await setup({ html: `<q2-link label=\"Click me\" href=\"https://q2.com\" />` });\n            const hasViolations = await evaluateA11y(page);\n            expect(hasViolations).toBe(false);\n        });\n        it('Does not have accessibility violations for standalone variant', async () => {\n            const page = await setup({\n                html: `<q2-link label=\"Click me\" href=\"https://q2.com\" variant=\"standalone\" />`,\n            });\n            const hasViolations = await evaluateA11y(page);\n            expect(hasViolations).toBe(false);\n        });\n    });\n\n    let page: SpecPage;\n\n    it('renders', async () => {\n        page = await createNewSpecPage({\n            label: 'Click me',\n            href: 'https://q2.com',\n            variant: 'standalone',\n        });\n\n        expect(page.root).toEqualHtml(`\n            <q2-link label=\"Click me\" href=\"https://q2.com\" variant=\"standalone\">\n                <mock:shadow-root>\n                <div aria-label=\"Click me\" class=\"link-container standalone\">\n                    <a class=\"link\" href=\"https://q2.com\" target=\"_self\" test-id=\"linkAnchor\">\n                        <span class=\"label\">Click me</span>\n                        <q2-icon type=\"chevron-right\"></q2-icon>\n                    </a>\n                </div>\n                </mock:shadow-root>\n            </q2-link>\n        `);\n    });\n\n    describe('Props', () => {\n        it('should render with properties', async () => {\n            page = await createNewSpecPage({\n                label: 'Click me',\n                href: 'https://q2.com',\n                target: '_blank',\n                referrerpolicy: 'no-referrer',\n                variant: 'standalone',\n            });\n            expect(page.root.label).toBe('Click me');\n            expect(page.root.href).toBe('https://q2.com');\n            expect(page.root.target).toBe('_blank');\n            expect(page.root.variant).toBe('standalone');\n            expect(page.root.referrerpolicy).toBe('no-referrer');\n        });\n        it('should render with standalone variant', async () => {\n            page = await createNewSpecPage({\n                label: 'Click me',\n                href: 'https://q2.com',\n                target: '_blank',\n                referrerpolicy: 'no-referrer',\n                variant: 'standalone',\n            });\n            expect(page.root.label).toBe('Click me');\n            expect(page.root).toEqualHtml(`\n                <q2-link label=\"Click me\" href=\"https://q2.com\" variant=\"standalone\" target=\"_blank\" referrerpolicy=\"no-referrer\">\n                    <mock:shadow-root>\n                    <div aria-label=\"Click me\" class=\"link-container standalone\">\n                        <a class=\"link\" href=\"https://q2.com\" target=\"_blank\" referrerpolicy=\"no-referrer\" test-id=\"linkAnchor\">\n                            <span class=\"label\">Click me</span>\n                            <q2-icon type=\"chevron-right\"></q2-icon>\n                        </a>\n                    </div>\n                    </mock:shadow-root>\n                </q2-link>\n            `);\n        });\n        it('should render with inline variant', async () => {\n            page = await createNewSpecPage({\n                label: 'Click me',\n                href: 'https://q2.com',\n                target: '_blank',\n                referrerpolicy: 'no-referrer',\n            });\n            expect(page.root.label).toBe('Click me');\n            expect(page.root).toEqualHtml(`\n                <q2-link label=\"Click me\" href=\"https://q2.com\" variant=\"inline\" target=\"_blank\" referrerpolicy=\"no-referrer\">\n                    <mock:shadow-root>\n                        <a href=\"https://q2.com\" target=\"_blank\" class=\"link-container inline\" referrerpolicy=\"no-referrer\" test-id=\"linkAnchor\">\n                            Click me\n                        </a>\n                    </mock:shadow-root>\n                </q2-link>\n            `);\n        });\n    });\n\n    describe('Test methods', () => {\n        it('clickLink()', async () => {\n            const page = await setup({\n                html: `\n                    <q2-link label=\"Click me\"\n                        href=\"https://q2.com\"\n                        variant=\"inline\"\n                        target=\"_blank\"\n                        referrerpolicy=\"no-referrer\">\n                    </q2-link>\n                `,\n            });\n            await page.waitForChanges();\n            const sortSpy = await page.spyOnEvent('tctClick');\n            const link = await page.find('q2-link');\n            await link.callMethod('clickLink');\n            await page.waitForChanges();\n            expect(sortSpy).toHaveReceivedEventTimes(1);\n        });\n    });\n});\n"]}

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

@@ -19,10 +19,9 @@ export class Q2List {
     // #endregion
     // #region Component Lifecycle Events
     disconnectedCallback() {
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-            this.mutationObserver = null;
-        }
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver = null;
     }
     componentDidLoad() {
         if (typeof MutationObserver === 'undefined')
@@ -64,7 +63,7 @@ export class Q2List {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'f6b93c87dbc86ff0522ef0827e3f60f9b28993e3', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '39973ea29515746cbf0ce22029084b0530ae5af6', class: this.headerClasses }, h("div", { key: 'bcd3fb06ee6879f3b0558301b7d9ff31699be9b6', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '9229cd8da2c0c362627e9ee7e8f04cddbc3f26a2', name: "filter" }))), h("div", { key: 'e1ee3f55a2b896770e1041239e70a91df434cc68', role: "list" }, h("slot", { key: '0c621e0bd3d9ee7382754f8be92231983bc91562' }))));
+        return (h("div", { key: 'e4371faae59ae85dee324d6d6783a4b93c23f67f', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '59cc98b62d2581a66a9ed127189fb23364c49bff', class: this.headerClasses }, h("div", { key: '568b6fab57c7552d5a577d19bd31760f6d1aa461', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'd27e785788847cf1a422568383bfe5d986764b2b', name: "filter" }))), h("div", { key: '7a00add6911167d7a27008f10f5d44cfae5d80b2', role: "list" }, h("slot", { key: 'dd5a0290091b0f1cb00a14cde43bab36e87573d2' }))));
     }
     static get is() { return "q2-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +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    listElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    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 })\n    bordered: boolean;\n\n    /** label text on header area */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    componentDidLoad() {\n        if (typeof MutationObserver === 'undefined') return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasFilterSlot() {\n        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');\n    }\n\n    get hasLabelContent() {\n        return !!this.label;\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    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    // #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\n    // #endregion\n}\n"]}
+{"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    listElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    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 })\n    bordered: boolean;\n\n    /** label text on header area */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentDidLoad() {\n        if (typeof MutationObserver === 'undefined') return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasFilterSlot() {\n        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');\n    }\n\n    get hasLabelContent() {\n        return !!this.label;\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    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    // #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\n    // #endregion\n}\n"]}

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

@@ -2,13 +2,57 @@ import { h } from "@stencil/core";
 import { loc } from "../../utils/index";
 export class Q2Loc {
     constructor() {
+        // #endregion
+        // #region Local Methods
+        this.initMutationObserver = () => {
+            const observer = new MutationObserver(this.mutationHandler);
+            observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });
+            this.mutationObserver = observer;
+        };
+        this.initValue = async () => {
+            const textContent = this.hostElement.textContent.trim();
+            if (!this.value && textContent) {
+                this.value = textContent;
+                this.hostElement.textContent = null;
+            }
+            else {
+                this.propHandler();
+            }
+        };
+        this.mutationHandler = async () => {
+            const textContent = this.hostElement.textContent.trim();
+            if (textContent && this.value !== textContent) {
+                this.value = textContent;
+                this.hostElement.textContent = null;
+            }
+        };
+        this.displayValue = undefined;
         this.substitutions = undefined;
         this.value = undefined;
     }
     // #endregion
+    // #region Component Lifecycle Events
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver = null;
+    }
+    componentWillLoad() {
+        this.initValue();
+    }
+    componentDidLoad() {
+        if ('MutationObserver' in window)
+            this.initMutationObserver();
+    }
+    // #endregion
+    // #region Watchers
+    propHandler() {
+        this.displayValue = loc(this.value, this.substitutions);
+    }
+    // #endregion
     // #region Render Methods
     render() {
-        return h("span", { key: 'e003f2f988be6050e7f80f0d0b2a9fbd587a66eb' }, loc(this.value, this.substitutions));
+        return h("span", { key: '8774b0a4bfb39826f6d7be0640c7a0244ab22a09' }, this.displayValue);
     }
     static get is() { return "q2-loc"; }
     static get encapsulation() { return "shadow"; }
@@ -41,7 +85,7 @@ export class Q2Loc {
             },
             "value": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -50,13 +94,31 @@ export class Q2Loc {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The reference to the localization key you would like to display the localized output of."
+                    "tags": [{
+                            "name": "localizable",
+                            "text": undefined
+                        }],
+                    "text": "The reference to the localization key you would like to display the localized output of.\nIf no value is provided, any text inside the element will be used as a fallback."
                 },
                 "attribute": "value",
                 "reflect": true
             }
         };
     }
+    static get states() {
+        return {
+            "displayValue": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "propHandler"
+            }, {
+                "propName": "substitutions",
+                "methodName": "propHandler"
+            }];
+    }
 }
 //# sourceMappingURL=q2-loc.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"q2-loc.js","sourceRoot":"","sources":["../../../src/components/q2-loc/q2-loc.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAGhC,MAAM,OAAO,KAAK;;;;;IAWd,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,OAAO,+DAAO,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,CAAQ,CAAC;IAC9D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-loc', shadow: true, styleUrl: 'q2-loc.scss' })\nexport class Q2Loc {\n    // #region Public Property API\n\n    /** Any substitutions you would like to pass into the localization string. */\n    @Prop()\n    substitutions: string[];\n\n    /** The reference to the localization key you would like to display the localized output of. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return <span>{loc(this.value, this.substitutions)}</span>;\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-loc.js","sourceRoot":"","sources":["../../../src/components/q2-loc/q2-loc.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAGhC,MAAM,OAAO,KAAK;;QAyDd,aAAa;QACb,wBAAwB;QAExB,yBAAoB,GAAG,GAAG,EAAE;YACxB,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YAC5D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;YAC5F,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACrC,CAAC,CAAC;QAEF,cAAS,GAAG,KAAK,IAAI,EAAE;YACnB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YACxD,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,WAAW,EAAE,CAAC;gBAC7B,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;gBACzB,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC;YACxC,CAAC;iBAAM,CAAC;gBACJ,IAAI,CAAC,WAAW,EAAE,CAAC;YACvB,CAAC;QACL,CAAC,CAAC;QAEF,oBAAe,GAAG,KAAK,IAAI,EAAE;YACzB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YACxD,IAAI,WAAW,IAAI,IAAI,CAAC,KAAK,KAAK,WAAW,EAAE,CAAC;gBAC5C,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;gBACzB,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC;YACxC,CAAC;QACL,CAAC,CAAC;;;;;IAlDF,aAAa;IACb,qCAAqC;IAErC,oBAAoB;;QAChB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IACjC,CAAC;IAED,iBAAiB;QACb,IAAI,CAAC,SAAS,EAAE,CAAC;IACrB,CAAC;IAED,gBAAgB;QACZ,IAAI,kBAAkB,IAAI,MAAM;YAAE,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAClE,CAAC;IAED,aAAa;IACb,mBAAmB;IAInB,WAAW;QACP,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC5D,CAAC;IA6BD,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,OAAO,+DAAO,IAAI,CAAC,YAAY,CAAQ,CAAC;IAC5C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Element, Component, Prop, State, Watch, h } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-loc', shadow: true, styleUrl: 'q2-loc.scss' })\nexport class Q2Loc {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    displayValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Any substitutions you would like to pass into the localization string. */\n    @Prop()\n    substitutions: string[];\n\n    /**\n     * The reference to the localization key you would like to display the localized output of.\n     * If no value is provided, any text inside the element will be used as a fallback.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.initValue();\n    }\n\n    componentDidLoad() {\n        if ('MutationObserver' in window) this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('value')\n    @Watch('substitutions')\n    propHandler() {\n        this.displayValue = loc(this.value, this.substitutions);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    initMutationObserver = () => {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    initValue = async () => {\n        const textContent = this.hostElement.textContent.trim();\n        if (!this.value && textContent) {\n            this.value = textContent;\n            this.hostElement.textContent = null;\n        } else {\n            this.propHandler();\n        }\n    };\n\n    mutationHandler = async () => {\n        const textContent = this.hostElement.textContent.trim();\n        if (textContent && this.value !== textContent) {\n            this.value = textContent;\n            this.hostElement.textContent = null;\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return <span>{this.displayValue}</span>;\n    }\n\n    // #endregion\n}\n"]}

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

@@ -1,37 +1,26 @@
 import { evaluateA11y, getListOfStyleCompilationIssues, setTestStrings, setup } from "../../../utils/helpers";
 describe('q2-loc', () => {
-    it('properly compiles CSS vars and functions', async () => {
-        const page = await setup({ html: '<q2-loc></q2-loc>' });
-        expect(await getListOfStyleCompilationIssues(page, 'q2-loc')).toHaveLength(0);
-    });
-    it('localizes provided string and renders the text in its shadowDOM', async function () {
-        const page = await setup({ html: `<q2-loc></q2-loc>` });
-        await setTestStrings(page, { 'tecton.element.loc.test': 'Test String' });
-        const q2Loc = await page.find('q2-loc');
-        q2Loc.setProperty('value', 'tecton.element.loc.test');
-        await page.waitForChanges();
-        // the component renders
-        expect(q2Loc.tagName).toEqual('Q2-LOC');
-        const innerContent = await page.find('q2-loc >>> span');
-        // nested span renders with localized text
-        expect(innerContent.innerText).toEqual('Test String');
-    });
-    it('localizes provided string with substitutions and renders the text in its shadowDOM', async function () {
-        const page = await setup({ html: `<q2-loc id="unique-id"></q2-loc>` });
-        await setTestStrings(page, {
-            'tecton.element.loc.test.substitutions': 'Test String with {0} and {1}',
+    describe('Initialization', () => {
+        it('properly compiles CSS vars and functions', async () => {
+            const page = await setup({ html: '<q2-loc></q2-loc>' });
+            expect(await getListOfStyleCompilationIssues(page, 'q2-loc')).toHaveLength(0);
         });
-        const q2Loc = await page.find('q2-loc');
-        q2Loc.setProperty('value', 'tecton.element.loc.test.substitutions');
-        await page.$eval('q2-loc', (element) => {
-            element.substitutions = ['Jane', 'Doe'];
+    });
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('does not have accessibility violations', async () => {
+                const page = await setup({ html: `<q2-loc></q2-loc>` });
+                await setTestStrings(page, { 'tecton.element.loc.test': 'Test String' });
+                const q2Loc = await page.find('q2-loc');
+                q2Loc.setProperty('value', 'tecton.element.loc.test');
+                await page.waitForChanges();
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
         });
-        await page.waitForChanges();
-        // the component renders
-        expect(q2Loc.tagName).toEqual('Q2-LOC');
-        const innerContent = await page.find('q2-loc >>> span');
-        // nested span renders with localized text
-        expect(innerContent.innerText).toEqual('Test String with Jane and Doe');
+        describe('Accessibility Tree', () => { });
+        describe('Keyboard Controls', () => { });
+        describe('Other', () => { });
     });
     describe('Accessibility', () => {
         describe('aXe DevTools', () => {

package/dist/collection/components/q2-loc/test/q2-loc-test.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-loc-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-loc/test/q2-loc-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { evaluateA11y, getListOfStyleCompilationIssues, setTestStrings, setup } from '@/utils/helpers';\n\ndescribe('q2-loc', () => {\n    it('properly compiles CSS vars and functions', async () => {\n        const page = await setup({ html: '<q2-loc></q2-loc>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-loc')).toHaveLength(0);\n    });\n\n    it('localizes provided string and renders the text in its shadowDOM', async function (): Promise<void> {\n        const page = await setup({ html: `<q2-loc></q2-loc>` });\n        await setTestStrings(page, { 'tecton.element.loc.test': 'Test String' });\n\n        const q2Loc = await page.find('q2-loc');\n\n        q2Loc.setProperty('value', 'tecton.element.loc.test');\n\n        await page.waitForChanges();\n\n        // the component renders\n        expect(q2Loc.tagName).toEqual('Q2-LOC');\n\n        const innerContent = await page.find('q2-loc >>> span');\n\n        // nested span renders with localized text\n        expect(innerContent.innerText).toEqual('Test String');\n    });\n\n    it('localizes provided string with substitutions and renders the text in its shadowDOM', async function (): Promise<void> {\n        const page = await setup({ html: `<q2-loc id=\"unique-id\"></q2-loc>` });\n        await setTestStrings(page, {\n            'tecton.element.loc.test.substitutions': 'Test String with {0} and {1}',\n        });\n\n        const q2Loc = await page.find('q2-loc');\n        q2Loc.setProperty('value', 'tecton.element.loc.test.substitutions');\n\n        await page.$eval('q2-loc', (element: HTMLQ2LocElement) => {\n            element.substitutions = ['Jane', 'Doe'];\n        });\n\n        await page.waitForChanges();\n\n        // the component renders\n        expect(q2Loc.tagName).toEqual('Q2-LOC');\n\n        const innerContent = await page.find('q2-loc >>> span');\n\n        // nested span renders with localized text\n        expect(innerContent.innerText).toEqual('Test String with Jane and Doe');\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                const page = await setup({ html: `<q2-loc></q2-loc>` });\n                await setTestStrings(page, { 'tecton.element.loc.test': 'Test String' });\n                const q2Loc = await page.find('q2-loc');\n                q2Loc.setProperty('value', 'tecton.element.loc.test');\n                await page.waitForChanges();\n                const hasViolations = await evaluateA11y(page);\n                expect(hasViolations).toBe(false);\n            });\n        });\n        describe('Accessibility Tree', () => {});\n        describe('Keyboard Controls', () => {});\n        describe('Other', () => {});\n    });\n});\n"]}
+{"version":3,"file":"q2-loc-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-loc/test/q2-loc-test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,+BAA+B,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAEvG,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACpB,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;QAC5B,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;YACtD,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC;YACxD,MAAM,CAAC,MAAM,+BAA+B,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAClF,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;QAC3B,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;YAC1B,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;gBACpD,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC;gBACxD,MAAM,cAAc,CAAC,IAAI,EAAE,EAAE,yBAAyB,EAAE,aAAa,EAAE,CAAC,CAAC;gBACzE,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;gBACxC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,yBAAyB,CAAC,CAAC;gBACtD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;gBAC5B,MAAM,aAAa,GAAG,MAAM,YAAY,CAAC,IAAI,CAAC,CAAC;gBAC/C,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACzC,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACxC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IAChC,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;QAC3B,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;YAC1B,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;gBACpD,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC;gBACxD,MAAM,cAAc,CAAC,IAAI,EAAE,EAAE,yBAAyB,EAAE,aAAa,EAAE,CAAC,CAAC;gBACzE,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;gBACxC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,yBAAyB,CAAC,CAAC;gBACtD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;gBAC5B,MAAM,aAAa,GAAG,MAAM,YAAY,CAAC,IAAI,CAAC,CAAC;gBAC/C,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACzC,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACxC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IAChC,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { evaluateA11y, getListOfStyleCompilationIssues, setTestStrings, setup } from '@/utils/helpers';\n\ndescribe('q2-loc', () => {\n    describe('Initialization', () => {\n        it('properly compiles CSS vars and functions', async () => {\n            const page = await setup({ html: '<q2-loc></q2-loc>' });\n            expect(await getListOfStyleCompilationIssues(page, 'q2-loc')).toHaveLength(0);\n        });\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                const page = await setup({ html: `<q2-loc></q2-loc>` });\n                await setTestStrings(page, { 'tecton.element.loc.test': 'Test String' });\n                const q2Loc = await page.find('q2-loc');\n                q2Loc.setProperty('value', 'tecton.element.loc.test');\n                await page.waitForChanges();\n                const hasViolations = await evaluateA11y(page);\n                expect(hasViolations).toBe(false);\n            });\n        });\n        describe('Accessibility Tree', () => {});\n        describe('Keyboard Controls', () => {});\n        describe('Other', () => {});\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                const page = await setup({ html: `<q2-loc></q2-loc>` });\n                await setTestStrings(page, { 'tecton.element.loc.test': 'Test String' });\n                const q2Loc = await page.find('q2-loc');\n                q2Loc.setProperty('value', 'tecton.element.loc.test');\n                await page.waitForChanges();\n                const hasViolations = await evaluateA11y(page);\n                expect(hasViolations).toBe(false);\n            });\n        });\n        describe('Accessibility Tree', () => {});\n        describe('Keyboard Controls', () => {});\n        describe('Other', () => {});\n    });\n});\n"]}