q2-tecton-elements 1.71.4 → 1.73.0

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

@@ -41,6 +41,7 @@ export class Q2Popover {
         this.displayBuffer = 10;
         this.orientationChanged = false;
         this.pendingAnimationResolve = null;
+        this.platformScrollUnsubscribe = null;
         // #endregion
         // #region State Properties
         this.animationState = 'idle';
@@ -52,11 +53,30 @@ export class Q2Popover {
         /** Aligns the popover to the left or right side of the control element. */
         this.align = 'left';
         this.mode = null;
+        this.handleInsideScroll = (event) => {
+            const { containerElement } = this;
+            if (!containerElement)
+                return;
+            if (containerElement.scrollHeight > containerElement.clientHeight)
+                return;
+            event.preventDefault();
+        };
         this.handleMinHeight = () => {
             if (this.minHeight) {
                 handleDeprecationWarning(this, 'minHeight', 'prop');
             }
         };
+        this.handleOutsideScroll = (event) => {
+            if (!this.open)
+                return;
+            if (event.composedPath().includes(this.hostElement))
+                return;
+            this.open = false;
+        };
+        this.handlePlatformScroll = () => {
+            if (this.open)
+                this.open = false;
+        };
         this.handlePopoverToggleEvent = (event) => {
             mirrorEmit(this, ['popoverStateChanged', 'tctPopoverStateChanged'], { open: event.newState === 'open' });
         };
@@ -117,10 +137,10 @@ export class Q2Popover {
             const isScrollableIframe = isModule && isInScrollableContainer(this.hostElement);
             if (currentDirection === 'up') {
                 if (isModule && !isScrollableIframe) {
-                    containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop}px`);
+                    containerElement.style.setProperty('--comp-pop-top', `${controlTop}px`);
                 }
                 else {
-                    containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop - scrollY}px`);
+                    containerElement.style.setProperty('--comp-pop-top', `${controlTop + scrollY}px`);
                 }
             }
             if (currentDirection === 'down') {
@@ -171,8 +191,10 @@ export class Q2Popover {
         this.handleMinHeight();
         if (this.supportsPopoverAPI)
             (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.handlePopoverToggleEvent);
-        if (this.open)
+        if (this.open) {
+            this.addViewportListeners();
             this.determinePopDirection();
+        }
     }
     // #endregion
     // #region Listeners
@@ -265,14 +287,22 @@ export class Q2Popover {
         return isNaN(maxHeight) ? undefined : maxHeight;
     }
     addViewportListeners() {
-        var _a;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         window.addEventListener('resize', this.viewPortOrientationChanged);
-        visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener('resize', this.viewPortChanged);
+        (_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'resize', this.viewPortChanged);
         if (isInScrollableContainer(this.hostElement) && !isMobile()) {
             window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });
         }
-        (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.addEventListener('orientationchange', this.viewPortOrientationChanged);
+        (_e = (_d = (_c = window.screen) === null || _c === void 0 ? void 0 : _c.orientation) === null || _d === void 0 ? void 0 : _d.addEventListener) === null || _e === void 0 ? void 0 : _e.call(_d, 'orientationchange', this.viewPortOrientationChanged);
         window.addEventListener('orientationchange', this.viewPortOrientationChanged);
+        if (!isMobile()) {
+            window.addEventListener('scroll', this.handleOutsideScroll, { passive: true, capture: true });
+        }
+        (_f = this.containerElement) === null || _f === void 0 ? void 0 : _f.addEventListener('wheel', this.handleInsideScroll, { passive: false });
+        (_g = this.containerElement) === null || _g === void 0 ? void 0 : _g.addEventListener('touchmove', this.handleInsideScroll, { passive: false });
+        (_h = this.platformScrollUnsubscribe) === null || _h === void 0 ? void 0 : _h.call(this);
+        this.platformScrollUnsubscribe =
+            (_l = (_k = (_j = window.TectonElements) === null || _j === void 0 ? void 0 : _j.platformScrollChanged) === null || _k === void 0 ? void 0 : _k.call(_j, this.handlePlatformScroll)) !== null && _l !== void 0 ? _l : null;
     }
     clearCSSProperties() {
         if (!this.containerElement)
@@ -287,7 +317,7 @@ export class Q2Popover {
         this.containerElement.style.removeProperty('--comp-pop-position');
     }
     async determinePopDirection() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const { containerElement, controlElement, providedDirection, displayBuffer } = this;
         if (containerElement)
             containerElement.style.maxHeight = null;
@@ -320,9 +350,10 @@ export class Q2Popover {
                 : viewableSpaceBelow - displayBuffer;
         }
         else {
-            windowHeight = window.innerHeight;
-            maxSpaceAbove = controlTop - displayBuffer;
-            maxSpaceBelow = windowHeight - controlBottom - displayBuffer;
+            const { height = window.innerHeight, offsetTop = 0 } = (_d = window.visualViewport) !== null && _d !== void 0 ? _d : {};
+            windowHeight = height;
+            maxSpaceAbove = controlTop - offsetTop - displayBuffer;
+            maxSpaceBelow = offsetTop + windowHeight - controlBottom - displayBuffer;
         }
         const directionWithMostSpace = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';
         // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)
@@ -352,12 +383,17 @@ export class Q2Popover {
         }
     }
     removeViewportListeners() {
-        var _a;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         window.removeEventListener('resize', this.viewPortOrientationChanged);
-        visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener('resize', this.viewPortChanged);
+        (_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'resize', this.viewPortChanged);
         window.removeEventListener('scroll', this.viewPortChanged, { capture: true });
-        (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.removeEventListener('orientationchange', this.viewPortOrientationChanged);
+        (_e = (_d = (_c = window.screen) === null || _c === void 0 ? void 0 : _c.orientation) === null || _d === void 0 ? void 0 : _d.removeEventListener) === null || _e === void 0 ? void 0 : _e.call(_d, 'orientationchange', this.viewPortOrientationChanged);
         window.removeEventListener('orientationchange', this.viewPortOrientationChanged);
+        window.removeEventListener('scroll', this.handleOutsideScroll, { capture: true });
+        (_f = this.containerElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('wheel', this.handleInsideScroll);
+        (_g = this.containerElement) === null || _g === void 0 ? void 0 : _g.removeEventListener('touchmove', this.handleInsideScroll);
+        (_h = this.platformScrollUnsubscribe) === null || _h === void 0 ? void 0 : _h.call(this);
+        this.platformScrollUnsubscribe = null;
     }
     setDirectionAndShow(direction) {
         var _a;
@@ -392,7 +428,7 @@ export class Q2Popover {
             containerClasses.push('animating-open');
         if (this.animationState === 'closing')
             containerClasses.push('animating-close');
-        return (h("div", { key: '4fe0c06793144eb83fe53cfc568af81226f78345', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "manual" }, h("div", { key: 'ed5d7c9f5efba8b129d580e68ab6692849332cf4', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '4c5d5b9682014b2e94b153ca33a3e0c4dd58d6bb' }))));
+        return (h("div", { key: 'f608766723c6ae6737181318b5baf8b52ed7fc0f', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "manual" }, h("div", { key: '477f1a209cf4abc984a82324d0c6fc07ede82160', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '5b48ff13907b952a2cdcffc1b6e271e4982c78ad' }))));
     }
     static get is() { return "q2-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -88,9 +88,9 @@ button {
   }
 }
 /**
- * @prop --tct-radio-margin: (<length-percentage>+) Controls the outer margin of the radio container.
  * @prop --tct-radio-transition: (*) Controls the transition timing of radio state changes.
- * @prop --tct-radio-stroke-width: (<number>) Controls the stroke width of the radio circles in the default state.
+ * @prop --tct-radio-mark-size: (<length>) Controls the width and height of the radio mark.
+ * @prop --tct-radio-stroke-width: (<number>) Controls the stroke width of the radio circles in the default state. Values above `2` are clipped by the radio mark envelope.
  * @prop --tct-radio-stroke-color: (<color>) Controls the stroke color of the radio circles in the default state.
  * @prop --tct-radio-background-fill?: (<color>) Controls the optional background fill of the radio in the default state.
  * @prop --tct-radio-background-stroke: (<color>) Controls the stroke color of the radio in the default state.
@@ -109,6 +109,7 @@ button {
  * @prop --tct-radio-background-stroke-active: (<color>) Controls the stroke color when the radio is active.
  * @prop --tct-radio-hover-background-fill?: (<color>) Controls the optional background fill when the radio is hovered.
  * @prop --tct-radio-hover-stroke-color: (<color>) Controls the stroke color when the radio is hovered.
+ * @prop --tct-radio-checked-hover-stroke-color: (<color>) Controls the stroke color when a checked radio is hovered.
  * @prop --tct-radio-hover-label-color?: (<color>) Controls the optional label text color when the radio is hovered.
  * @prop --tct-radio-focus-background-fill?: (<color>) Controls the optional background fill when the radio is focused.
  * @prop --tct-radio-focus-stroke-color: (<color>) Controls the stroke color when the radio is focused.
@@ -129,65 +130,81 @@ button {
  * @prop --tct-radio-checked-label-letter-spacing: (<length>) Controls the label letter spacing when the radio is checked (legacy alias).
  * @prop --tct-radio-label-gap: (<length-percentage>) Controls the gap between the radio circle and label content.
  * @prop --tct-radio-label-margin-right: (<length-percentage>) Controls the right margin of the radio label.
+ * @prop --tct-radio-min-height: (<length>) Controls the minimum height of the radio label row.
  * @prop --tct-radio-hidden-columns: (*) Controls the grid-template-columns when the label is visually hidden.
  * @prop --tct-radio-label-hidden-columns?: (*) Controls the optional grid-template-columns when the label is visually hidden.
- * @prop --tct-radio-tile-border-radius: (<length-percentage>) Controls the corner radius of the radio tile.
  * @prop --tct-radio-tile-label-font-size: (<length-percentage>) Controls the font size of the radio tile label.
+ * @prop --tct-radio-tile-padding: (<length-percentage>+) Controls the inner padding of a radio tile.
+ * @prop --tct-radio-tile-divider-width: (<length>) Controls the width of the divider between radio tiles.
+ * @prop --tct-radio-tile-divider-color: (<color>) Controls the color of the divider between radio tiles.
+ * @prop --tct-radio-tile-hover-background-fill: (<color>) Controls the background of an unselected radio tile on hover.
+ * @prop --tct-radio-tile-active-background-fill: (<color>) Controls the background of an unselected radio tile while active.
+ * @prop --tct-radio-tile-checked-background-fill: (<color>) Controls the background of a selected radio tile.
+ * @prop --tct-radio-tile-checked-label-color: (<color>) Controls the label color of a selected radio tile.
+ * @prop --tct-radio-tile-indicator-height: (<length>) Controls the height of the selected radio tile indicator.
+ * @prop --tct-radio-tile-indicator-border-radius: (<length-percentage>+) Controls the selected radio tile indicator radius.
  * @prop --tct-radio-tile-checked-stroke-color: (<color>) Controls the border color of the radio tile when checked.
- * @prop --tct-radio-tile-focus-stroke-color: (<color>) Controls the border color of the radio tile when focused.
  * @prop --tct-radio-tile-focus-box-shadow: (*) Controls the box shadow of the radio tile when focused via keyboard.
  */
 :host {
   display: block;
+  letter-spacing: var(--tct-radio-label-letter-spacing, inherit);
+}
+
+:host([checked]:not([checked=false])) {
+  letter-spacing: var(--tct-radio-label-letter-spacing-checked, var(--tct-radio-checked-label-letter-spacing, var(--tct-checkbox-selected-letter-spacing, var(--tct-radio-label-letter-spacing, inherit))));
+}
+
+:host(:active) {
+  letter-spacing: var(--tct-radio-label-letter-spacing-active, var(--tct-radio-label-letter-spacing, inherit));
 }
 
 .radio-container {
-  --comp-radio-margin: var(--tct-radio-margin, var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px)) var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px)));
-  --comp-big-circle-fill: var(--tct-radio-background-fill, transparent);
-  --comp-big-circle-stroke: var(--tct-radio-background-stroke, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));
-  --comp-big-circle-stroke-width: var(--tct-radio-background-stroke-width, var(--tct-radio-stroke-width, 2));
-  --comp-big-circle-transition: fill var(--tct-radio-background-transition, var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease)));
-  --comp-small-circle-fill: var(--tct-radio-select-fill-default, transparent);
+  --comp-radio-mark-track-size: 36px;
+  --comp-radio-mark-size: var(--tct-radio-mark-size, 20px);
+  --comp-radio-mark-fill: var(--tct-radio-background-fill, transparent);
+  --comp-radio-mark-stroke: var(--tct-radio-background-stroke, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));
+  --comp-radio-mark-stroke-width: var(--tct-radio-background-stroke-width, var(--tct-radio-stroke-width, 2));
+  --comp-radio-mark-color-transition: background-color var(--tct-radio-background-transition, var(--tct-checkbox-tween, var(--app-tween-1, 0.15s ease))), border-color var(--tct-radio-background-transition, var(--tct-checkbox-tween, var(--app-tween-1, 0.15s ease)));
+  --comp-radio-mark-dot-fill: var(--tct-radio-select-fill-default, transparent);
   --comp-label-content-color: var(--tct-radio-label-color, inherit);
   --comp-label-content-font-weight: var(--tct-radio-label-font-weight, var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400)));
