q2-tecton-elements 1.71.2 → 1.72.0

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: '8fbe0ad9c8b0712fd51dbac67baae6209ebf2532', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: 'a9322154f304963731fb3d6ee99632c06938f27f', 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: '234f95d4c4656e4325a15853bacf888d7a4ae446', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("span", { key: 'ac98c34734a5e54b347cc2a48dc23d3ea2eb31ce', class: "radio-mark", "aria-hidden": "true" })), !this.hideLabel && (h("div", { key: '41dd2c195bc03dd8af8d5722e4aa2323cbeaab76', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: '595014c6a32c2e98f7612dc51f0bd89579770988' }))))));
     }
     static get is() { return "q2-radio"; }
     static get encapsulation() { return "shadow"; }

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);
         }
     }
 });

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

@@ -97,12 +97,18 @@ button {
  * @prop --tct-radio-group-border-radius: (<length-percentage>) Controls the corner radius of the radio options container.
  * @prop --tct-radio-group-border-width: (<length>+) Controls the border width of the radio options container.
  * @prop --tct-radio-group-error-border-color: (<color>) Controls the border color of the radio options container in the error state.
- * @prop --tct-radio-group-tile-gap: (<length-percentage>) Controls the gap between radio tiles in the tile layout.
+ * @prop --tct-radio-group-horizontal-gap: (<length-percentage>) Controls the gap between horizontal non-tile radio options.
+ * @prop --tct-radio-group-justify-content: (<custom-ident>) Controls how non-tile radio options are aligned along the layout direction.
+ * @prop --tct-radio-group-separator-color: (<color>) Controls the color of separators between vertical non-tile radio options.
+ * @prop --tct-radio-group-separator-width?: (<length>) Controls the optional thickness of separators between vertical non-tile radio options.
+ * @prop --tct-radio-group-tile-border-color: (<color>) Controls the border color around the tiled radio group.
+ * @prop --tct-radio-group-tile-border-radius: (<length-percentage>) Controls the corner radius of the tiled radio group.
  * @prop --tct-radio-group-label-column-gap: (<length-percentage>) Controls the column gap between the radio-group label text and trailing icon.
  * @prop --tct-radio-group-label-font-color?: (<color>) Controls the optional text color of the radio-group label.
  * @prop --tct-radio-group-label-font-size?: (<length-percentage>) Controls the optional font size of the radio-group label.
  * @prop --tct-radio-group-label-font-weight: (<number>) Controls the font weight of the radio-group label.
  * @prop --tct-radio-group-label-letter-spacing?: (<length>) Controls the optional letter spacing of the radio-group label.
+ * @prop --tct-radio-group-label-line-height?: (<length-percentage>) Controls the optional line height of the radio-group label.
  * @prop --tct-radio-group-label-text-transform?: (<custom-ident>) Controls the optional text transform of the radio-group label.
  * @prop --tct-radio-group-label-optional-color: (<color>) Controls the text color of the "(optional)" indicator next to the label.
  * @prop --tct-radio-group-label-optional-font-size: (<length-percentage>) Controls the font size of the "(optional)" indicator next to the label.
@@ -132,6 +138,7 @@ fieldset {
   font-weight: var(--tct-radio-group-label-font-weight, 600);
   text-transform: var(--tct-radio-group-label-text-transform, none);
   letter-spacing: var(--tct-radio-group-label-letter-spacing, inherit);
+  line-height: var(--tct-radio-group-label-line-height, inherit);
 }
 .label-row q2-icon {
   grid-area: icon;
@@ -185,6 +192,29 @@ legend.sr-only {
 :host([has-error=false]) .options-container {
   border-color: transparent;
 }
+.options-container.horizontal, .options-container.vertical {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: var(--tct-radio-group-justify-content, start);
+}
+.options-container.horizontal {
+  flex-direction: row;
+  column-gap: var(--tct-radio-group-horizontal-gap, var(--app-scale-4x, 20px));
+}
+.options-container.vertical {
+  flex-direction: column;
+}
+.options-container.vertical ::slotted(q2-radio:not(:first-child)) {
+  position: relative;
+}
+.options-container.vertical ::slotted(q2-radio:not(:first-child))::before {
+  border-block-start: var(--tct-radio-group-separator-width, 0) solid var(--tct-radio-group-separator-color, var(--t-gray-12, #d9d9d9));
+  content: "";
+  inset-block-start: calc(var(--tct-radio-group-separator-width, 0) / -2);
+  inset-inline: 0;
+  pointer-events: none;
+  position: absolute;
+}
 
 .tile-container.left {
   justify-content: start;
@@ -193,6 +223,13 @@ legend.sr-only {
   justify-content: end;
 }
 .tile-container .options-container {
-  gap: var(--tct-radio-group-tile-gap, var(--t-radio-group-tile-gap, var(--app-scale-2x, 10px)));
+  border-color: var(--tct-radio-group-tile-border-color, var(--t-gray-13, #e6e6e6));
+  border-radius: var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px));
+  flex-grow: 0;
+  flex-wrap: nowrap;
   justify-content: inherit;
+  overflow: visible;
+}
+:host([has-error]) .tile-container .options-container {
+  border-color: var(--tct-radio-group-error-border-color, var(--const-stoplight-alert, #d20a0a));
 }

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

@@ -12,11 +12,22 @@ export class Q2RadioGroup {
         // #region Own Properties
         this._id = `radio-group-${createGuid()}`;
         // #endregion
+        // #region State Properties
+        this.responsiveOrientation = 'vertical';
+        // #endregion
         // #region Public Property API
         /** Determines if all radios in the group are put into a `disabled` state. */
         this.disabled = false;
         /** Determines if the component should display in an errant state. */
         this.hasError = false;
+        /** The layout direction of radio options when `tileLayout` is not enabled. */
+        this.orientation = 'vertical';
+        /**
+         * The width, in pixels, below which a horizontal non-tile layout displays vertically.
+         *
+         * @info The component determines this based on its own width, not the browser window.
+         */
+        this.orientationThreshold = 440;
         /** Provides alignment direction for tile-style radio group. */
         this.tileAlignment = 'center';
         this.checkedRadioExists = () => {
@@ -32,6 +43,10 @@ export class Q2RadioGroup {
                     this.radioElements[0].tabIndex = 0;
             }
         };
+        this.handleResize = (event) => {
+            const width = event.detail.entries[0].contentRect.width;
+            this.responsiveOrientation = width < this.orientationThreshold ? 'vertical' : 'horizontal';
+        };
         this.onInnerRadioChange = (event) => {
             event.stopImmediatePropagation();
             if (this.readonly)
@@ -156,6 +171,9 @@ export class Q2RadioGroup {
     }
     // #endregion
     // #region Local Methods
+    get computedOrientation() {
+        return this.orientation === 'horizontal' ? this.responsiveOrientation : 'vertical';
+    }
     get inputId() {
         return this._id;
     }
@@ -169,7 +187,7 @@ export class Q2RadioGroup {
             return (h("div", { class: `tile-container ${alignment}` }, h("div", { class: "options-container" }, h("slot", null))));
         }
         else {
-            return (h("div", { class: "options-container" }, h("slot", null)));
+            return (h("div", { class: `options-container ${this.computedOrientation}` }, h("slot", null)));
         }
     }
     // #endregion
@@ -178,7 +196,7 @@ export class Q2RadioGroup {
         const showLabel = this.label || this.optional || this.readonly;
         const { hasError } = this;
         const showLabelRow = (showLabel && !this.hideLabel) || hasError;
-        return (h(Fragment, { key: '9aadfcdafda1190aac1d1d23f02d73d9d0982cfb' }, showLabelRow && (h("div", { key: '80ffd1095a810f95e89b839bd4c9e9b10b10c56a', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '82663c3dc58235e5a15c6a96d61c0f899e51b34c', class: "group-legend" }, renderLabel(this)), hasError && (h("q2-icon", { key: '75aab19da924c83a43c311c8718213e554e1e41d', type: "error", "test-id": "iconError" })))), h("fieldset", { key: 'df81b71c57ac1c2b7812b1e12dc4f85b95563895', onChange: this.onInnerRadioChange, "aria-invalid": hasError ? `${hasError}` : undefined }, showLabel && h("legend", { key: 'c3aff2496cb12cfaa774aac545f399508f0a679c', class: "sr-only" }, renderLabel(this)), this.inputDom())));
+        return (h(Fragment, { key: '25ec8b2089b54a5d968c3cfb99a1740c5dcbd0d0' }, showLabelRow && (h("div", { key: '1ff216a3e27dd4284dbb2f0300e25728f376df62', class: "label-row" }, showLabel && !this.hideLabel && h("div", { key: '462c3833b83b524426ef2f937e0bf60c1cc841f7', class: "group-legend" }, renderLabel(this)), hasError && (h("q2-icon", { key: '249e09338abad9e55fa472bcc9807ce2297cd4c3', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '2085294bc3fc10c2f3cf20e6a1a0553cb0829e7d', onChange: this.onInnerRadioChange, "aria-invalid": hasError ? `${hasError}` : undefined }, showLabel && h("legend", { key: 'ad2686c2e07d168a0cf1cbe0baf844121add6ecd', class: "sr-only" }, renderLabel(this)), h("q2-resize-observer", { key: 'e183977bae5484f38356b17b274d6e3125d4d603', onTctResize: this.handleResize, disabled: this.tileLayout || this.orientation !== 'horizontal' }, this.inputDom()))));
     }
     static get is() { return "q2-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -316,6 +334,49 @@ export class Q2RadioGroup {
                 "reflect": true,
                 "attribute": "optional"
             },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The layout direction of radio options when `tileLayout` is not enabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'vertical'"
+            },
+            "orientationThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "info",
+                            "text": "The component determines this based on its own width, not the browser window."
+                        }],
+                    "text": "The width, in pixels, below which a horizontal non-tile layout displays vertically."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation-threshold",
+                "defaultValue": "440"
+            },
             "readonly": {
                 "type": "boolean",
                 "mutable": false,
@@ -417,6 +478,11 @@ export class Q2RadioGroup {
             }
         };
     }
+    static get states() {
+        return {
+            "responsiveOrientation": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "change",