@reliability-design/web 1.2.0 → 1.3.0

package/dist/components/rel-radio/rel-radio.ts

@@ -41,16 +41,15 @@ export class RelRadio extends LitElement {
     .rel-radio-group {
       display: flex;
       flex-direction: column;
+      align-items: flex-start;
       gap: var(--rel-spacing-space-xs);
     }
 
     .rel-radio-option {
-      display: flex;
+      display: inline-flex;
       flex-direction: column;
       gap: var(--rel-spacing-space-3xs);
       cursor: pointer;
-      padding: 4px 6px;
-      margin: -4px -6px;
     }
 
     .rel-radio-option.disabled {
@@ -58,10 +57,6 @@ export class RelRadio extends LitElement {
       cursor: not-allowed !important;
     }
 
-    .rel-radio-option:not(.disabled):hover {
-      background: var(--rel-color-bg-hover, #f5f5f5);
-    }
-
     .rel-radio-option:not(.disabled):hover .radio-custom {
       border-color: #525252;
     }
@@ -75,8 +70,8 @@ export class RelRadio extends LitElement {
     }
 
     .rel-radio-option:focus-within:has(input:focus-visible) {
-      outline: 1px solid #000000;
-      outline-offset: 0;
+      outline: 1.5px solid #000000;
+      outline-offset: 1px;
     }
 
     .radio-main {
@@ -109,15 +104,15 @@ export class RelRadio extends LitElement {
     }
 
     .radio-label {
-      font-size: var(--rel-fontSizes-sm);
+      font-size: var(--rel-fontSizes-md, 16px);
       font-weight: var(--rel-fontWeights-medium);
       color: var(--rel-color-text-primary);
     }
 
     .radio-supporting {
-      font-size: var(--rel-fontSizes-xs);
+      font-size: var(--rel-fontSizes-sm, 12px);
       margin-left: 28px;
-      color: var(--rel-color-text-placeholder);
+      color: #7D7D7D;
     }
 
     /* Error state — unchecked only */
@@ -135,7 +130,7 @@ export class RelRadio extends LitElement {
 
     /* Error message below group */
     .error-message {
-      font-size: var(--rel-fontSizes-xs, 10px);
+      font-size: var(--rel-fontSizes-sm, 12px);
       color: #CE3131;
       margin-top: var(--rel-spacing-space-2xs, 4px);
     }
@@ -158,7 +153,8 @@ export class RelRadio extends LitElement {
 
     :host-context([data-theme="dark"]) .rel-radio-option:focus-within:has(input:focus-visible),
     :host-context(.dark) .rel-radio-option:focus-within:has(input:focus-visible) {
-      outline-color: var(--rel-color-text-primary, #F5F5F5);
+      outline: 1.5px solid var(--rel-color-text-primary, #F5F5F5);
+      outline-offset: 1px;
     }
   `;
 
@@ -180,10 +176,14 @@ export class RelRadio extends LitElement {
   registerOnTouched(fn: () => void): void { this._onTouched = fn; }
   writeValue(value: string): void { this.checked = value === this.value; }
 
+  private get hasSelection(): boolean {
+    return this.selectedValue !== null && this.selectedValue !== "";
+  }
+
   private renderOption(option: RadioOption) {
     const isChecked = this.selectedValue === option.value;
     const isDisabled = this.disabled || option.disabled;
-    const isErrorActive = this.error && !isChecked;
+    const isErrorActive = this.error && !this.hasSelection;
 
     const classes = [
       "rel-radio-option",
@@ -220,7 +220,7 @@ export class RelRadio extends LitElement {
       <div class="rel-radio-group">
         ${this.options.map((o) => this.renderOption(o))}
       </div>
-      ${this.error && this.errorMessage
+      ${this.error && this.errorMessage && !this.hasSelection
         ? html`<div class="error-message">${this.errorMessage}</div>`
         : ""}
     `;