q2-tecton-elements 1.37.1 → 1.38.1

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

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

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 
 :host {
@@ -102,23 +102,23 @@ q2-popover,
   --comp-btn-color: var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)));
 }
 :host([theme=primary]) .btn-wrapper {
-  --comp-active-btn-background: var(--tct-pill-primary-active-background, var(--t-primary-l5, #61c4ff));
+  --comp-active-btn-background: var(--tct-pill-primary-active-background, var(--t-primary, #61c4ff));
   --comp-active-btn-color: var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));
-  --comp-active-btn-border-color: var(--tct-pill-primary-active-border-color, var(--t-primary-l5, #61c4ff));
+  --comp-active-btn-border-color: var(--tct-pill-primary-active-border-color, var(--t-primary, #61c4ff));
   --comp-hover-active-btn-background: var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));
   --comp-hover-active-btn-border-color: var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff));
 }
 :host([theme=secondary]) .btn-wrapper {
-  --comp-active-btn-background: var(--tct-pill-secondary-active-background, var(--t-secondary-l5, #d9e1e6));
+  --comp-active-btn-background: var(--tct-pill-secondary-active-background, var(--t-secondary, #d9e1e6));
   --comp-active-btn-color: var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));
-  --comp-active-btn-border-color: var(--tct-pill-secondary-active-border-color, var(--t-secondary-l5, #d9e1e6));
+  --comp-active-btn-border-color: var(--tct-pill-secondary-active-border-color, var(--t-secondary, #d9e1e6));
   --comp-hover-active-btn-background: var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));
   --comp-hover-active-btn-border-color: var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db));
 }
 :host([theme=tertiary]) .btn-wrapper {
-  --comp-active-btn-background: var(--tct-pill-tertiary-active-background, var(--t-tertiary-l5, #f4fafe));
+  --comp-active-btn-background: var(--tct-pill-tertiary-active-background, var(--t-tertiary, #f4fafe));
   --comp-active-btn-color: var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));
-  --comp-active-btn-border-color: var(--tct-pill-tertiary-active-border-color, var(--t-tertiary-l5, #f4fafe));
+  --comp-active-btn-border-color: var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #f4fafe));
   --comp-hover-active-btn-background: var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));
   --comp-hover-active-btn-border-color: var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd));
 }

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

@@ -1,9 +1,18 @@
 import { h, } from '@stencil/core';
-import { resizeIframe, waitForNextPaint } from '../../utils';
+import { nextPaint, resizeIframe, waitForNextPaint, handleDeprecationWarning } from '../../utils';
 export class Q2Popover {
   constructor() {
     this.scheduledAfterRender = [];
+    /**
+     * The number of pixels to leave between the popover and the edge of the viewport
+     */
+    this.displayBuffer = 10;
     /// Helpers ///
+    this.handleMinHeight = () => {
+      if (this.minHeight) {
+        handleDeprecationWarning(this, 'minHeight', 'prop');
+      }
+    };
     this.viewPortChanged = () => {
       if (!this.open)
         return;
@@ -13,13 +22,14 @@ export class Q2Popover {
     this.align = undefined;
     this.open = undefined;
     this.block = undefined;
-    this.minHeight = undefined;
     this.controlElement = undefined;
+    this.minHeight = undefined;
     this.currentDirection = undefined;
     this.show = false;
   }
   /// Lifecycle hooks ///
   componentDidLoad() {
+    this.handleMinHeight();
     if (this.open)
       this.determinePopDirection();
   }
@@ -50,11 +60,16 @@ export class Q2Popover {
     else {
       this.removeViewportListeners();
       this.currentDirection = undefined;
-      this.containerElement.style.removeProperty('display');
-      this.containerElement.style.removeProperty('--comp-pop-max-height');
       this.show = false;
+      nextPaint(() => {
+        this.containerElement.style.removeProperty('--comp-pop-max-height');
+        this.containerElement.style.removeProperty('display');
+      });
     }
   }
+  minHeightProvided() {
+    this.handleMinHeight();
+  }
   /// Listeners ///
   popoverStateHandler(event) {
     const { detail: { open }, } = event;
@@ -78,71 +93,67 @@ export class Q2Popover {
     this.currentDirection = direction;
     this.show = true;
   }
+  get isModule() {
+    var _a, _b;
+    const isIframe = window !== window.top;
+    const hasPlatformDimensions = Object.keys((_b = (_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.platformDimensions) !== null && _b !== void 0 ? _b : {}).length > 0;
+    return isIframe && hasPlatformDimensions;
+  }
   async determinePopDirection() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const { containerElement, contentElement, direction, controlElement, currentDirection } = this;
+    var _a, _b;
+    const { containerElement, direction, controlElement, displayBuffer } = this;
     if (containerElement)
       containerElement.style.maxHeight = null;
-    // If the direction is already set then use it, otherwise use the current direction
-    const currentOrStatedDirection = direction !== null && direction !== void 0 ? direction : currentDirection;
-    // Set the container to block so we can get the height
+    // Show the container so we can get the height
     containerElement.style.setProperty('display', 'block');
     await waitForNextPaint();
-    // Determine the dimensions of the control element
-    const { top: topOffset, height } = (_a = controlElement === null || controlElement === void 0 ? void 0 : controlElement.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {
+    const { isModule } = this;
+    const { top: controlTop, bottom: controlBottom } = (_a = controlElement === null || controlElement === void 0 ? void 0 : controlElement.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {
       top: 0,
-      height: 0,
+      bottom: 0,
     };
-    const contentHeight = contentElement.clientHeight;
-    const scrollY = ((_c = (_b = window.Tecton) === null || _b === void 0 ? void 0 : _b.platformDimensions) === null || _c === void 0 ? void 0 : _c.scrollY) ||
-      ((_d = window.visualViewport) === null || _d === void 0 ? void 0 : _d.offsetTop) || // Only Android Chrome provides this which we need when scrolled
-      0;
-    const outletOffset = scrollY + (((_f = (_e = window.Tecton) === null || _e === void 0 ? void 0 : _e.platformDimensions) === null || _f === void 0 ? void 0 : _f.outletOffset) || 0);
-    const innerHeight = ((_h = (_g = window.Tecton) === null || _g === void 0 ? void 0 : _g.platformDimensions) === null || _h === void 0 ? void 0 : _h.innerHeight) || ((_j = window.visualViewport) === null || _j === void 0 ? void 0 : _j.height) || window.innerHeight;
-    const bottomOffset = scrollY + innerHeight - topOffset - height - outletOffset;
-    const canShowFullSizeBelow = bottomOffset > contentHeight;
-    const canShowFullSizeAbove = contentHeight <= topOffset;
-    let determinedDirection;
-    // Show the full-size popover below or above if it will fit
-    if (currentOrStatedDirection === 'down' && canShowFullSizeBelow)
-      return this.setDirectionAndShow('down');
-    else if (currentOrStatedDirection === 'up' && canShowFullSizeAbove)
-      return this.setDirectionAndShow('up');
-    else if (currentOrStatedDirection === undefined && canShowFullSizeBelow)
-      determinedDirection = 'down';
-    else if (currentOrStatedDirection === undefined && canShowFullSizeAbove)
-      determinedDirection = 'up';
-    if (determinedDirection)
-      return this.setDirectionAndShow(determinedDirection);
-    // If full size will not fit then make it as tall as possible
-    const { minHeight = 150 } = this;
-    const displayBuffer = 5;
-    const canShowMinHeightBelow = bottomOffset >= minHeight + displayBuffer;
-    let maxHeight;
-    if (currentOrStatedDirection === 'down') {
-      maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);
-      determinedDirection = 'down';
-    }
-    else if (currentOrStatedDirection === 'up') {
-      maxHeight = Math.max(topOffset - displayBuffer, minHeight);
-      determinedDirection = 'up';
-    }
-    else if (canShowMinHeightBelow) {
-      maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);
-      determinedDirection = 'down';
+    let windowHeight;
+    let maxSpaceAbove;
+    let maxSpaceBelow;
+    if (isModule) {
+      const platformDimensions = (_b = window.Tecton) === null || _b === void 0 ? void 0 : _b.platformDimensions;
+      const distanceToIframeBottom = window.visualViewport.height - controlBottom;
+      const viewableSpaceBelow = platformDimensions.innerHeight - (platformDimensions.outletOffset + controlBottom);
+      const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;
+      windowHeight = platformDimensions.innerHeight;
+      // If the top of the module is below the top of the window we just use the controlTop
+      // Otherwise we need to add the outletOffset to the controlTop
+      maxSpaceAbove =
+        (platformDimensions.outletOffset > 0 ? controlTop : controlTop + platformDimensions.outletOffset) -
+          displayBuffer;
+      maxSpaceBelow = isIframeShorterThanWindow
+        ? distanceToIframeBottom - displayBuffer
+        : viewableSpaceBelow - displayBuffer;
     }
     else {
-      maxHeight = Math.max(topOffset - scrollY - displayBuffer, minHeight);
-      determinedDirection = 'up';
+      windowHeight = window.visualViewport.height;
+      maxSpaceAbove = controlTop - displayBuffer;
+      maxSpaceBelow = windowHeight - controlBottom - displayBuffer;
+    }
+    const directionWithMostSpace = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';
+    switch (direction !== null && direction !== void 0 ? direction : directionWithMostSpace) {
+      case 'up':
+        containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceAbove}px`);
+        return this.setDirectionAndShow('up');
+      case 'down':
+        containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceBelow}px`);
+        return this.setDirectionAndShow('down');
+      default:
+        break;
     }
-    containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);
-    return this.setDirectionAndShow(determinedDirection);
   }
   determinePopOffset() {
-    var _a;
     const { controlElement, containerElement } = this;
-    const dropdownHeight = (_a = controlElement === null || controlElement === void 0 ? void 0 : controlElement.getBoundingClientRect().height) !== null && _a !== void 0 ? _a : 0;
-    containerElement.style.setProperty('--comp-pop-offset', `${dropdownHeight}px`);
+    const controlStyle = getComputedStyle(controlElement);
+    const controlSize = parseInt(controlStyle.height) +
+      parseInt(controlStyle.borderTopWidth) +
+      parseInt(controlStyle.borderBottomWidth);
+    containerElement.style.setProperty('--comp-pop-offset', `${controlSize}px`);
   }
   /// DOM ///
   render() {
@@ -233,23 +244,6 @@ export class Q2Popover {
         "attribute": "block",
         "reflect": true
       },
-      "minHeight": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "min-height",
-        "reflect": false
-      },
       "controlElement": {
         "type": "unknown",
         "mutable": false,
@@ -268,6 +262,26 @@ export class Q2Popover {
           "tags": [],
           "text": ""
         }
+      },
+      "minHeight": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "min-height",
+        "reflect": false
       }
     };
   }
@@ -342,6 +356,9 @@ export class Q2Popover {
     return [{
         "propName": "open",
         "methodName": "openChanged"
+      }, {
+        "propName": "minHeight",
+        "methodName": "minHeightProvided"
       }];
   }
   static get listeners() {

package/dist/collection/components/q2-popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-popover/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    h,\n    ComponentInterface,\n    Element,\n    Watch,\n    Method,\n    Listen,\n    EventEmitter,\n    Event,\n    State,\n} from '@stencil/core';\nimport { resizeIframe, waitForNextPaint } from '../../utils';\n\n@Component({\n    tag: 'q2-popover',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Popover implements ComponentInterface {\n    @Prop({ reflect: true }) direction: 'up' | 'down';\n    @Prop({ reflect: true }) align: 'left' | 'right';\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n    @Prop({ reflect: true }) block: boolean;\n    @Prop() minHeight: number;\n    @Prop() controlElement: HTMLElement;\n\n    @Element() hostElement: HTMLElement;\n    @Event() popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n    @State() currentDirection: 'down' | 'up' = undefined;\n    @State() show: boolean = false;\n    containerElement: HTMLDivElement;\n    contentElement: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    /// Lifecycle hooks ///\n    componentDidLoad() {\n        if (this.open) this.determinePopDirection();\n    }\n\n    componentDidRender() {\n        setTimeout(() => {\n            this.scheduledAfterRender.forEach(fn => fn());\n            this.scheduledAfterRender = [];\n        }, 25);\n    }\n\n    disconnectedCallback() {\n        this.removeViewportListeners();\n    }\n\n    /// Methods ///\n    @Method()\n    async toggle() {\n        this.open = !this.open;\n    }\n\n    @Method()\n    async scrollContainerTo(options: ScrollToOptions) {\n        this.containerElement.scrollTo(options);\n    }\n\n    /// Watchers ///\n    @Watch('open')\n    openChanged(open) {\n        this.popoverStateChanged.emit({ open });\n        this.scheduledAfterRender.push(resizeIframe);\n        if (open) {\n            this.addViewportListeners();\n            this.determinePopDirection();\n        } else {\n            this.removeViewportListeners();\n            this.currentDirection = undefined;\n            this.containerElement.style.removeProperty('display');\n            this.containerElement.style.removeProperty('--comp-pop-max-height');\n            this.show = false;\n        }\n    }\n\n    /// Listeners ///\n    @Listen('popoverState')\n    popoverStateHandler(event: CustomEvent<{ open: boolean }>) {\n        const {\n            detail: { open },\n        } = event;\n        if (open === this.open) return;\n\n        this.open = open;\n        event.stopPropagation();\n    }\n\n    /// Helpers ///\n    viewPortChanged = () => {\n        if (!this.open) return;\n        this.determinePopDirection();\n    };\n\n    addViewportListeners() {\n        // window.visualViewport.addEventListener('scroll', this.viewPortChanged);\n        window.visualViewport.addEventListener('resize', this.viewPortChanged);\n    }\n\n    removeViewportListeners() {\n        // window.visualViewport.removeEventListener('scroll', this.viewPortChanged);\n        window.visualViewport.removeEventListener('resize', this.viewPortChanged);\n    }\n\n    async setDirectionAndShow(direction: 'up' | 'down') {\n        if (direction === 'up') {\n            this.determinePopOffset();\n        }\n\n        this.currentDirection = direction;\n        this.show = true;\n    }\n\n    async determinePopDirection() {\n        const { containerElement, contentElement, direction, controlElement, currentDirection } = this;\n        if (containerElement) containerElement.style.maxHeight = null;\n\n        // If the direction is already set then use it, otherwise use the current direction\n        const currentOrStatedDirection = direction ?? currentDirection;\n\n        // Set the container to block so we can get the height\n        containerElement.style.setProperty('display', 'block');\n        await waitForNextPaint();\n\n        // Determine the dimensions of the control element\n        const { top: topOffset, height } = controlElement?.getBoundingClientRect() ?? {\n            top: 0,\n            height: 0,\n        };\n\n        const contentHeight = contentElement.clientHeight;\n        const scrollY =\n            window.Tecton?.platformDimensions?.scrollY ||\n            window.visualViewport?.offsetTop || // Only Android Chrome provides this which we need when scrolled\n            0;\n        const outletOffset = scrollY + (window.Tecton?.platformDimensions?.outletOffset || 0);\n        const innerHeight =\n            window.Tecton?.platformDimensions?.innerHeight || window.visualViewport?.height || window.innerHeight;\n        const bottomOffset = scrollY + innerHeight - topOffset - height - outletOffset;\n        const canShowFullSizeBelow = bottomOffset > contentHeight;\n        const canShowFullSizeAbove = contentHeight <= topOffset;\n        let determinedDirection: 'up' | 'down';\n\n        // Show the full-size popover below or above if it will fit\n        if (currentOrStatedDirection === 'down' && canShowFullSizeBelow) return this.setDirectionAndShow('down');\n        else if (currentOrStatedDirection === 'up' && canShowFullSizeAbove) return this.setDirectionAndShow('up');\n        else if (currentOrStatedDirection === undefined && canShowFullSizeBelow) determinedDirection = 'down';\n        else if (currentOrStatedDirection === undefined && canShowFullSizeAbove) determinedDirection = 'up';\n\n        if (determinedDirection) return this.setDirectionAndShow(determinedDirection);\n\n        // If full size will not fit then make it as tall as possible\n        const { minHeight = 150 } = this;\n        const displayBuffer = 5;\n        const canShowMinHeightBelow = bottomOffset >= minHeight + displayBuffer;\n\n        let maxHeight;\n        if (currentOrStatedDirection === 'down') {\n            maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);\n            determinedDirection = 'down';\n        } else if (currentOrStatedDirection === 'up') {\n            maxHeight = Math.max(topOffset - displayBuffer, minHeight);\n            determinedDirection = 'up';\n        } else if (canShowMinHeightBelow) {\n            maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);\n            determinedDirection = 'down';\n        } else {\n            maxHeight = Math.max(topOffset - scrollY - displayBuffer, minHeight);\n            determinedDirection = 'up';\n        }\n        containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);\n        return this.setDirectionAndShow(determinedDirection);\n    }\n\n    determinePopOffset() {\n        const { controlElement, containerElement } = this;\n        const dropdownHeight = controlElement?.getBoundingClientRect().height ?? 0;\n        containerElement.style.setProperty('--comp-pop-offset', `${dropdownHeight}px`);\n    }\n\n    /// DOM ///\n    render() {\n        const containerClasses = ['container', this.currentDirection];\n        if (this.show) containerClasses.push('show');\n\n        return (\n            <div\n                ref={el => (this.containerElement = el)}\n                class={containerClasses.join(' ')}\n                test-id=\"outerContainer\"\n            >\n                <div\n                    ref={el => (this.contentElement = el)}\n                    class=\"content\"\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-popover/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    h,\n    ComponentInterface,\n    Element,\n    Watch,\n    Method,\n    Listen,\n    EventEmitter,\n    Event,\n    State,\n} from '@stencil/core';\nimport { nextPaint, resizeIframe, waitForNextPaint, handleDeprecationWarning } from '../../utils';\n\n@Component({\n    tag: 'q2-popover',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Popover implements ComponentInterface {\n    @Prop({ reflect: true }) direction: 'up' | 'down';\n    @Prop({ reflect: true }) align: 'left' | 'right';\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n    @Prop({ reflect: true }) block: boolean;\n    @Prop() controlElement: HTMLElement;\n\n    /** @deprecated */\n    @Prop() minHeight: number;\n\n    @Element() hostElement: HTMLElement;\n    @Event() popoverStateChanged: EventEmitter<{ open: boolean }>;\n\n    @State() currentDirection: 'down' | 'up' = undefined;\n    @State() show: boolean = false;\n    containerElement: HTMLDivElement;\n    contentElement: HTMLDivElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    /**\n     * The number of pixels to leave between the popover and the edge of the viewport\n     */\n    displayBuffer = 10;\n\n    /// Lifecycle hooks ///\n    componentDidLoad() {\n        this.handleMinHeight();\n        if (this.open) this.determinePopDirection();\n    }\n\n    componentDidRender() {\n        setTimeout(() => {\n            this.scheduledAfterRender.forEach(fn => fn());\n            this.scheduledAfterRender = [];\n        }, 25);\n    }\n\n    disconnectedCallback() {\n        this.removeViewportListeners();\n    }\n\n    /// Methods ///\n    @Method()\n    async toggle() {\n        this.open = !this.open;\n    }\n\n    @Method()\n    async scrollContainerTo(options: ScrollToOptions) {\n        this.containerElement.scrollTo(options);\n    }\n\n    /// Watchers ///\n    @Watch('open')\n    openChanged(open) {\n        this.popoverStateChanged.emit({ open });\n        this.scheduledAfterRender.push(resizeIframe);\n        if (open) {\n            this.addViewportListeners();\n            this.determinePopDirection();\n        } else {\n            this.removeViewportListeners();\n            this.currentDirection = undefined;\n            this.show = false;\n            nextPaint(() => {\n                this.containerElement.style.removeProperty('--comp-pop-max-height');\n                this.containerElement.style.removeProperty('display');\n            });\n        }\n    }\n\n    @Watch('minHeight')\n    minHeightProvided() {\n        this.handleMinHeight();\n    }\n\n    /// Listeners ///\n    @Listen('popoverState')\n    popoverStateHandler(event: CustomEvent<{ open: boolean }>) {\n        const {\n            detail: { open },\n        } = event;\n        if (open === this.open) return;\n\n        this.open = open;\n        event.stopPropagation();\n    }\n\n    /// Helpers ///\n    handleMinHeight = () => {\n        if (this.minHeight) {\n            handleDeprecationWarning(this, 'minHeight', 'prop');\n        }\n    };\n\n    viewPortChanged = () => {\n        if (!this.open) return;\n        this.determinePopDirection();\n    };\n\n    addViewportListeners() {\n        // window.visualViewport.addEventListener('scroll', this.viewPortChanged);\n        window.visualViewport.addEventListener('resize', this.viewPortChanged);\n    }\n\n    removeViewportListeners() {\n        // window.visualViewport.removeEventListener('scroll', this.viewPortChanged);\n        window.visualViewport.removeEventListener('resize', this.viewPortChanged);\n    }\n\n    async setDirectionAndShow(direction: 'up' | 'down') {\n        if (direction === 'up') {\n            this.determinePopOffset();\n        }\n\n        this.currentDirection = direction;\n        this.show = true;\n    }\n\n    get isModule() {\n        const isIframe = window !== window.top;\n        const hasPlatformDimensions = Object.keys(window.Tecton?.platformDimensions ?? {}).length > 0;\n        return isIframe && hasPlatformDimensions;\n    }\n\n    async determinePopDirection() {\n        const { containerElement, direction, controlElement, displayBuffer } = this;\n        if (containerElement) containerElement.style.maxHeight = null;\n\n        // Show the container so we can get the height\n        containerElement.style.setProperty('display', 'block');\n        await waitForNextPaint();\n\n        const { isModule } = this;\n        const { top: controlTop, bottom: controlBottom } = controlElement?.getBoundingClientRect() ?? {\n            top: 0,\n            bottom: 0,\n        };\n\n        let windowHeight: number;\n        let maxSpaceAbove: number;\n        let maxSpaceBelow: number;\n\n        if (isModule) {\n            const platformDimensions = window.Tecton?.platformDimensions;\n            const distanceToIframeBottom = window.visualViewport.height - controlBottom;\n            const viewableSpaceBelow =\n                platformDimensions.innerHeight - (platformDimensions.outletOffset + controlBottom);\n            const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;\n            windowHeight = platformDimensions.innerHeight;\n            // If the top of the module is below the top of the window we just use the controlTop\n            // Otherwise we need to add the outletOffset to the controlTop\n            maxSpaceAbove =\n                (platformDimensions.outletOffset > 0 ? controlTop : controlTop + platformDimensions.outletOffset) -\n                displayBuffer;\n            maxSpaceBelow = isIframeShorterThanWindow\n                ? distanceToIframeBottom - displayBuffer\n                : viewableSpaceBelow - displayBuffer;\n        } else {\n            windowHeight = window.visualViewport.height;\n            maxSpaceAbove = controlTop - displayBuffer;\n            maxSpaceBelow = windowHeight - controlBottom - displayBuffer;\n        }\n\n        const directionWithMostSpace: 'up' | 'down' = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';\n        switch (direction ?? directionWithMostSpace) {\n            case 'up':\n                containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceAbove}px`);\n                return this.setDirectionAndShow('up');\n            case 'down':\n                containerElement.style.setProperty('--comp-pop-max-height', `${maxSpaceBelow}px`);\n                return this.setDirectionAndShow('down');\n            default:\n                break;\n        }\n    }\n\n    determinePopOffset() {\n        const { controlElement, containerElement } = this;\n        const controlStyle = getComputedStyle(controlElement);\n        const controlSize =\n            parseInt(controlStyle.height) +\n            parseInt(controlStyle.borderTopWidth) +\n            parseInt(controlStyle.borderBottomWidth);\n\n        containerElement.style.setProperty('--comp-pop-offset', `${controlSize}px`);\n    }\n\n    /// DOM ///\n    render() {\n        const containerClasses = ['container', this.currentDirection];\n        if (this.show) containerClasses.push('show');\n\n        return (\n            <div\n                ref={el => (this.containerElement = el)}\n                class={containerClasses.join(' ')}\n                test-id=\"outerContainer\"\n            >\n                <div\n                    ref={el => (this.contentElement = el)}\n                    class=\"content\"\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n"]}

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 
 :host {
@@ -84,17 +84,20 @@ button {
   opacity: 0;
   height: 0;
   position: absolute;
-  top: var(--tct-popover-top, var(--t-popover-top, initial));
-  visibility: hidden;
-  background: var(--tct-popover-background, var(--tct-popover-background-color, var(--t-popover-background-color, var(--app-white, #ffffff))));
-  color: var(--tct-popover-text-color, var(--t-popover-text-color, var(--t-text, #4d4d4d)));
-  z-index: var(--tct-popover-z-index, var(--t-popover-z-index, 100));
+  top: var(--tct-popover-top, initial);
+  background: var(--tct-popover-background, var(--app-white, #ffffff));
+  color: var(--tct-popover-font-color, var(--t-text, #4d4d4d));
+  z-index: var(--tct-popover-z-index, 100);
   width: max-content;
-  min-width: var(--tct-popover-min-width, var(--t-popover-min-width, 135px));
-  box-shadow: var(--tct-popover-box-shadow, var(--t-popover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));
+  min-width: var(--tct-popover-min-width, 135px);
+  box-shadow: var(--tct-popover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)));
   text-align: start;
   left: 0;
-  border-radius: var(--tct-popover-border-radius, var(--t-popover-border-radius, 0));
+  margin-block: var(--tct-popover-margin-block, 0);
+  border-width: var(--tct-popover-border-width, 0);
+  border-style: solid;
+  border-color: var(--tct-popover-border-color, transparent);
+  border-radius: var(--tct-popover-border-radius, 0);
   max-height: var(--comp-pop-max-height);
   --comp-scrollbar-size: var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));
   --comp-scrollbar-border-radius: var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));
@@ -119,16 +122,13 @@ button {
   left: unset;
   right: unset;
   width: 100%;
-  min-width: var(--tct-popover-min-width, var(--t-popover-min-width, unset));
+  min-width: var(--tct-popover-min-width, unset);
 }
 :host([align=right]) .container {
   right: 0;
   text-align: end;
   left: unset;
 }
-:host([open]) .container {
-  visibility: visible;
-}
 :host([open]) .container.show {
   height: auto;
   overflow: auto;

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
 }
 
 :host {
@@ -92,12 +92,7 @@ button {
 .radio-container circle:nth-child(1) {
   stroke-width: 2;
   stroke: var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));
-}
-.radio-container input:focus + label svg {
-  box-shadow: var(--const-double-focus-ring);
-}
-.radio-container input:focus + label circle:nth-child(1) {
-  stroke: var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));
+  fill: var(--tct-radio-background-fill, transparent);
 }
 .radio-container input:checked + label circle:nth-child(1) {
   fill: var(--tct-radio-checked-background-fill, var(--tct-radio-checked-bg, transparent));
@@ -106,10 +101,28 @@ button {
 .radio-container input:checked + label .label-content {
   font-weight: var(--tct-checkbox-selected-font-weight, 600);
   letter-spacing: var(--tct-checkbox-selected-letter-spacing, 0.25);
+  color: var(--tct-radio-checked-label-color, inherit);
 }
 .radio-container input:checked + label circle:nth-child(2) {
   fill: var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));
 }
+.radio-container input:hover + label circle:nth-child(1) {
+  fill: var(--tct-radio-hover-background-fill, transparent);
+  stroke: var(--tct-radio-hover-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));
+}
+.radio-container input:hover + label .label-content {
+  color: var(--tct-radio-hover-label-color, inherit);
+}
+.radio-container input:focus + label svg {
+  box-shadow: var(--const-double-focus-ring);
+}
+.radio-container input:focus + label circle:nth-child(1) {
+  fill: var(--tct-radio-focus-background-fill, transparent);
+  stroke: var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));
+}
+.radio-container input:focus + label .label-content {
+  color: var(--tct-radio-focus-label-color, var(--tct-radio-checked-label-color, inherit));
+}
 
 .radio-tile {
   flex-basis: 100px;
@@ -121,6 +134,7 @@ button {
   align-items: center;
   border-radius: 3px;
   border: 2px solid var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));
+  background: var(--tct-radio-background-fill, transparent);
   cursor: pointer;
   display: block;
   padding: 10px;
@@ -129,17 +143,15 @@ button {
   transition: border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
   white-space: nowrap;
 }
-.radio-tile input:focus + label, .radio-tile input:focus:checked + label {
-  border-color: var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));
-  box-shadow: var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);
-}
 .radio-tile input:checked + label {
-  border-color: var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));
+  border-color: var(--tct-radio-checked-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))));
   box-shadow: inset 0 0 0 2px #ffffff;
+  background: var(--tct-radio-checked-background-fill, transparent);
+  color: var(--tct-radio-checked-label-color, inherit);
 }
 .radio-tile input:checked + label:after {
   border-bottom-width: 3px;
-  border-bottom: 5px solid var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));
+  border-bottom: 5px solid var(--tct-radio-checked-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))));
   border-left-width: 5px;
   border-left: 8px solid transparent;
   border-right-width: 5px;