-  --comp-label-content-letter-spacing: var(--tct-radio-label-letter-spacing, 0.25);
-  --comp-label-content-margin-right: var(--tct-radio-label-margin-right, 1rem);
-  --comp-label-content-gap: var(--tct-radio-label-gap, var(--tct-scale-1, var(--app-scale-1x, 5px)));
-  --comp-label-hidden-columns: var(--tct-radio-hidden-columns, var(--tct-radio-label-hidden-columns, 18px 1fr));
-  --comp-svg-transition: box-shadow var(--tct-radio-transition, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));
-  --comp-svg-box-shadow: var(--tct-radio-box-shadow, none);
-  --comp-big-circle-fill-checked: var(--tct-radio-checked-background-fill, var(--comp-big-circle-fill));
-  --comp-big-circle-stroke-checked: var(--tct-radio-checked-stroke-color, var(--comp-big-circle-stroke));
-  --comp-small-circle-fill-checked: var(--tct-radio-select-fill-checked, var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))));
-  --comp-label-content-font-weight-checked: var(--tct-radio-label-font-weight-checked, var(--tct-radio-checked-label-font-weight, var(--tct-checkbox-selected-font-weight, 600)));
-  --comp-label-content-letter-spacing-checked: var(--tct-radio-label-letter-spacing-checked, var(--tct-radio-checked-label-letter-spacing, var(--tct-checkbox-selected-letter-spacing, var(--comp-label-content-letter-spacing))));
+  --comp-label-content-margin-right: var(--tct-radio-label-margin-right, 0);
+  --comp-label-content-gap: var(--tct-radio-label-gap, 0);
+  --comp-label-hidden-columns: var(--tct-radio-hidden-columns, var(--tct-radio-label-hidden-columns, var(--comp-radio-mark-track-size) 1fr));
+  --comp-radio-mark-transition: box-shadow var(--tct-radio-transition, var(--tct-tween-1, var(--app-tween-1, 0.15s ease))), transform var(--tct-radio-transition, var(--tct-tween-1, var(--app-tween-1, 0.15s ease)));
+  --comp-radio-mark-box-shadow: var(--tct-radio-box-shadow, none);
+  --comp-radio-mark-fill-checked: var(--tct-radio-checked-background-fill, var(--t-base, #ffffff));
+  --comp-radio-mark-stroke-checked: var(--tct-radio-checked-stroke-color, var(--t-primary, #6a4a9e));
+  --comp-radio-mark-dot-fill-checked: var(--tct-radio-select-fill-checked, var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-primary, #6a4a9e)))));
+  --comp-label-content-font-weight-checked: var(--tct-radio-label-font-weight-checked, var(--tct-radio-checked-label-font-weight, var(--tct-checkbox-selected-font-weight, var(--comp-label-content-font-weight))));
   --comp-label-content-color-checked: var(--tct-radio-label-font-color-checked, var(--tct-radio-checked-label-font-color, var(--tct-radio-checked-label-color, inherit)));
-  --comp-big-circle-fill-active: var(--tct-radio-background-fill-active, var(--comp-big-circle-fill));
-  --comp-big-circle-stroke-active: var(--tct-radio-background-stroke-active, var(--comp-big-circle-stroke));
-  --comp-small-circle-fill-active: var(--tct-radio-selected-fill-active, var(--comp-small-circle-fill-checked));
+  --comp-radio-mark-fill-active: var(--tct-radio-background-fill-active, #e8ddef);
+  --comp-radio-mark-stroke-active: var(--tct-radio-background-stroke-active, var(--t-primary-d2, #553b7e));
+  --comp-radio-mark-dot-fill-active: var(--tct-radio-selected-fill-active, var(--comp-radio-mark-dot-fill-checked));
   --comp-label-content-font-weight-active: var(--tct-radio-label-font-weight-active, var(--comp-label-content-font-weight));
-  --comp-label-content-letter-spacing-active: var(--tct-radio-label-letter-spacing-active, var(--comp-label-content-letter-spacing));
   --comp-label-content-color-active: var(--tct-radio-label-color-active, var(--comp-label-content-color));
-  --comp-big-circle-fill-hover: var(--tct-radio-hover-background-fill, var(--comp-big-circle-fill));
-  --comp-big-circle-stroke-hover: var(--tct-radio-hover-stroke-color, var(--comp-big-circle-stroke));
+  --comp-radio-mark-fill-hover: var(--tct-radio-hover-background-fill, #f3eefa);
+  --comp-radio-mark-stroke-hover: var(--tct-radio-hover-stroke-color, var(--t-primary, #6a4a9e));
+  --comp-radio-mark-stroke-checked-hover: var(--tct-radio-checked-hover-stroke-color, var(--t-primary-d2, #553b7e));
   --comp-label-content-color-hover: var(--tct-radio-hover-label-color, var(--comp-label-content-color));
-  --comp-big-circle-fill-focus: var(--tct-radio-focus-background-fill, var(--comp-big-circle-fill));
-  --comp-big-circle-stroke-focus: var(--tct-radio-focus-stroke-color, var(--comp-big-circle-stroke));
+  --comp-radio-mark-fill-focus: var(--tct-radio-focus-background-fill, var(--comp-radio-mark-fill));
+  --comp-radio-mark-stroke-focus: var(--tct-radio-focus-stroke-color, var(--comp-radio-mark-stroke));
   --comp-label-content-color-focus: var(--tct-radio-focus-label-color, var(--comp-label-content-color));
-  --comp-svg-box-shadow-focus-visible: var(--tct-radio-box-shadow-focus-visible, var(--tct-radio-focus-box-shadow, var(--const-double-focus-ring)));
-  margin: var(--comp-radio-margin);
+  --comp-radio-mark-box-shadow-focus-visible: var(--tct-radio-box-shadow-focus-visible, var(--tct-radio-focus-box-shadow, var(--const-double-focus-ring)));
 }
 .radio-container label[for] {
-  color: var(---comp-label-content-color);
-  font-weight: var(---comp-label-content-font-weight);
+  color: var(--comp-label-content-color);
+  font-weight: var(--comp-label-content-font-weight);
   font-size: var(--tct-radio-label-font-size, var(--const-px-14, 14px));
-  align-items: start;
+  align-items: center;
   cursor: pointer;
-  margin-right: var(---comp-label-content-margin-right);
+  margin-right: var(--comp-label-content-margin-right);
   display: grid;
-  grid-template-columns: 18px 1fr;
+  grid-template-columns: var(--comp-radio-mark-track-size) 1fr;
   gap: var(--comp-label-content-gap);
-  letter-spacing: var(--comp-label-content-letter-spacing);
+  min-height: var(--tct-radio-min-height, var(--comp-radio-mark-track-size));
+  user-select: none;
 }
 .radio-container label[for].label-hidden {
   grid-template-columns: var(--comp-label-hidden-columns);
@@ -195,116 +212,153 @@ button {
 .radio-container label[for] .description-content {
   grid-column: 2;
 }
-.radio-container svg {
+.radio-container .radio-mark {
+  --comp-radio-mark-current-fill: var(--comp-radio-mark-fill);
+  --comp-radio-mark-current-stroke: var(--comp-radio-mark-stroke);
+  border-radius: 50%;
+  box-shadow: var(--comp-radio-mark-box-shadow);
+  height: var(--comp-radio-mark-size);
+  justify-self: center;
+  overflow: hidden;
+  position: relative;
+  transition: var(--comp-radio-mark-transition);
+  width: var(--comp-radio-mark-size);
+}
+.radio-container .radio-mark::before {
+  background: var(--comp-radio-mark-current-fill);
+  border-color: var(--comp-radio-mark-current-stroke);
   border-radius: 50%;
-  transition: var(--comp-svg-transition);
-  outline: 0;
-  width: 100%;
-  box-shadow: var(--comp-svg-box-shadow);
+  border-style: solid;
+  border-width: calc(var(--comp-radio-mark-stroke-width) * 1px);
+  box-sizing: border-box;
+  content: "";
+  height: calc(var(--comp-radio-mark-size) - 2px + var(--comp-radio-mark-stroke-width) * 1px);
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: var(--comp-radio-mark-color-transition);
+  width: calc(var(--comp-radio-mark-size) - 2px + var(--comp-radio-mark-stroke-width) * 1px);
 }
-.radio-container .big-circle {
-  fill: var(--comp-big-circle-fill);
-  stroke: var(--comp-big-circle-stroke);
-  stroke-width: var(--comp-big-circle-stroke-width);
-  transition: var(--comp-big-circle-transition);
+.radio-container .radio-mark::after {
+  background: var(--comp-radio-mark-dot-fill);
+  border-radius: 50%;
+  content: "";
+  height: calc(var(--comp-radio-mark-size) / 2);
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform var(--tct-radio-transition, var(--tct-tween-1, var(--app-tween-1, 0.15s ease)));
+  width: calc(var(--comp-radio-mark-size) / 2);
 }
-.radio-container .small-circle {
-  fill: var(--comp-small-circle-fill);
+.radio-container input:focus-visible {
+  box-shadow: none;
 }
-.radio-container input:checked + label .big-circle {
-  fill: var(--comp-big-circle-fill-checked);
-  stroke: var(--comp-big-circle-stroke-checked);
+.radio-container input:checked + label .radio-mark {
+  --comp-radio-mark-current-fill: var(--comp-radio-mark-fill-checked);
+  --comp-radio-mark-current-stroke: var(--comp-radio-mark-stroke-checked);
 }
-.radio-container input:checked + label .small-circle {
-  fill: var(--comp-small-circle-fill-checked);
+.radio-container input:checked + label .radio-mark::after {
+  background: var(--comp-radio-mark-dot-fill-checked);
+  transform: translate(-50%, -50%) scale(1);
 }
 .radio-container input:checked + label .label-content {
   font-weight: var(--comp-label-content-font-weight-checked);
-  letter-spacing: var(--comp-label-content-letter-spacing-checked);
   color: var(--comp-label-content-color-checked);
 }
-.radio-container input:hover + label .big-circle {
-  fill: var(--comp-big-circle-fill-hover);
-  stroke: var(--comp-big-circle-stroke-hover);
+.radio-container input:hover:not(:disabled) + label .radio-mark {
+  --comp-radio-mark-current-fill: var(--comp-radio-mark-fill-hover);
+  --comp-radio-mark-current-stroke: var(--comp-radio-mark-stroke-hover);
 }
-.radio-container input:hover + label .label-content {
+.radio-container input:hover:not(:disabled) + label .label-content {
   color: var(--comp-label-content-color-hover);
 }
-.radio-container input:active + label .big-circle {
-  fill: var(--comp-big-circle-fill-active);
-  stroke: var(--comp-big-circle-stroke-active);
+.radio-container input:active:not(:disabled) + label .radio-mark {
+  --comp-radio-mark-current-fill: var(--comp-radio-mark-fill-active);
+  --comp-radio-mark-current-stroke: var(--comp-radio-mark-stroke-active);
+  transform: scale(0.9);
 }
-.radio-container input:active + label .small-circle {
-  fill: var(--comp-small-circle-fill-active);
+.radio-container input:active:not(:disabled) + label .radio-mark::after {
+  background: var(--comp-radio-mark-dot-fill-active);
 }
-.radio-container input:active + label .label-content {
+.radio-container input:active:not(:disabled) + label .label-content {
   font-weight: var(--comp-label-content-font-weight-active);
-  letter-spacing: var(--comp-label-content-letter-spacing-active);
   color: var(--comp-label-content-color-active);
 }
-.radio-container input:focus + label .big-circle {
-  fill: var(--comp-big-circle-fill-focus);
-  stroke: var(--comp-big-circle-stroke-focus);
+.radio-container input:focus + label .radio-mark {
+  --comp-radio-mark-current-fill: var(--comp-radio-mark-fill-focus);
+  --comp-radio-mark-current-stroke: var(--comp-radio-mark-stroke-focus);
 }
 .radio-container input:focus + label .label-content {
   color: var(--comp-label-content-color-focus);
 }
-
-.radio-tile {
-  flex-basis: 100px;
-  flex-grow: 0;
-  flex-wrap: wrap;
+.radio-container input:focus-visible + label .radio-mark {
+  box-shadow: var(--comp-radio-mark-box-shadow-focus-visible);
 }
+.radio-container input:checked:hover:not(:disabled) + label .radio-mark {
+  --comp-radio-mark-current-stroke: var(--comp-radio-mark-stroke-checked-hover);
+}
+
 .radio-tile label[for] {
   color: var(--tct-radio-label-font-color, var(--tct-radio-label-color, inherit));
   align-items: center;
-  border-radius: var(--tct-radio-tile-border-radius, var(--app-border-radius-1, 3px));
-  border: 2px solid var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));
-  background: var(--tct-radio-background-fill, transparent);
+  border: 0;
+  background: var(--tct-radio-background-fill, var(--t-base, #ffffff));
   cursor: pointer;
   display: block;
   font-size: var(--tct-radio-tile-label-font-size, var(--tct-radio-label-font-size, var(--const-px-14, 14px)));
-  padding: 10px;
+  overflow: hidden;
+  padding: var(--tct-radio-tile-padding, 10px 20px);
   position: relative;
   text-align: center;
-  transition: border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
+  transition: background var(--tct-tween-1, var(--app-tween-1, 0.15s ease)), color var(--tct-tween-1, var(--app-tween-1, 0.15s ease)), box-shadow var(--tct-tween-1, var(--app-tween-1, 0.15s ease));
   white-space: nowrap;
+  user-select: none;
+}
+.radio-tile input:focus-visible {
+  box-shadow: none;
 }
 .radio-tile input:checked + label {
-  border-color: var(--tct-radio-tile-checked-stroke-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);
+  background: var(--tct-radio-tile-checked-background-fill, var(--tct-radio-checked-background-fill, #f3eefa));
+  color: var(--tct-radio-tile-checked-label-color, var(--tct-radio-checked-label-color, var(--t-primary, #6a4a9e)));
 }
 .radio-tile input:checked + label:after {
-  border-bottom-width: 3px;
-  border-bottom: 5px solid var(--tct-radio-tile-checked-stroke-color, 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;
-  border-right: 8px solid transparent;
+  background: var(--tct-radio-tile-checked-stroke-color, var(--t-primary, #6a4a9e));
+  border-radius: var(--tct-radio-tile-indicator-border-radius, 9999px 9999px 0 0);
   bottom: 0;
   content: "";
-  height: 0;
-  left: 50%;
-  margin-left: -5px;
+  height: var(--tct-radio-tile-indicator-height, 2px);
+  left: 0;
   position: absolute;
-  width: 0;
+  right: 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);
+.radio-tile input:not(:checked):hover:not(:disabled) + label {
+  background: var(--tct-radio-tile-hover-background-fill, #fafafa);
   color: var(--tct-radio-hover-label-color, var(--tct-radio-label-color, inherit));
 }
-.radio-tile input:focus + label, .radio-tile input:focus:checked + label {
-  --comp-radio-tile-focus-box-shadow-fallback: var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);
-  border-color: var(--tct-radio-tile-focus-stroke-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(--tct-radio-tile-focus-box-shadow, var(--comp-radio-tile-focus-box-shadow-fallback));
-  color: var(--tct-radio-focus-label-color, var(--tct-radio-checked-label-color, inherit));
+.radio-tile input:not(:checked):active:not(:disabled) + label {
+  background: var(--tct-radio-tile-active-background-fill, var(--t-gray-14, #f2f2f2));
 }
-.radio-tile input:focus:checked + label:after {
-  border-bottom: 5px solid var(--tct-radio-tile-focus-stroke-color, var(--tct-radio-focus-stroke-color, #2e2e2e));
+.radio-tile input:focus-visible + label {
+  z-index: 1;
+  box-shadow: var(--tct-radio-tile-focus-box-shadow, var(--const-double-focus-ring));
+}
+
+:host(:not(:first-child)) .radio-tile label[for] {
+  border-left: var(--tct-radio-tile-divider-width, 1px) solid var(--tct-radio-tile-divider-color, var(--t-gray-13, #e6e6e6));
+}
+
+:host(:first-child) .radio-tile label[for] {
+  border-radius: var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px)) 0 0 var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px));
+}
+
+:host(:last-child) .radio-tile label[for] {
+  border-radius: 0 var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px)) var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px)) 0;
+}
+
+:host(:only-child) .radio-tile label[for] {
+  border-radius: var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px));
 }
 
 input:disabled + label[for] {

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

@@ -90,7 +90,7 @@ export class Q2Radio {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '699970d6bed602cbd0e6954d36ca3b03b2122fdc', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: 'edaaa6bbba5eb256fed9e02863b3cf3b706b4e73', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { key: 'fd0c67c56535a53f3cbbeddd32f3817b430b9075', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { key: '2cfaa2fa7393ff369a319adb780f3667dc11194d', viewBox: "0 0 18 18" }, h("circle", { key: '157a1a5b430a0e63e695aec87bba111f60357444', class: "big-circle", stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { key: '4c4daede7d3414b1e7a9c037ba4d9e919300a9ca', class: "small-circle", stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { key: 'e9b3ba9aceb316988bf570a3dd50cf99166fb248', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: 'a6ae2c01e62af90255f836a69458d530136daccb' }))))));
+        return (h("div", { key: '1aafcfbdb7d6e2863618d6741bc12491a109ec80', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: '1989707753be2d6b8bc8c69098a5c9bf27af99b7', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { key: '93a6f7f8d718c8070c4d4d88c3b48905f518e166', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("span", { key: 'f351a1aef39845bbb1bbd360037d36486de27cd9', class: "radio-mark", "aria-hidden": "true" })), !this.hideLabel && (h("div", { key: 'c9cb25115cffc72dfbb52024b6343f16a0744fbc', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: '8d63e148c83fb247b60b719d3de8627c327efaa4' }))))));
     }
     static get is() { return "q2-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -250,7 +250,7 @@ export class Q2Radio {
                 "docs": {
                     "tags": [{
                             "name": "warning",
-                            "text": "Only use when a visible label is impractical."
+                            "text": "Hides the label visually. `label` text is still required for screenreader compliance."
                         }],
                     "text": "Hides the field's `<label>` element from view."
                 },
@@ -271,6 +271,9 @@ export class Q2Radio {
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "warning",
+                            "text": "Required for screen reader compliance even when `hideLabel` is `true`."
+                        }, {
                             "name": "localizable",
                             "text": undefined
                         }],

package/dist/collection/components/q2-radio/test/q2-radio-test.vr.js

@@ -5,12 +5,24 @@ const VARIANTS = [
     {
         name: 'unchecked',
         html: `<q2-radio value="1" label="Default"></q2-radio>`,
-        states: ['resting', 'hover', 'focus'],
+        states: ['resting', 'hover', 'focus', 'active'],
+    },
+    {
+        name: 'letter-spacing-override',
+        html: `<style>
+                q2-radio {
+                    letter-spacing: 0.12em !important;
+                }
+            </style>
+            <div style="width: 220px">
+                <q2-radio value="1" label="Send the payment on the next business day" checked></q2-radio>
+            </div>`,
+        states: ['resting'],
     },
     {
         name: 'checked',
         html: `<q2-radio value="1" label="Default" checked></q2-radio>`,
-        states: ['resting', 'hover', 'focus'],
+        states: ['resting', 'hover', 'focus', 'active'],
     },
     {
         name: 'disabled-unchecked',
@@ -58,6 +70,15 @@ const focusCase = (variant, theme) => {
         await expect(page).toHaveScreenshot(`q2-radio--${variant.name}--focus--${theme}.png`);
     });
 };
+const activeCase = (variant, theme) => {
+    test(`q2-radio--${variant.name}--active — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.locator('q2-radio').hover();
+        await page.mouse.down();
+        await expect(page).toHaveScreenshot(`q2-radio--${variant.name}--active--${theme}.png`);
+        await page.mouse.up();
+    });
+};
 test.describe('q2-radio — variants × themes', () => {
     for (const variant of VARIANTS) {
         for (const theme of THEMES) {
@@ -67,6 +88,8 @@ test.describe('q2-radio — variants × themes', () => {
                 hoverCase(variant, theme);
             if (variant.states.includes('focus'))
                 focusCase(variant, theme);
+            if (variant.states.includes('active'))
+                activeCase(variant, theme);
         }
     }
 });