npm - q2-tecton-elements - Versions diffs - 1.66.2 → 1.67.0 - Mend

q2-tecton-elements 1.66.2 → 1.67.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (681) hide show

package/dist/collection/components/q2-stepper-pane/q2-stepper-pane.js CHANGED Viewed

@@ -41,6 +41,9 @@ export class Q2StepperPane {
     }
     // #endregion
     // #region Watchers
+    labelOrDescriptionChanged() {
+        this.contentChange.emit();
+    }
     isActiveChanged(isActive) {
         mirrorEmit(this, ['activeChange', 'tctActiveChange'], {
             status: this.status || '',
@@ -49,9 +52,6 @@ export class Q2StepperPane {
             host: this.hostElement,
         });
     }
-    labelOrDescriptionChanged() {
-        this.contentChange.emit();
-    }
     checkForActiveChildren() {
         if (!this.showWithChildren)
             return;
@@ -73,7 +73,7 @@ export class Q2StepperPane {
     // #region Render Methods
     render() {
         const { label, isActive } = this;
-        return (h(Host, { key: '92b69f37a2f62352700edac4aead4015bc4e32e9', role: "listitem" }, h(Fragment, { key: '56885c0b815a4f4526c9d0a93a82412dfeb26889' }, h("div", { key: '686936fb5947933f7a20e948609506b4af882a7a', "aria-label": label && loc(label), tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", { key: 'a7b8fe995e01b385454e475b9cf7fd263fafcfb3' })), h("div", { key: '43d7a942a02bfe8b8e3a0b64b297ffcc34b4429e', hidden: true }, h("slot", { key: '6a0e1ea729ac690f6e8f6f2d9dd7d9c64884be23', name: "label", onSlotchange: () => this.contentChange.emit() }), h("slot", { key: '9c450fee9479ed1085eee4a07cf409e517fa41b5', name: "description", onSlotchange: () => this.contentChange.emit() })), h("slot", { key: '91e8fcbbcbfacf633fc66cb814d27735fddac14a', name: "children" }))));
+        return (h(Host, { key: '69b27313eda3276e7041c2813b2a56a53efc104b', role: "listitem" }, h(Fragment, { key: 'c7c5d0fd3ad3dc8650832d6e2f32ff59ee28b1a6' }, h("div", { key: 'a07608df6dc48453a00b72e501d23f28b72ab5cb', "aria-label": label && loc(label), tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, h("slot", { key: '68cef0c9131cf432fa9d48500f62fc88ebba198b' })), h("div", { key: '0b9f7a3e34565490acd91747b047f9802bf9ac49', hidden: true }, h("slot", { key: 'ca7f10c02501ba44b75640d6f6a67d1f4d5dcf92', name: "label", onSlotchange: () => this.contentChange.emit() }), h("slot", { key: 'f1cd0547c27b3f869fc245d6eba144cf85c3e17f', name: "description", onSlotchange: () => this.contentChange.emit() })), h("slot", { key: 'bf21a7e7f578f58649edfa9ebf34849385b712a4', name: "children" }))));
     }
     static get is() { return "q2-stepper-pane"; }
     static get encapsulation() { return "shadow"; }
@@ -111,6 +111,25 @@ export class Q2StepperPane {
                 "setter": false,
                 "reflect": true
             },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the pane's step button in the stepper, preventing user interaction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
             "isActive": {
                 "type": "boolean",
                 "attribute": "is-active",
@@ -218,13 +237,13 @@ export class Q2StepperPane {
                     "text": "Emitted when the active state of the pane changes."
                 },
                 "complexType": {
-                    "original": "IStepperPaneEvent",
-                    "resolved": "IStepperPaneEvent",
+                    "original": "StepperPaneEvent",
+                    "resolved": "StepperPaneEvent",
                     "references": {
-                        "IStepperPaneEvent": {
-                            "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-stepper-pane/q2-stepper-pane.tsx",
-                            "id": "src/components/q2-stepper-pane/q2-stepper-pane.tsx::IStepperPaneEvent"
+                        "StepperPaneEvent": {
+                            "location": "import",
+                            "path": "q2-tecton-common/lib/types/elements",
+                            "id": "../q2-tecton-common/lib/types/elements.d.ts::StepperPaneEvent"
                         }
                     }
                 }
@@ -260,13 +279,13 @@ export class Q2StepperPane {
                     "text": "Emitted when the status of the pane changes."
                 },
                 "complexType": {
-                    "original": "IStepperPaneEvent",
-                    "resolved": "IStepperPaneEvent",
+                    "original": "StepperPaneEvent",
+                    "resolved": "StepperPaneEvent",
                     "references": {
-                        "IStepperPaneEvent": {
-                            "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-stepper-pane/q2-stepper-pane.tsx",
-                            "id": "src/components/q2-stepper-pane/q2-stepper-pane.tsx::IStepperPaneEvent"
+                        "StepperPaneEvent": {
+                            "location": "import",
+                            "path": "q2-tecton-common/lib/types/elements",
+                            "id": "../q2-tecton-common/lib/types/elements.d.ts::StepperPaneEvent"
                         }
                     }
                 }
@@ -281,13 +300,13 @@ export class Q2StepperPane {
                     "text": "Emitted when the active state of the pane changes."
                 },
                 "complexType": {
-                    "original": "IStepperPaneEvent",
-                    "resolved": "IStepperPaneEvent",
+                    "original": "StepperPaneEvent",
+                    "resolved": "StepperPaneEvent",
                     "references": {
-                        "IStepperPaneEvent": {
-                            "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-stepper-pane/q2-stepper-pane.tsx",
-                            "id": "src/components/q2-stepper-pane/q2-stepper-pane.tsx::IStepperPaneEvent"
+                        "StepperPaneEvent": {
+                            "location": "import",
+                            "path": "q2-tecton-common/lib/types/elements",
+                            "id": "../q2-tecton-common/lib/types/elements.d.ts::StepperPaneEvent"
                         }
                     }
                 }
@@ -302,13 +321,13 @@ export class Q2StepperPane {
                     "text": "Emitted when the status of the pane changes."
                 },
                 "complexType": {
-                    "original": "IStepperPaneEvent",
-                    "resolved": "IStepperPaneEvent",
+                    "original": "StepperPaneEvent",
+                    "resolved": "StepperPaneEvent",
                     "references": {
-                        "IStepperPaneEvent": {
-                            "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-stepper-pane/q2-stepper-pane.tsx",
-                            "id": "src/components/q2-stepper-pane/q2-stepper-pane.tsx::IStepperPaneEvent"
+                        "StepperPaneEvent": {
+                            "location": "import",
+                            "path": "q2-tecton-common/lib/types/elements",
+                            "id": "../q2-tecton-common/lib/types/elements.d.ts::StepperPaneEvent"
                         }
                     }
                 }
@@ -317,14 +336,17 @@ export class Q2StepperPane {
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
-                "propName": "isActive",
-                "methodName": "isActiveChanged"
+                "propName": "disabled",
+                "methodName": "labelOrDescriptionChanged"
             }, {
                 "propName": "label",
                 "methodName": "labelOrDescriptionChanged"
             }, {
                 "propName": "description",
                 "methodName": "labelOrDescriptionChanged"
+            }, {
+                "propName": "isActive",
+                "methodName": "isActiveChanged"
             }, {
                 "propName": "showWithChildren",
                 "methodName": "checkForActiveChildren"

package/dist/collection/components/q2-stepper-pane/q2-stepper-pane.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-stepper-pane.js","sourceRoot":"","sources":["../../../../src/components/q2-stepper-pane/q2-stepper-pane.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EACH,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EAEP,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,KAAK,EAEL,MAAM,EACN,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,UAAU,MAAM,qBAAqB,CAAC;~~AAS7C~~;;;;;;;;GAQG;AAEH,MAAM,OAAO,aAAa;IAD1B;QAYI,aAAa;QACb,2BAA2B;QAG3B,kBAAa,GAAY,KAAK,CAAC;~~KA6KlC~~;~~IAnGG~~,aAAa;IACb,qCAAqC;IAErC,iBAAiB;QACb,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAAE,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,QAAQ,UAAU,EAAE,EAAE,CAAC;IAC3E,CAAC;IAED,oBAAoB;;QAChB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IACjC,CAAC;IAED,iBAAiB;QACb,gBAAgB,CAAC,IAAI,CAAC,WAAW,EAAE,iCAAiC,CAAC,CAAC;QACtE,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAClC,CAAC;IAED,gBAAgB;QACZ,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACvC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAC9B,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5F,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;IACrC,CAAC;IAED,aAAa;IACb,mBAAmB;~~IAGnB~~,eAAe,CAAC,QAAQ;QACpB,UAAU,CAAC,IAAI,EAAE,CAAC,cAAc,EAAE,iBAAiB,CAAC,EAAE;YAClD,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,EAAE;YACzB,QAAQ;YACR,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,EAAE;YACvB,IAAI,EAAE,IAAI,CAAC,WAAW;SACzB,CAAC,CAAC;IACP,CAAC;IAID,~~yBAAyB;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC9B,CAAC;IAID,~~sBAAsB;QAClB,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAAE,OAAO;QACnC,SAAS,CAAC,GAAG,EAAE;YACX,UAAU,CAAC,GAAG,EAAE;gBACZ,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CACjD,gDAAgD,CACnD,CAAC;YACN,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;IACP,CAAC;IAGD,aAAa,CAAC,MAAM;QAChB,UAAU,CAAC,IAAI,EAAE,CAAC,cAAc,EAAE,iBAAiB,CAAC,EAAE;YAClD,MAAM;YACN,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ;YACzB,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,EAAE;YACvB,IAAI,EAAE,IAAI,CAAC,WAAW;SACzB,CAAC,CAAC;IACP,CAAC;IAED,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QACjC,OAAO,CACH,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACjB,EAAC,QAAQ;gBACL,0EACgB,KAAK,IAAI,GAAG,CAAC,KAAK,CAAC,EAC/B,QAAQ,EAAC,GAAG,EACZ,MAAM,EAAE,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,gBAAgB,CAAC;oBAEnE,8DAAQ,CACN;gBACN,4DAAK,MAAM;oBACP,6DACI,IAAI,EAAC,OAAO,EACZ,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,GACzC;oBACR,6DACI,IAAI,EAAC,aAAa,EAClB,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,GACzC,CACN;gBACN,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACtB,CACR,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { hasValidAncestor } from '@/utils/component';\nimport {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n Fragment,\n Event,\n Host,\n Watch,\n EventEmitter,\n Listen,\n State,\n} from '@stencil/core';\nimport { createGuid, loc, nextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\~~n\nexport~~ ~~interface~~ ~~IStepperPaneEvent~~ {~~\n status:~~ ~~string;\n isActive:~~ ~~boolean;\n id:~~ ~~string;\n host:~~ ~~HTMLElement~~;\n}\n\n/*\n @name Stepper Pane\n * @category Display\n * @summary Use as a single step within a Stepper or Vertical Stepper.\n * @slot label - An optional slot to replace the label attribute with custom content as the stepper pane's label.\n * @slot description - An optional slot to replace the description attribute with custom content as the stepper pane's description.\n * If you would like to ellipsize any part of the description, Tecton exposes an `ellipsize` class for you to use.\n * @slot children - A slot specifically for [Vertical Stepper](https://tecton.q2developer.com/design-system/q2-stepper-vertical) to display child `q2-stepper-pane` elements within a stepper pane.\n /\n@Component({ tag: 'q2-stepper-pane', shadow: true, styleUrl: 'q2-stepper-pane.scss' })\nexport class Q2StepperPane implements ComponentInterface {\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 isChildActive: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /\n The description for the pane.\n * @localizable\n /\n @Prop({ reflect: true })\n description: string;\n\n /\n Used by q2-stepper and q2-stepper-vertical to determine which pane is active\n * @private\n /\n @Prop({ reflect: true })\n isActive: boolean;\n\n /\n The label for the pane.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n Indicates to display the content of the pane when one of its children is selected.\n * @info\n * Currently only supported in the `<q2-stepper-vertical>` component.\n /\n @Prop({ reflect: true })\n showWithChildren: boolean;\n\n /* The status of the pane. /\n @Prop({ reflect: true })\n status: 'complete' \| 'error' \| 'locked';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the active state of the pane changes.\n * @deprecated Use 'tctActiveChange' instead\n /\n @Event()\n activeChange: EventEmitter<~~IStepperPaneEvent~~>;\n\n /\n Emitted when the content of the pane changes.\n * @private\n /\n @Event({ bubbles: true })\n contentChange: EventEmitter<undefined>;\n\n /\n Emitted when the status of the pane changes.\n * @deprecated Use 'tctStatusChange' instead\n /\n @Event()\n statusChange: EventEmitter<~~IStepperPaneEvent~~>;\n\n /\n Emitted when the active state of the pane changes.\n /\n @Event()\n tctActiveChange: EventEmitter<~~IStepperPaneEvent~~>;\n\n /\n Emitted when the status of the pane changes.\n */\n @Event()\n tctStatusChange: EventEmitter<~~IStepperPaneEvent~~>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n connectedCallback() {\n if (!this.hostElement.id) this.hostElement.id = `step-${createGuid()}`;\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentWillLoad() {\n hasValidAncestor(this.hostElement, 'q2-stepper, q2-stepper-vertical');\n this.checkForActiveChildren();\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(() => {\n this.contentChange.emit();\n });\n observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n this.mutationObserver = observer;\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('isActive')\n isActiveChanged(isActive) {\n mirrorEmit(this, ['activeChange', 'tctActiveChange'], {\n status: this.status \|\| '',\n isActive,\n id: this.hostElement.id,\n host: this.hostElement,\n });\n }\n\n @Watch('~~label')\n @Watch('description')\n labelOrDescriptionChanged() {\n this.contentChange.emit();\n }\n\n @Watch('~~showWithChildren')\n @Listen('activeChange')\n checkForActiveChildren() {\n if (!this.showWithChildren) return;\n nextPaint(() => {\n setTimeout(() => {\n this.isChildActive = !!this.hostElement.querySelector<HTMLQ2StepperPaneElement>(\n \"[slot='children'] > q2-stepper-pane[is-active]\"\n );\n });\n });\n }\n\n @Watch('status')\n statusChanged(status) {\n mirrorEmit(this, ['statusChange', 'tctStatusChange'], {\n status,\n isActive: !!this.isActive,\n id: this.hostElement.id,\n host: this.hostElement,\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { label, isActive } = this;\n return (\n <Host role=\"listitem\">\n <Fragment>\n <div\n aria-label={label && loc(label)}\n tabindex=\"0\"\n hidden={!isActive && !(this.isChildActive && this.showWithChildren)}\n >\n <slot />\n </div>\n <div hidden>\n <slot\n name=\"label\"\n onSlotchange={() => this.contentChange.emit()}\n ></slot>\n <slot\n name=\"description\"\n onSlotchange={() => this.contentChange.emit()}\n ></slot>\n </div>\n <slot name=\"children\"></slot>\n </Fragment>\n </Host>\n );\n }\n\n // #endregion\n}\n"]}
1	+ {"version":3,"file":"q2-stepper-pane.js","sourceRoot":"","sources":["../../../../src/components/q2-stepper-pane/q2-stepper-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["import { hasValidAncestor } from '@/utils/component';\nimport {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n Fragment,\n Event,\n Host,\n Watch,\n EventEmitter,\n Listen,\n State,\n} from '@stencil/core';\nimport { createGuid, loc, nextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport type { StepperPaneEvent } from 'q2-tecton-common/lib/types/elements';\n\n/*\n @name Stepper Pane\n * @category Display\n * @summary Use as a single step within a Stepper or Vertical Stepper.\n * @slot label - An optional slot to replace the label attribute with custom content as the stepper pane's label.\n * @slot description - An optional slot to replace the description attribute with custom content as the stepper pane's description.\n * If you would like to ellipsize any part of the description, Tecton exposes an `ellipsize` class for you to use.\n * @slot children - A slot specifically for [Vertical Stepper](https://tecton.q2developer.com/design-system/q2-stepper-vertical) to display child `q2-stepper-pane` elements within a stepper pane.\n /\n@Component({ tag: 'q2-stepper-pane', shadow: true, styleUrl: 'q2-stepper-pane.scss' })\nexport class Q2StepperPane implements ComponentInterface {\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 isChildActive: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /\n The description for the pane.\n * @localizable\n /\n @Prop({ reflect: true })\n description: string;\n\n /* Disables the pane's step button in the stepper, preventing user interaction. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Used by q2-stepper and q2-stepper-vertical to determine which pane is active\n * @private\n /\n @Prop({ reflect: true })\n isActive: boolean;\n\n /\n The label for the pane.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n Indicates to display the content of the pane when one of its children is selected.\n * @info\n * Currently only supported in the `<q2-stepper-vertical>` component.\n /\n @Prop({ reflect: true })\n showWithChildren: boolean;\n\n /* The status of the pane. /\n @Prop({ reflect: true })\n status: 'complete' \| 'error' \| 'locked';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the active state of the pane changes.\n * @deprecated Use 'tctActiveChange' instead\n /\n @Event()\n activeChange: EventEmitter<StepperPaneEvent>;\n\n /\n Emitted when the content of the pane changes.\n * @private\n /\n @Event({ bubbles: true })\n contentChange: EventEmitter<undefined>;\n\n /\n Emitted when the status of the pane changes.\n * @deprecated Use 'tctStatusChange' instead\n /\n @Event()\n statusChange: EventEmitter<StepperPaneEvent>;\n\n /\n Emitted when the active state of the pane changes.\n /\n @Event()\n tctActiveChange: EventEmitter<StepperPaneEvent>;\n\n /\n Emitted when the status of the pane changes.\n */\n @Event()\n tctStatusChange: EventEmitter<StepperPaneEvent>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n connectedCallback() {\n if (!this.hostElement.id) this.hostElement.id = `step-${createGuid()}`;\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentWillLoad() {\n hasValidAncestor(this.hostElement, 'q2-stepper, q2-stepper-vertical');\n this.checkForActiveChildren();\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(() => {\n this.contentChange.emit();\n });\n observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n this.mutationObserver = observer;\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n @Watch('label')\n @Watch('description')\n labelOrDescriptionChanged() {\n this.contentChange.emit();\n }\n\n @Watch('isActive')\n isActiveChanged(isActive) {\n mirrorEmit(this, ['activeChange', 'tctActiveChange'], {\n status: this.status \|\| '',\n isActive,\n id: this.hostElement.id,\n host: this.hostElement,\n });\n }\n\n @Watch('showWithChildren')\n @Listen('activeChange')\n checkForActiveChildren() {\n if (!this.showWithChildren) return;\n nextPaint(() => {\n setTimeout(() => {\n this.isChildActive = !!this.hostElement.querySelector<HTMLQ2StepperPaneElement>(\n \"[slot='children'] > q2-stepper-pane[is-active]\"\n );\n });\n });\n }\n\n @Watch('status')\n statusChanged(status) {\n mirrorEmit(this, ['statusChange', 'tctStatusChange'], {\n status,\n isActive: !!this.isActive,\n id: this.hostElement.id,\n host: this.hostElement,\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { label, isActive } = this;\n return (\n <Host role=\"listitem\">\n <Fragment>\n <div\n aria-label={label && loc(label)}\n tabindex=\"0\"\n hidden={!isActive && !(this.isChildActive && this.showWithChildren)}\n >\n <slot />\n </div>\n <div hidden>\n <slot\n name=\"label\"\n onSlotchange={() => this.contentChange.emit()}\n ></slot>\n <slot\n name=\"description\"\n onSlotchange={() => this.contentChange.emit()}\n ></slot>\n </div>\n <slot name=\"children\"></slot>\n </Fragment>\n </Host>\n );\n }\n\n // #endregion\n}\n"]}

package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.css CHANGED Viewed

@@ -146,17 +146,26 @@ ul ul[aria-hidden=true] {
   padding: 0;
   transition-property: box-shadow;
   outline: none;
+  border-radius: var(--tct-stepper-vertical-step-focus-visible-border-radius, 0);
 }
-.step-btn[aria-disabled],
-.step-child-btn[aria-disabled] {
+.step-btn[aria-disabled]:not(.pane-disabled),
+.step-child-btn[aria-disabled]:not(.pane-disabled) {
   cursor: default;
   --comp-label-font-weight: 300;
   --comp-btn-label-color: var(--tct-stepper-vertical-btn-locked-color, var(--tct-advanced-stepper-btn-locked-color, var(--t-advanced-stepper-btn-locked-color, var(--t-textA, rgba(77, 77, 77, 0.77)))));
 }
+.step-btn.pane-disabled,
+.step-child-btn.pane-disabled {
+  cursor: not-allowed;
+}
 .step-btn[aria-selected=true],
 .step-child-btn[aria-selected=true] {
   --comp-label-font-weight: 600;
 }
+.step-btn:focus-visible,
+.step-child-btn:focus-visible {
+  box-shadow: var(--tct-stepper-vertical-step-focus-visible-box-shadow, --const-double-focus-ring);
+}
 .step-btn {
   min-height: var(--tct-stepper-vertical-btn-height, var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px)));

package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.js CHANGED Viewed

@@ -120,6 +120,9 @@ export class Q2StepperVertical {
             this.currentStepId = event.detail.selectedStepId;
         }
     }
+    contentChangeHandler() {
+        this.buildPaneList();
+    }
     delegateFocus(event) {
         if (!isEventFromElement(event, this.hostElement))
             return;
@@ -153,7 +156,7 @@ export class Q2StepperVertical {
         return Array.from(this.hostElement.querySelectorAll(':scope > q2-stepper-pane'));
     }
     extractDetails(pane) {
-        const { label, description, status } = pane;
+        const { label, description, status, disabled } = pane;
         if (!pane.id)
             pane.id = `step-${createGuid()}`;
         return {
@@ -161,6 +164,7 @@ export class Q2StepperVertical {
             label,
             description,
             status,
+            disabled,
         };
     }
     focusStepBtn(stepId, forceFocus) {
@@ -243,7 +247,7 @@ export class Q2StepperVertical {
     // #region Render Methods
     renderChildStepBtn(pane, index, children, parentLabel) {
         const { currentStepId } = this;
-        const { id, label, status } = pane;
+        const { id, label, status, disabled: isPaneDisabled } = pane;
         const stepNumber = index + 1;
         const labelId = label && `label-${id}`;
         const isCurrentStep = id === currentStepId;
@@ -255,7 +259,9 @@ export class Q2StepperVertical {
         const stepClasses = ['step-child-btn'];
         if (status)
             stepClasses.push(`status-${status}`);
-        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isLocked && this.onStepClick(ev, id) }, statusIcon && (h("div", { class: "step-child-icon" }, h("q2-icon", { type: statusIcon }))), label && (h("div", { class: "step-child-label", id: labelId }, loc(label))))));
+        if (isPaneDisabled)
+            stepClasses.push('pane-disabled');
+        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, statusIcon && (h("div", { class: "step-child-icon" }, h("q2-icon", { type: statusIcon }))), label && (h("div", { class: "step-child-label", id: labelId }, loc(label))))));
     }
     renderSpacer(pane, stepLabel, isExpanded, isLastStep) {
         const shouldRender = (isLastStep && !!pane.children.length) || !isLastStep;
@@ -267,7 +273,7 @@ export class Q2StepperVertical {
     renderStepBtn(pane, index) {
         const { currentStepId, structuredPanes } = this;
         const isLastStep = index === structuredPanes.length - 1;
-        const { id, label, description, status } = pane;
+        const { id, label, description, status, disabled: isPaneDisabled } = pane;
         const stepNumber = index + 1;
         const isCurrentStep = id === currentStepId;
         const labelId = label && `label-${id}`;
@@ -283,12 +289,14 @@ export class Q2StepperVertical {
         const stepClasses = ['step-btn'];
         if (status)
             stepClasses.push(`status-${status}`);
+        if (isPaneDisabled)
+            stepClasses.push('pane-disabled');
         const childIds = pane.children.map(child => child.id);
         const isExpanded = isCurrentStep || childIds.includes(currentStepId);
-        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-expanded": !!pane.children.length ? `${isExpanded}` : null, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isLocked && this.onStepClick(ev, id) }, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", null, h("div", { class: "step-label", id: labelId }, stepLabel), description && (h("div", { class: "step-description", id: descriptionId }, loc(description)))))), this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)));
+        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-expanded": !!pane.children.length ? `${isExpanded}` : null, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", null, h("div", { class: "step-label", id: labelId }, stepLabel), description && (h("div", { class: "step-description", id: descriptionId }, loc(description)))))), this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)));
     }
     render() {
-        return (h(Fragment, { key: '19c5979fa3800fb5e1b01ee1d86dfda2ab8c8060' }, h("ul", { key: 'b19d8f4286218e44b85c4367e1c9e899111cee51', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: '1bc3834460a09e8880816b700dbe6f1ced9753d4', role: "list" }, h("slot", { key: '54596ca9c803ae76e1a3800e2e3a8bd0f40c7cf9' }))));
+        return (h(Fragment, { key: '568db2e33e972b3bedd39662343540d98a1f3788' }, h("ul", { key: 'cc21e51d8d8a4eecaf9717cedcd79244d26ab346', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: 'f89dff25b18fd14526f1248ae196d218e0cd53d7', role: "list" }, h("slot", { key: 'cbb7259494fc49820eef8acedbf2f5b0e5817aac' }))));
     }
     static get is() { return "q2-stepper-vertical"; }
     static get encapsulation() { return "shadow"; }
@@ -428,6 +436,12 @@ export class Q2StepperVertical {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "contentChange",
+                "method": "contentChangeHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "focus",
                 "method": "delegateFocus",

package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-stepper-vertical.js","sourceRoot":"","sources":["../../../../src/components/q2-stepper-vertical/q2-stepper-vertical.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n State,\n Watch,\n Listen,\n Event,\n EventEmitter,\n Fragment,\n Method,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement, createGuid } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\ninterface IBaseStructuredPane {\n id: string;\n label: string;\n description: string;\n isActive: boolean;\n status: string;\n}\n\ninterface IStructuredPane extends IBaseStructuredPane {\n children: IBaseStructuredPane[];\n}\n\n/*\n @name Vertical Stepper\n * @category Display\n * @summary Use for guiding users through a multi-step workflow with vertical progress.\n /\n@Component({ tag: 'q2-stepper-vertical', shadow: true, styleUrl: 'q2-stepper-vertical.scss' })\nexport class Q2StepperVertical implements ComponentInterface {\n // #region Own Properties\n\n expandedStepChildrenList: HTMLUListElement;\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 structuredPanes: IStructuredPane[] = [];\n\n // #endregion\n // #region Public Property API\n\n /* The `id` of the currently selected `q2-stepper-pane`. /\n @Prop({ reflect: true, mutable: true })\n currentStepId: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{\n selectedStep: HTMLQ2StepperPaneElement;\n selectedStepId: string;\n currentStepId: string;\n }>;\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter<{\n selectedStep: HTMLQ2StepperPaneElement;\n selectedStepId: string;\n currentStepId: string;\n }>;\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.setDefaultPane();\n this.buildPaneList();\n const observer = new MutationObserver(this.determinePaneChanges);\n const observerOptions = {\n childList: true,\n };\n observer.observe(this.hostElement, observerOptions);\n this.allRootPanes.forEach(pane => {\n const childrenSlot = pane.querySelector('[slot=children]');\n if (childrenSlot) observer.observe(childrenSlot, observerOptions);\n });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n setTimeout(() => this.showStep(this.currentStepId), 0);\n }\n\n componentWillUpdate() {\n this.expandedStepChildrenList = null;\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n\n this.openCurrentStepChildren();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n const { hostElement } = this;\n if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n this.currentStepId = event.detail.selectedStepId;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusStepBtn(this.currentStepId, true);\n }\n\n @Listen('statusChange')\n statusChangeHandler() {\n this.buildPaneList();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n A method to select a step corresponding with the step id.\n \n @testOnly\n */\n @Method()\n async selectStep(stepId: string) {\n const stepperPane = this.hostElement.shadowRoot.querySelector(`button.step-btn#${stepId}`);\n (stepperPane as HTMLButtonElement)?.click();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('currentStepId')\n currentStepChanged(stepId: string) {\n this.showStep(stepId);\n }\n\n // #endregion\n // #region Local Methods\n\n get allPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n }\n\n get allRootPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>(':scope > q2-stepper-pane'));\n }\n\n buildPaneList = () => {\n const { allRootPanes } = this;\n if (!allRootPanes.length) return;\n\n this.structuredPanes = Array.from(allRootPanes).reduce((accum, pane) => {\n const children = Array.from(pane.querySelector('[slot=children]')?.children ?? [])\n .filter(({ tagName }) => tagName === 'Q2-STEPPER-PANE')\n .map(this.extractDetails);\n\n accum.push({ ...this.extractDetails(pane), children });\n return accum;\n }, []);\n };\n\n determinePaneChanges = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.type !== 'childList') return;\n if (!mutation.addedNodes.length && !mutation.removedNodes.length) return;\n if (\n mutation.addedNodes[0]?.nodeType !== Node.ELEMENT_NODE &&\n mutation.removedNodes[0]?.nodeType !== Node.ELEMENT_NODE\n )\n return;\n this.buildPaneList();\n });\n };\n\n extractDetails(pane: HTMLQ2StepperPaneElement) {\n const { label, description, status } = pane;\n if (!pane.id) pane.id = `step-${createGuid()}`;\n return {\n id: pane.id,\n label,\n description,\n status,\n };\n }\n\n focusStepBtn(stepId: string, forceFocus?: boolean) {\n const stepBtn = this.hostElement.shadowRoot.querySelector<HTMLElement>(`button[id=\"${stepId}\"]`);\n const isComponentActive = document.activeElement === this.hostElement;\n if (!stepBtn) return;\n if (isComponentActive \|\| forceFocus) {\n stepBtn.focus();\n }\n }\n\n getStepId(currentStepId: string, goTo: string) {\n const allEnabledStepBtns = Array.from(\n this.hostElement.shadowRoot.querySelectorAll<HTMLQ2StepperPaneElement>(\n 'ul:not([aria-hidden=\"true\"]) > li > button:not([aria-disabled=\"true\"])'\n )\n );\n const currentStepIndex = allEnabledStepBtns.findIndex(btn => btn.getAttribute('id') === currentStepId);\n\n let nextStepIndex;\n switch (goTo) {\n case 'prev':\n nextStepIndex = Math.max(currentStepIndex - 1, 0);\n break;\n\n case 'next':\n nextStepIndex = Math.min(currentStepIndex + 1, allEnabledStepBtns.length - 1);\n break;\n\n case 'first':\n nextStepIndex = 0;\n break;\n\n case 'last':\n nextStepIndex = allEnabledStepBtns.length - 1;\n break;\n }\n\n return allEnabledStepBtns[nextStepIndex].getAttribute('id');\n }\n\n onStepClick = (event, stepId: string) => {\n event.stopPropagation();\n const { currentStepId } = this;\n if (stepId === currentStepId) return;\n const selectedStep = this.allPanes.find(pane => pane.id === stepId);\n\n mirrorEmit(this, ['change', 'tctChange'], {\n selectedStep,\n selectedStepId: stepId,\n currentStepId,\n });\n };\n\n onStepKeyDown = (event: KeyboardEvent, stepId: string) => {\n const { key } = event;\n\n let selectedStepId;\n switch (key) {\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'prev');\n break;\n\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'next');\n break;\n\n case 'Home':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'first');\n break;\n\n case 'End':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'last');\n break;\n }\n\n if (!selectedStepId) return;\n this.focusStepBtn(selectedStepId, true);\n };\n\n openCurrentStepChildren() {\n const { expandedStepChildrenList } = this;\n const allSpacers = this.hostElement.shadowRoot.querySelectorAll<HTMLDivElement>('.spacer');\n allSpacers.forEach(spacer => {\n if (expandedStepChildrenList && spacer.contains(expandedStepChildrenList)) {\n spacer.style.height = `${expandedStepChildrenList.clientHeight}px`;\n if (spacer.classList.contains('is-open')) return;\n spacer.classList.add('is-opening');\n spacer.addEventListener(\n 'transitionend',\n () => {\n spacer.classList.remove('is-opening');\n spacer.classList.add('is-open');\n this.resizeIframe();\n },\n { once: true }\n );\n } else {\n spacer.removeAttribute('style');\n spacer.classList.remove('is-open', 'is-opening');\n }\n });\n }\n\n resizeIframe() {\n return window?.TectonElements?.resizeIframe?.();\n }\n\n setDefaultPane() {\n if (this.currentStepId) return;\n const firstEnabledStep = this.hostElement.querySelector('q2-stepper-pane');\n if (!firstEnabledStep) return;\n if (!firstEnabledStep.id) firstEnabledStep.id = `step-${createGuid()}`;\n this.currentStepId = firstEnabledStep.id;\n }\n\n showStep(stepId: string) {\n this.scheduledAfterRender.push(this.resizeIframe);\n this.showStepPane(stepId);\n this.focusStepBtn(stepId);\n }\n\n showStepPane(stepId: string) {\n this.allPanes.forEach(pane => {\n if (pane.isActive \|\| pane.id === stepId) {\n pane.isActive = stepId === pane.id;\n }\n });\n }\n\n // #endregion\n // #region Render Methods\n\n renderChildStepBtn(pane: IBaseStructuredPane, index: number, children: number, parentLabel: string) {\n const { currentStepId } = this;\n const { id, label, status } = pane;\n const stepNumber = index + 1;\n const labelId = label && `label-${id}`;\n const isCurrentStep = id === currentStepId;\n const isLocked = status === 'locked';\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.childNumber', [`${stepNumber}`, `${children}`, parentLabel]);\n\n let statusIcon;\n if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-child-btn'];\n if (status) stepClasses.push(`status-${status}`);\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n id={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon && (\n <div class=\"step-child-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n )}\n {label && (\n <div\n class=\"step-child-label\"\n id={labelId}\n >\n {loc(label)}\n </div>\n )}\n </button>\n </li>\n );\n }\n\n renderSpacer(pane: IStructuredPane, stepLabel: string, isExpanded: boolean, isLastStep: boolean) {\n const shouldRender = (isLastStep && !!pane.children.length) \|\| !isLastStep;\n const spacerClasses = ['spacer'];\n if (!isLastStep) spacerClasses.push('has-sibling');\n return (\n shouldRender && (\n <div class={spacerClasses.join(' ')}>\n {!!pane.children.length && (\n <ul\n ref={el => isExpanded && (this.expandedStepChildrenList = el)}\n aria-hidden={`${!isExpanded}`}\n >\n {pane.children.map((child, index, children) =>\n this.renderChildStepBtn(child, index, children.length, stepLabel)\n )}\n </ul>\n )}\n </div>\n )\n );\n }\n\n renderStepBtn(pane: IStructuredPane, index: number) {\n const { currentStepId, structuredPanes } = this;\n const isLastStep = index === structuredPanes.length - 1;\n const { id, label, description, status } = pane;\n const stepNumber = index + 1;\n const isCurrentStep = id === currentStepId;\n const labelId = label && `label-${id}`;\n const isLocked = status === 'locked';\n const stepLabel = label && loc(label);\n const descriptionId = label && description && `description-${id}`;\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.number', [`${stepNumber}`, `${structuredPanes.length}`]);\n\n let statusIcon;\n if (status === 'complete') statusIcon = 'success-filled';\n else if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-btn'];\n if (status) stepClasses.push(`status-${status}`);\n\n const childIds = pane.children.map(child => child.id);\n const isExpanded = isCurrentStep \|\| childIds.includes(currentStepId);\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-describedBy={descriptionId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n aria-expanded={!!pane.children.length ? `${isExpanded}` : null}\n id={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon ? (\n <div class=\"step-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n ) : (\n <div class=\"step-bubble\">{stepNumber}</div>\n )}\n\n {label && (\n <div>\n <div\n class=\"step-label\"\n id={labelId}\n >\n {stepLabel}\n </div>\n {description && (\n <div\n class=\"step-description\"\n id={descriptionId}\n >\n {loc(description)}\n </div>\n )}\n </div>\n )}\n </button>\n {this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)}\n </li>\n );\n }\n\n render() {\n return (\n <Fragment>\n <ul role=\"tablist\">{this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))}</ul>\n <div role=\"list\">\n <slot />\n </div>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"]}
1	+ {"version":3,"file":"q2-stepper-vertical.js","sourceRoot":"","sources":["../../../../src/components/q2-stepper-vertical/q2-stepper-vertical.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n State,\n Watch,\n Listen,\n Event,\n EventEmitter,\n Fragment,\n Method,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement, createGuid } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\ninterface BaseStructuredPane {\n id: string;\n label: string;\n description: string;\n isActive: boolean;\n status: string;\n disabled: boolean;\n}\n\ninterface StructuredPane extends BaseStructuredPane {\n children: BaseStructuredPane[];\n}\n\n/*\n @name Vertical Stepper\n * @category Display\n * @summary Use for guiding users through a multi-step workflow with vertical progress.\n /\n@Component({ tag: 'q2-stepper-vertical', shadow: true, styleUrl: 'q2-stepper-vertical.scss' })\nexport class Q2StepperVertical implements ComponentInterface {\n // #region Own Properties\n\n expandedStepChildrenList: HTMLUListElement;\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 structuredPanes: StructuredPane[] = [];\n\n // #endregion\n // #region Public Property API\n\n /* The `id` of the currently selected `q2-stepper-pane`. /\n @Prop({ reflect: true, mutable: true })\n currentStepId: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{\n selectedStep: HTMLQ2StepperPaneElement;\n selectedStepId: string;\n currentStepId: string;\n }>;\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter<{\n selectedStep: HTMLQ2StepperPaneElement;\n selectedStepId: string;\n currentStepId: string;\n }>;\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.setDefaultPane();\n this.buildPaneList();\n const observer = new MutationObserver(this.determinePaneChanges);\n const observerOptions = {\n childList: true,\n };\n observer.observe(this.hostElement, observerOptions);\n this.allRootPanes.forEach(pane => {\n const childrenSlot = pane.querySelector('[slot=children]');\n if (childrenSlot) observer.observe(childrenSlot, observerOptions);\n });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n setTimeout(() => this.showStep(this.currentStepId), 0);\n }\n\n componentWillUpdate() {\n this.expandedStepChildrenList = null;\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n\n this.openCurrentStepChildren();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n const { hostElement } = this;\n if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n this.currentStepId = event.detail.selectedStepId;\n }\n }\n\n @Listen('contentChange')\n contentChangeHandler() {\n this.buildPaneList();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusStepBtn(this.currentStepId, true);\n }\n\n @Listen('statusChange')\n statusChangeHandler() {\n this.buildPaneList();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n A method to select a step corresponding with the step id.\n \n @testOnly\n */\n @Method()\n async selectStep(stepId: string) {\n const stepperPane = this.hostElement.shadowRoot.querySelector(`button.step-btn#${stepId}`);\n (stepperPane as HTMLButtonElement)?.click();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('currentStepId')\n currentStepChanged(stepId: string) {\n this.showStep(stepId);\n }\n\n // #endregion\n // #region Local Methods\n\n get allPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n }\n\n get allRootPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>(':scope > q2-stepper-pane'));\n }\n\n buildPaneList = () => {\n const { allRootPanes } = this;\n if (!allRootPanes.length) return;\n\n this.structuredPanes = Array.from(allRootPanes).reduce((accum, pane) => {\n const children = Array.from(pane.querySelector('[slot=children]')?.children ?? [])\n .filter(({ tagName }) => tagName === 'Q2-STEPPER-PANE')\n .map(this.extractDetails);\n\n accum.push({ ...this.extractDetails(pane), children });\n return accum;\n }, []);\n };\n\n determinePaneChanges = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.type !== 'childList') return;\n if (!mutation.addedNodes.length && !mutation.removedNodes.length) return;\n if (\n mutation.addedNodes[0]?.nodeType !== Node.ELEMENT_NODE &&\n mutation.removedNodes[0]?.nodeType !== Node.ELEMENT_NODE\n )\n return;\n this.buildPaneList();\n });\n };\n\n extractDetails(pane: HTMLQ2StepperPaneElement) {\n const { label, description, status, disabled } = pane;\n if (!pane.id) pane.id = `step-${createGuid()}`;\n return {\n id: pane.id,\n label,\n description,\n status,\n disabled,\n };\n }\n\n focusStepBtn(stepId: string, forceFocus?: boolean) {\n const stepBtn = this.hostElement.shadowRoot.querySelector<HTMLElement>(`button[id=\"${stepId}\"]`);\n const isComponentActive = document.activeElement === this.hostElement;\n if (!stepBtn) return;\n if (isComponentActive \|\| forceFocus) {\n stepBtn.focus();\n }\n }\n\n getStepId(currentStepId: string, goTo: string) {\n const allEnabledStepBtns = Array.from(\n this.hostElement.shadowRoot.querySelectorAll<HTMLQ2StepperPaneElement>(\n 'ul:not([aria-hidden=\"true\"]) > li > button:not([aria-disabled=\"true\"])'\n )\n );\n const currentStepIndex = allEnabledStepBtns.findIndex(btn => btn.getAttribute('id') === currentStepId);\n\n let nextStepIndex;\n switch (goTo) {\n case 'prev':\n nextStepIndex = Math.max(currentStepIndex - 1, 0);\n break;\n\n case 'next':\n nextStepIndex = Math.min(currentStepIndex + 1, allEnabledStepBtns.length - 1);\n break;\n\n case 'first':\n nextStepIndex = 0;\n break;\n\n case 'last':\n nextStepIndex = allEnabledStepBtns.length - 1;\n break;\n }\n\n return allEnabledStepBtns[nextStepIndex].getAttribute('id');\n }\n\n onStepClick = (event, stepId: string) => {\n event.stopPropagation();\n const { currentStepId } = this;\n if (stepId === currentStepId) return;\n const selectedStep = this.allPanes.find(pane => pane.id === stepId);\n\n mirrorEmit(this, ['change', 'tctChange'], {\n selectedStep,\n selectedStepId: stepId,\n currentStepId,\n });\n };\n\n onStepKeyDown = (event: KeyboardEvent, stepId: string) => {\n const { key } = event;\n\n let selectedStepId;\n switch (key) {\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'prev');\n break;\n\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'next');\n break;\n\n case 'Home':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'first');\n break;\n\n case 'End':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'last');\n break;\n }\n\n if (!selectedStepId) return;\n this.focusStepBtn(selectedStepId, true);\n };\n\n openCurrentStepChildren() {\n const { expandedStepChildrenList } = this;\n const allSpacers = this.hostElement.shadowRoot.querySelectorAll<HTMLDivElement>('.spacer');\n allSpacers.forEach(spacer => {\n if (expandedStepChildrenList && spacer.contains(expandedStepChildrenList)) {\n spacer.style.height = `${expandedStepChildrenList.clientHeight}px`;\n if (spacer.classList.contains('is-open')) return;\n spacer.classList.add('is-opening');\n spacer.addEventListener(\n 'transitionend',\n () => {\n spacer.classList.remove('is-opening');\n spacer.classList.add('is-open');\n this.resizeIframe();\n },\n { once: true }\n );\n } else {\n spacer.removeAttribute('style');\n spacer.classList.remove('is-open', 'is-opening');\n }\n });\n }\n\n resizeIframe() {\n return window?.TectonElements?.resizeIframe?.();\n }\n\n setDefaultPane() {\n if (this.currentStepId) return;\n const firstEnabledStep = this.hostElement.querySelector('q2-stepper-pane');\n if (!firstEnabledStep) return;\n if (!firstEnabledStep.id) firstEnabledStep.id = `step-${createGuid()}`;\n this.currentStepId = firstEnabledStep.id;\n }\n\n showStep(stepId: string) {\n this.scheduledAfterRender.push(this.resizeIframe);\n this.showStepPane(stepId);\n this.focusStepBtn(stepId);\n }\n\n showStepPane(stepId: string) {\n this.allPanes.forEach(pane => {\n if (pane.isActive \|\| pane.id === stepId) {\n pane.isActive = stepId === pane.id;\n }\n });\n }\n\n // #endregion\n // #region Render Methods\n\n renderChildStepBtn(pane: BaseStructuredPane, index: number, children: number, parentLabel: string) {\n const { currentStepId } = this;\n const { id, label, status, disabled: isPaneDisabled } = pane;\n const stepNumber = index + 1;\n const labelId = label && `label-${id}`;\n const isCurrentStep = id === currentStepId;\n const isLocked = status === 'locked';\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.childNumber', [`${stepNumber}`, `${children}`, parentLabel]);\n\n let statusIcon;\n if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-child-btn'];\n if (status) stepClasses.push(`status-${status}`);\n if (isPaneDisabled) stepClasses.push('pane-disabled');\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n id={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon && (\n <div class=\"step-child-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n )}\n {label && (\n <div\n class=\"step-child-label\"\n id={labelId}\n >\n {loc(label)}\n </div>\n )}\n </button>\n </li>\n );\n }\n\n renderSpacer(pane: StructuredPane, stepLabel: string, isExpanded: boolean, isLastStep: boolean) {\n const shouldRender = (isLastStep && !!pane.children.length) \|\| !isLastStep;\n const spacerClasses = ['spacer'];\n if (!isLastStep) spacerClasses.push('has-sibling');\n return (\n shouldRender && (\n <div class={spacerClasses.join(' ')}>\n {!!pane.children.length && (\n <ul\n ref={el => isExpanded && (this.expandedStepChildrenList = el)}\n aria-hidden={`${!isExpanded}`}\n >\n {pane.children.map((child, index, children) =>\n this.renderChildStepBtn(child, index, children.length, stepLabel)\n )}\n </ul>\n )}\n </div>\n )\n );\n }\n\n renderStepBtn(pane: StructuredPane, index: number) {\n const { currentStepId, structuredPanes } = this;\n const isLastStep = index === structuredPanes.length - 1;\n const { id, label, description, status, disabled: isPaneDisabled } = pane;\n const stepNumber = index + 1;\n const isCurrentStep = id === currentStepId;\n const labelId = label && `label-${id}`;\n const isLocked = status === 'locked';\n const stepLabel = label && loc(label);\n const descriptionId = label && description && `description-${id}`;\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.number', [`${stepNumber}`, `${structuredPanes.length}`]);\n\n let statusIcon;\n if (status === 'complete') statusIcon = 'success-filled';\n else if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-btn'];\n if (status) stepClasses.push(`status-${status}`);\n if (isPaneDisabled) stepClasses.push('pane-disabled');\n\n const childIds = pane.children.map(child => child.id);\n const isExpanded = isCurrentStep \|\| childIds.includes(currentStepId);\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-describedBy={descriptionId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n aria-expanded={!!pane.children.length ? `${isExpanded}` : null}\n id={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon ? (\n <div class=\"step-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n ) : (\n <div class=\"step-bubble\">{stepNumber}</div>\n )}\n\n {label && (\n <div>\n <div\n class=\"step-label\"\n id={labelId}\n >\n {stepLabel}\n </div>\n {description && (\n <div\n class=\"step-description\"\n id={descriptionId}\n >\n {loc(description)}\n </div>\n )}\n </div>\n )}\n </button>\n {this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)}\n </li>\n );\n }\n\n render() {\n return (\n <Fragment>\n <ul role=\"tablist\">{this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))}</ul>\n <div role=\"list\">\n <slot />\n </div>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"]}

package/dist/collection/components/q2-tab-container/q2-tab-container.css CHANGED Viewed

@@ -125,14 +125,19 @@ li button {
   padding: var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));
   color: var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));
   font-size: var(--tct-tab-font-size, var(--t-tab-font-size, 17px));
+  line-height: var(--tct-tab-line-height, 20px);
   display: block;
   transition: background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs);
 }
 :host([type=section]) li button {
   --comp-tab-section-padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));
-  font-size: var(--tct-tab-section-font-size, inherit);
+  font-size: var(--tct-tab-section-font-size, 14px);
+  line-height: var(--tct-tab-section-line-height, 18px);
   padding: var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)));
 }
+li button:focus-visible {
+  box-shadow: var(--tct-tab-focus-visible-box-shadow, var(--const-double-focus-ring));
+}
 li button:hover {
   color: var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));
   background: var(--tct-tab-hover-background, var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit)));
@@ -144,6 +149,7 @@ li button[aria-selected=true] {
   border-style: var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));
   width: var(--tct-tab-active-width, var(--t-tab-active-width, 100%));
   background: var(--tct-tab-active-background, var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit)));
+  text-decoration: var(--tct-tab-active-text-decoration, none);
 }
 :host([color=alt]) li button {
   color: var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit));

package/dist/collection/components/q2-tab-container/q2-tab-container.js CHANGED Viewed

@@ -266,7 +266,7 @@ export class Q2TabContainer {
         return (h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${description}` }, tab.label, h("q2-badge", { value: tab.badgeCount, theme: theme, status: tab.badgeStatus })));
     }
     render() {
-        return (h(Fragment, { key: '2181b2505b4d48d9812b61d5414264425ff7f4af' }, h("div", { key: '0901678c9f074277414bf0dfd1b73cb3ec93cd6f', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '3cc265f40d308947e07bb2ca7cf2496bf1f74d44' }, h("div", { key: '8b0606af29da80fb969e94b2708077bf2e4ef7e2', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: '2412d226cf903beae013965e345f0f56ca9991d6', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: 'edf2bf63eebe24832e529178fa185ad27c3a45ba', class: "btn-left", hidden: !this.showScrollLeft, onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '7900b5426d1ec51880fe8c36d33a59873b1be508', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: '001628dae8b16b4c5aff651c8515cce25d08bbf2', class: "btn-right", hidden: !this.showScrollRight, onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'f4579ca37dd0e2908e3f68dc60eb923d4a3f314e', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '53efc8ffaaf29dc1dfd9b86ee4105a87350aebfb', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '1e3d76467f667d04a488aacd5a51b641a0acbabc', class: "tab-content" }, h("slot", { key: '4384593fb9579c4187c50eee288517aba22c9ace', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: '1913175c15aecb5bf14cd1dbdc35e9c987fde9d4' }, h("div", { key: '635d91af2197e6ef1078cdc9bd6fcf8d4b135675', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '138d7b25a3644ccf9b14934a06ba515e04770bac' }, h("div", { key: 'a5e723731fb2c42a0c280cc15d7220a64f67b60b', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: 'bd13d0b8412a08277b112473aa4664e287bce7c4', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: '7887ac9fcf831190abc8610cb6271839a662efd2', class: "btn-left", hidden: !this.showScrollLeft, onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'c7ef1331d91747e4c23f0ecdc48600ae2ca0d2ad', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: 'a8564bd1e158bef750300112d024933600f7f6ac', class: "btn-right", hidden: !this.showScrollRight, onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '16dfc165369e2cc344d76e817b879d8c02d47b23', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '660241dfc441a2f55328156e23c601061ff89c17', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '54fc457ab57a00bd13eac3ebdb019bd49bbd7a71', class: "tab-content" }, h("slot", { key: '479a982a16116bc5e82e28f171387c07a33bcb9c', onSlotchange: () => this.onSlotChange() }))));
     }
     static get is() { return "q2-tab-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-tab-pane/q2-tab-pane.js CHANGED Viewed

@@ -19,7 +19,7 @@ export class Q2TabPane {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '1f9e5f993a4d548dade126f8acf05e9c958eddc0', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: 'd5eeb1c72d8c416b91851a661d3aa4736d17f16b' })));
+        return (h("div", { key: '6550750c490f276b314f5e10cba438aa5f458657', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: 'bc8b8e38e3d2635f61ccc06830c095cc743c235a' })));
     }
     static get is() { return "q2-tab-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-tag/q2-tag.css CHANGED Viewed

@@ -105,6 +105,9 @@ button {
   --comp-tag-color: var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #141414));
   --comp-tag-border-color: var(--tct-tag-tertiary-border-color, var(--t-tertiary, #e8f5fc));
 }
+.tag-wrapper:focus-visible {
+  box-shadow: var(--tct-tag-focus-visible-box-shadow, var(--const-double-focus-ring));
+}
 .tag {
   display: flex;

package/dist/collection/components/q2-tag/q2-tag.js CHANGED Viewed

@@ -198,7 +198,7 @@ export class Q2Tag {
         if (this.optionCount)
             wrapperClassNames.push('has-options');
         const shouldShowOptions = this.optionCount > 0;
-        return (h(Host, { key: '2ce592e9fc8db8d547cad71623270837ec0539d6' }, h("click-elsewhere", { key: 'b0a0ad314e84ccae1e06b197bc6fec8f1c333349', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: 'd67e1d087a62530ef3c013f070ae522531acd508', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '6c2484d7110eeff81dfebef4c05dec99adffe935', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: 'db0c912240b4e2425c16bce894abb8be42ab67e2' })))))));
+        return (h(Host, { key: '664af4451fdb556b1746ec0f1a0a66de86642a7a' }, h("click-elsewhere", { key: '8da25535a510070733d25fa1d63dedfa0865b7ab', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '28397ef79ce03d335959ad993a4de4278073a9ba', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '3379d0003bde9036485c06ff696a2f08fc599451', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '1cf6372351972e02563e74ba1e9cc79e261a9a2a' })))))));
     }
     static get is() { return "q2-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-textarea/q2-textarea.css CHANGED Viewed

@@ -195,6 +195,7 @@ textarea:not([cols]) {
   backdrop-filter: var(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));
   border-color: var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));
   background: var(--tct-textarea-error-background, var(--comp-textarea-background));
+  box-shadow: var(--tct-textarea-error-box-shadow, var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none)));
 }
 textarea:hover {
   border-color: var(--tct-textarea-hover-border-color, var(--comp-textarea-border-color));

package/dist/collection/components/q2-tooltip/q2-tooltip.css CHANGED Viewed

@@ -118,7 +118,7 @@ button {
   word-wrap: break-word;
   white-space: pre;
   pointer-events: none;
-  content: attr(aria-label);
+  content: attr(data-label);
   background: var(--comp-background);
   border-radius: var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 4px)));
 }