@@ -152,6 +164,17 @@ button {
   position: absolute;
   width: 0;
 }
+.radio-tile input:hover + label {
+  border-color: var(--tct-radio-hover-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));
+  background: var(--tct-radio-hover-background-fill, transparent);
+  color: var(--tct-radio-hover-label-color, var(--tct-radio-label-color, inherit));
+}
+.radio-tile input:focus + label, .radio-tile input:focus:checked + label {
+  border-color: var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))));
+  background: var(--tct-radio-focus-background-fill, transparent);
+  box-shadow: var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);
+  color: var(--tct-radio-focus-label-color, var(--tct-radio-checked-label-color, inherit));
+}
 
 input:disabled + label[for] {
   cursor: not-allowed;

package/dist/collection/components/q2-radio-group/index.js

@@ -96,6 +96,11 @@ export class Q2RadioGroup {
     });
   }
   /// Methods ///
+  /**
+   * Emulates clicking the `<q2-radio>` option with the provided value.
+   *
+   * @testOnly
+   */
   setValue(value) {
     this.radioElements.forEach(radio => {
       if (value !== radio.value)
@@ -391,8 +396,11 @@ export class Q2RadioGroup {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "",
-          "tags": []
+          "text": "Emulates clicking the `<q2-radio>` option with the provided value.",
+          "tags": [{
+              "name": "testOnly",
+              "text": undefined
+            }]
         }
       }
     };

package/dist/collection/components/q2-radio-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-radio-group/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-radio-group',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2RadioGroup implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ mutable: true }) value: string;\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) optional: boolean;\n    @Prop({ reflect: true }) readonly: boolean;\n    @Prop({ reflect: true, mutable: true }) tileLayout: boolean;\n    @Prop({ reflect: true }) tileAlignment: 'left' | 'center' | 'right' = 'center';\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) tilelayout: boolean;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `radio-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get radioElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n    }\n\n    onMutationObserved = () => {\n        this.valueUpdated(this.value);\n        this.nameUpdated();\n        this.disabledUpdated();\n        this.readonlyUpdated();\n        this.tileLayoutUpdated(this.tileLayout);\n    };\n\n    onInnerRadioChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        if (this.readonly) return;\n\n        this.change.emit({ value: event.detail.value });\n    };\n\n    checkedRadioExists = () => {\n        // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n        const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) || undefined;\n\n        // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n        if (!this.value && !!firstCheckedRadio) {\n            this.value = firstCheckedRadio.value;\n        } else if (!this.value && !firstCheckedRadio) {\n            // if no radios are meant to be checked, then assign first radio tabIndex of 0\n            if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n        }\n    };\n\n    /////// LIFECYCLE HOOK ///////\n    componentWillLoad() {\n        this.checkedRadioExists();\n        this.onMutationObserved();\n        this.handleDeprecatedTilelayout(this.tilelayout);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true });\n        this.mutationObserver = observer;\n        overrideFocus(this.hostElement);\n        this.checkedRadioExists();\n    }\n\n    /////// OBSERVERS ///////\n\n    @Watch('value')\n    valueUpdated(newVal: string) {\n        this.radioElements.forEach(radio => {\n            radio.checked = newVal === radio.value;\n            // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n            if (!radio.checked) {\n                radio.removeAttribute('checked');\n                radio.tabIndex = -1;\n            } else if (radio.checked) {\n                radio.tabIndex = 0;\n            }\n        });\n    }\n\n    @Watch('name')\n    nameUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.name = this.name || this._id;\n        });\n    }\n\n    @Watch('disabled')\n    disabledUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.groupDisabled = this.disabled;\n        });\n    }\n\n    @Watch('readonly')\n    readonlyUpdated() {\n        const readonly = this.readonly;\n        this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n    }\n\n    @Watch('tilelayout')\n    handleDeprecatedTilelayout(tilelayout: boolean) {\n        if (typeof tilelayout !== 'boolean') return;\n        this.tileLayout = tilelayout;\n        this.tilelayout = undefined;\n    }\n\n    @Watch('tileLayout')\n    tileLayoutUpdated(tileLayout: boolean) {\n        this.radioElements.forEach(radio => {\n            radio.groupTileLayout = tileLayout;\n        });\n    }\n\n    /// Methods ///\n    @Method()\n    setValue(value: string) {\n        this.radioElements.forEach(radio => {\n            if (value !== radio.value) return;\n            radio.click();\n        });\n    }\n\n    /////// HOST ELEMENT EVENTS ///////\n\n    @Event() change: EventEmitter;\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement) {\n            if (!this.hostElement.onchange) {\n                this.value = event.detail.value;\n            }\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const radio = this.hostElement.querySelector('q2-radio[checked]') || this.hostElement.querySelector('q2-radio');\n        radio?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        const currentValue = (event.target as HTMLElement).getAttribute('value') || this.value;\n        let index = this.radioElements.findIndex(\n            el => el === event.target || (el as HTMLElement).getAttribute('value') === currentValue\n        );\n        let sign = 0;\n        switch (event.key) {\n            case 'ArrowLeft':\n            case 'ArrowUp':\n                sign = -1;\n                break;\n\n            case 'ArrowRight':\n            case 'ArrowDown':\n                sign = 1;\n                break;\n        }\n\n        if (index === -1 || sign === 0) {\n            return;\n        }\n        index += sign;\n        index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n        event.preventDefault();\n        if (!this.readonly) {\n            this.value = this.radioElements[index].value;\n        }\n        this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n    }\n\n    labelDOM() {\n        const { label, optional, readonly } = this;\n        let helpText = '';\n        if (readonly) {\n            helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n        } else if (optional) {\n            helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n        }\n        return (\n            <Fragment>\n                {label && loc(label)}\n                {!!helpText && <span class=\"optional-tag\">{helpText}</span>}\n            </Fragment>\n        );\n    }\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const { hasError } = this;\n        const showLabelRow = showLabel || hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && <div class=\"group-legend\">{this.labelDOM()}</div>}\n                        {hasError && (\n                            <q2-icon\n                                type=\"error\"\n                                test-id=\"iconError\"\n                            ></q2-icon>\n                        )}\n                    </div>\n                )}\n                <fieldset\n                    onChange={this.onInnerRadioChange}\n                    aria-invalid={`${this.hasError}`}\n                >\n                    {showLabel && <legend class=\"sr\">{this.labelDOM()}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\n        );\n    }\n\n    inputDom() {\n        if (this.tileLayout) {\n            const { tileAlignment } = this;\n            const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n            return (\n                <div class={`tile-container ${alignment}`}>\n                    <div class=\"options-container\">\n                        <slot />\n                    </div>\n                </div>\n            );\n        } else {\n            return (\n                <div class=\"options-container\">\n                    <slot />\n                </div>\n            );\n        }\n    }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-radio-group/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-radio-group',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2RadioGroup implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ mutable: true }) value: string;\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) optional: boolean;\n    @Prop({ reflect: true }) readonly: boolean;\n    @Prop({ reflect: true, mutable: true }) tileLayout: boolean;\n    @Prop({ reflect: true }) tileAlignment: 'left' | 'center' | 'right' = 'center';\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) tilelayout: boolean;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `radio-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get radioElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n    }\n\n    onMutationObserved = () => {\n        this.valueUpdated(this.value);\n        this.nameUpdated();\n        this.disabledUpdated();\n        this.readonlyUpdated();\n        this.tileLayoutUpdated(this.tileLayout);\n    };\n\n    onInnerRadioChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        if (this.readonly) return;\n\n        this.change.emit({ value: event.detail.value });\n    };\n\n    checkedRadioExists = () => {\n        // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n        const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) || undefined;\n\n        // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n        if (!this.value && !!firstCheckedRadio) {\n            this.value = firstCheckedRadio.value;\n        } else if (!this.value && !firstCheckedRadio) {\n            // if no radios are meant to be checked, then assign first radio tabIndex of 0\n            if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n        }\n    };\n\n    /////// LIFECYCLE HOOK ///////\n    componentWillLoad() {\n        this.checkedRadioExists();\n        this.onMutationObserved();\n        this.handleDeprecatedTilelayout(this.tilelayout);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true });\n        this.mutationObserver = observer;\n        overrideFocus(this.hostElement);\n        this.checkedRadioExists();\n    }\n\n    /////// OBSERVERS ///////\n\n    @Watch('value')\n    valueUpdated(newVal: string) {\n        this.radioElements.forEach(radio => {\n            radio.checked = newVal === radio.value;\n            // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n            if (!radio.checked) {\n                radio.removeAttribute('checked');\n                radio.tabIndex = -1;\n            } else if (radio.checked) {\n                radio.tabIndex = 0;\n            }\n        });\n    }\n\n    @Watch('name')\n    nameUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.name = this.name || this._id;\n        });\n    }\n\n    @Watch('disabled')\n    disabledUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.groupDisabled = this.disabled;\n        });\n    }\n\n    @Watch('readonly')\n    readonlyUpdated() {\n        const readonly = this.readonly;\n        this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n    }\n\n    @Watch('tilelayout')\n    handleDeprecatedTilelayout(tilelayout: boolean) {\n        if (typeof tilelayout !== 'boolean') return;\n        this.tileLayout = tilelayout;\n        this.tilelayout = undefined;\n    }\n\n    @Watch('tileLayout')\n    tileLayoutUpdated(tileLayout: boolean) {\n        this.radioElements.forEach(radio => {\n            radio.groupTileLayout = tileLayout;\n        });\n    }\n\n    /// Methods ///\n    /**\n     * Emulates clicking the `<q2-radio>` option with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(value: string) {\n        this.radioElements.forEach(radio => {\n            if (value !== radio.value) return;\n            radio.click();\n        });\n    }\n\n    /////// HOST ELEMENT EVENTS ///////\n\n    @Event() change: EventEmitter;\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement) {\n            if (!this.hostElement.onchange) {\n                this.value = event.detail.value;\n            }\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const radio = this.hostElement.querySelector('q2-radio[checked]') || this.hostElement.querySelector('q2-radio');\n        radio?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        const currentValue = (event.target as HTMLElement).getAttribute('value') || this.value;\n        let index = this.radioElements.findIndex(\n            el => el === event.target || (el as HTMLElement).getAttribute('value') === currentValue\n        );\n        let sign = 0;\n        switch (event.key) {\n            case 'ArrowLeft':\n            case 'ArrowUp':\n                sign = -1;\n                break;\n\n            case 'ArrowRight':\n            case 'ArrowDown':\n                sign = 1;\n                break;\n        }\n\n        if (index === -1 || sign === 0) {\n            return;\n        }\n        index += sign;\n        index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n        event.preventDefault();\n        if (!this.readonly) {\n            this.value = this.radioElements[index].value;\n        }\n        this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n    }\n\n    labelDOM() {\n        const { label, optional, readonly } = this;\n        let helpText = '';\n        if (readonly) {\n            helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n        } else if (optional) {\n            helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n        }\n        return (\n            <Fragment>\n                {label && loc(label)}\n                {!!helpText && <span class=\"optional-tag\">{helpText}</span>}\n            </Fragment>\n        );\n    }\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const { hasError } = this;\n        const showLabelRow = showLabel || hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && <div class=\"group-legend\">{this.labelDOM()}</div>}\n                        {hasError && (\n                            <q2-icon\n                                type=\"error\"\n                                test-id=\"iconError\"\n                            ></q2-icon>\n                        )}\n                    </div>\n                )}\n                <fieldset\n                    onChange={this.onInnerRadioChange}\n                    aria-invalid={`${this.hasError}`}\n                >\n                    {showLabel && <legend class=\"sr\">{this.labelDOM()}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\n        );\n    }\n\n    inputDom() {\n        if (this.tileLayout) {\n            const { tileAlignment } = this;\n            const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n            return (\n                <div class={`tile-container ${alignment}`}>\n                    <div class=\"options-container\">\n                        <slot />\n                    </div>\n                </div>\n            );\n        } else {\n            return (\n                <div class=\"options-container\">\n                    <slot />\n                </div>\n            );\n        }\n    }\n}\n"]}

package/dist/collection/components/q2-radio-group/styles.css

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

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

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