@dile/ui 3.9.2 → 3.9.3

package/components/radio-group/index.js

@@ -1,2 +1,3 @@
 export { DileRadioGroup } from './src/DileRadioGroup.js';
-export { DileRadio } from './src/DileRadio.js';
+export { DileRadio } from './src/DileRadio.js';
+export { DileRadioGroupDialog } from './src/DileRadioGroupDialog.js';

package/components/radio-group/radio-group-dialog.js

@@ -0,0 +1,6 @@
+import { DileRadioGroupDialog } from "./src/DileRadioGroupDialog.js";
+import './radio.js';
+
+if (!customElements.get("dile-radio-group-dialog")) {
+  window.customElements.define("dile-radio-group-dialog", DileRadioGroupDialog);
+}

package/components/radio-group/radio-group-dialog.spec.js

@@ -0,0 +1,126 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './radio-group-dialog.js';
+
+describe('dile-radio-group-dialog', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderRadioGroupDialog(attrs = '', dialogItems = []) {
+    document.body.innerHTML = `<dile-radio-group-dialog ${attrs}></dile-radio-group-dialog>`;
+    const el = document.body.querySelector('dile-radio-group-dialog');
+    el.dialogItems = dialogItems;
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the title and description', async () => {
+    const el = await renderRadioGroupDialog('title="Select Option" description="Choose one option below"');
+
+    expect(el.shadowRoot.querySelector('.dialog-title').textContent).toBe('Select Option');
+    expect(el.shadowRoot.querySelector('.dialog-description').textContent).toBe('Choose one option below');
+  });
+
+  it('renders dialog items with labels and values', async () => {
+    const dialogItems = [
+      { value: 'a', label: 'Option A', description: 'First option' },
+      { value: 'b', label: 'Option B', description: 'Second option' },
+    ];
+
+    const el = await renderRadioGroupDialog('title="Select Option"', dialogItems);
+
+    const items = el.shadowRoot.querySelectorAll('.radio-item-wrapper');
+    expect(items.length).toBe(2);
+  });
+
+  it('updates value when an option is clicked', async () => {
+    const dialogItems = [
+      { value: 'a', label: 'Option A' },
+      { value: 'b', label: 'Option B' },
+    ];
+
+    const el = await renderRadioGroupDialog('', dialogItems);
+
+    const wrappers = el.shadowRoot.querySelectorAll('.radio-item-wrapper');
+    wrappers[1].click();
+    await el.updateComplete;
+
+    expect(el.value).toBe('b');
+  });
+
+  it('renders items with optional description', async () => {
+    const dialogItems = [
+      { value: 'a', label: 'Option A', description: 'Description for A' },
+      { value: 'b', label: 'Option B' },
+    ];
+
+    const el = await renderRadioGroupDialog('', dialogItems);
+
+    const descriptions = el.shadowRoot.querySelectorAll('.item-description');
+    expect(descriptions.length).toBe(1);
+    expect(descriptions[0].textContent).toBe('Description for A');
+  });
+
+  it('exposes radiogroup and radio roles with the accessible name wired up', async () => {
+    const el = await renderRadioGroupDialog('title="Select Option"', [
+      { value: 'a', label: 'Option A' },
+      { value: 'b', label: 'Option B' },
+    ]);
+
+    const group = el.shadowRoot.querySelector('.radio-items');
+    expect(group.getAttribute('role')).toBe('radiogroup');
+    expect(group.getAttribute('aria-labelledby')).toBe(el.shadowRoot.querySelector('.dialog-title').id);
+
+    const wrappers = el.shadowRoot.querySelectorAll('.radio-item-wrapper');
+    wrappers.forEach(wrapper => {
+      expect(wrapper.getAttribute('role')).toBe('radio');
+      const labelId = wrapper.getAttribute('aria-labelledby');
+      expect(el.shadowRoot.getElementById(labelId).textContent.trim()).not.toBe('');
+    });
+  });
+
+  it('reflects the selected item via aria-checked and keeps a single tab stop', async () => {
+    const el = await renderRadioGroupDialog('', [
+      { value: 'a', label: 'Option A' },
+      { value: 'b', label: 'Option B' },
+    ]);
+    el.value = 'b';
+    await el.updateComplete;
+
+    const wrappers = el.shadowRoot.querySelectorAll('.radio-item-wrapper');
+    expect(wrappers[0].getAttribute('aria-checked')).toBe('false');
+    expect(wrappers[1].getAttribute('aria-checked')).toBe('true');
+    expect(wrappers[0].getAttribute('tabindex')).toBe('-1');
+    expect(wrappers[1].getAttribute('tabindex')).toBe('0');
+  });
+
+  it('selects an option on Space/Enter and moves selection with arrow keys', async () => {
+    const el = await renderRadioGroupDialog('', [
+      { value: 'a', label: 'Option A' },
+      { value: 'b', label: 'Option B' },
+      { value: 'c', label: 'Option C' },
+    ]);
+
+    const wrappers = el.shadowRoot.querySelectorAll('.radio-item-wrapper');
+    wrappers[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, composed: true }));
+    await el.updateComplete;
+    expect(el.value).toBe('a');
+
+    el.shadowRoot.querySelector('.radio-item-wrapper[aria-checked="true"]')
+      .dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, composed: true }));
+    await el.updateComplete;
+    expect(el.value).toBe('b');
+  });
+
+  it('marks the group and items as disabled', async () => {
+    const el = await renderRadioGroupDialog('disabled', [
+      { value: 'a', label: 'Option A' },
+    ]);
+
+    const group = el.shadowRoot.querySelector('.radio-items');
+    expect(group.getAttribute('aria-disabled')).toBe('true');
+    const wrapper = el.shadowRoot.querySelector('.radio-item-wrapper');
+    expect(wrapper.getAttribute('aria-disabled')).toBe('true');
+    expect(wrapper.getAttribute('tabindex')).toBe('-1');
+  });
+});

package/components/radio-group/radio-group.spec.js

@@ -41,4 +41,88 @@ describe('dile-radio-group', () => {
     expect(radios[1].selected).toBe(true);
     expect(radios[0].selected).toBe(false);
   });
+
+  it('exposes radiogroup role wired to the visible label', async () => {
+    const el = await renderRadioGroup(`
+      <dile-radio-group name="opt" label="Choose one">
+        <dile-radio value="a" label="A"></dile-radio>
+        <dile-radio value="b" label="B"></dile-radio>
+      </dile-radio-group>
+    `);
+
+    const group = el.shadowRoot.querySelector('div');
+    const labelId = el.shadowRoot.querySelector('.label').id;
+    expect(group.getAttribute('role')).toBe('radiogroup');
+    expect(group.getAttribute('aria-labelledby')).toBe(labelId);
+  });
+
+  it('gives each radio role=radio with aria-checked reflecting selection', async () => {
+    const el = await renderRadioGroup(`
+      <dile-radio-group name="opt" value="a">
+        <dile-radio value="a" label="A"></dile-radio>
+        <dile-radio value="b" label="B"></dile-radio>
+      </dile-radio-group>
+    `);
+    await new Promise(resolve => setTimeout(resolve, 210));
+    const radios = el.querySelectorAll('dile-radio');
+    await Promise.all([...radios].map(r => r.updateComplete));
+
+    const articles = [...radios].map(r => r.shadowRoot.querySelector('article'));
+    expect(articles[0].getAttribute('role')).toBe('radio');
+    expect(articles[0].getAttribute('aria-checked')).toBe('true');
+    expect(articles[1].getAttribute('aria-checked')).toBe('false');
+  });
+
+  it('keeps a single roving tab stop that follows the selection', async () => {
+    const el = await renderRadioGroup(`
+      <dile-radio-group name="opt">
+        <dile-radio value="a" label="A"></dile-radio>
+        <dile-radio value="b" label="B"></dile-radio>
+      </dile-radio-group>
+    `);
+    const radios = el.querySelectorAll('dile-radio');
+    await Promise.all([...radios].map(r => r.updateComplete));
+    let articles = [...radios].map(r => r.shadowRoot.querySelector('article'));
+    expect(articles[0].getAttribute('tabindex')).toBe('0');
+    expect(articles[1].getAttribute('tabindex')).toBe('-1');
+
+    radios[1].shadowRoot.querySelector('article').click();
+    await el.updateComplete;
+    await Promise.all([...radios].map(r => r.updateComplete));
+    articles = [...radios].map(r => r.shadowRoot.querySelector('article'));
+    expect(articles[0].getAttribute('tabindex')).toBe('-1');
+    expect(articles[1].getAttribute('tabindex')).toBe('0');
+  });
+
+  it('moves selection with arrow keys', async () => {
+    const el = await renderRadioGroup(`
+      <dile-radio-group name="opt" value="a">
+        <dile-radio value="a" label="A"></dile-radio>
+        <dile-radio value="b" label="B"></dile-radio>
+      </dile-radio-group>
+    `);
+    await new Promise(resolve => setTimeout(resolve, 210));
+
+    el.shadowRoot.querySelector('div').dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, composed: true })
+    );
+    await el.updateComplete;
+
+    expect(el.value).toBe('b');
+  });
+
+  it('propagates disabled state to the slotted radios', async () => {
+    const el = await renderRadioGroup(`
+      <dile-radio-group name="opt" disabled>
+        <dile-radio value="a" label="A"></dile-radio>
+      </dile-radio-group>
+    `);
+    const radio = el.querySelector('dile-radio');
+    await radio.updateComplete;
+
+    expect(radio.disabled).toBe(true);
+    const article = radio.shadowRoot.querySelector('article');
+    expect(article.getAttribute('tabindex')).toBe('-1');
+    expect(article.getAttribute('aria-disabled')).toBe('true');
+  });
 });

package/components/radio-group/src/DileRadio.js

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { radioCheckedIcon, circleBorderIcon } from '@dile/icons/index.js';
 import '../../icon/icon.js';
 
@@ -12,6 +13,14 @@ export class DileRadio extends LitElement {
             article {
                 display: flex;
                 align-items: center;
+                cursor: pointer;
+            }
+            article:focus-visible {
+                outline: var(--dile-radio-focus-outline, 2px solid #4A90E2);
+                outline-offset: 2px;
+            }
+            :host([disabled]) article {
+                cursor: not-allowed;
             }
             .radio {
                 margin-right: var(--dile-radio-space-between-label-and-icon, 0.4rem);
@@ -36,10 +45,16 @@ export class DileRadio extends LitElement {
       return {
         label: { type: String },
         value: { type: String },
-        selected: { 
+        selected: {
+            type: Boolean,
+            reflect: true
+        },
+        disabled: {
             type: Boolean,
             reflect: true
         },
+        tabbable: { type: Boolean },
+        decorative: { type: Boolean, reflect: true },
       };
     }
 
@@ -48,11 +63,22 @@ export class DileRadio extends LitElement {
         this.label = '';
         this.value = '';
         this.selected = false;
+        this.disabled = false;
+        this.tabbable = false;
+        this.decorative = false;
     }
 
     render() {
         return html`
-            <article @click=${this.select}>
+            <article
+                @click=${this.handleClick}
+                @keydown=${this.handleKeydown}
+                role="radio"
+                aria-checked="${this.selected}"
+                aria-disabled="${this.disabled}"
+                aria-hidden="${ifDefined(this.decorative ? 'true' : undefined)}"
+                tabindex="${this.decorative || this.disabled ? -1 : (this.tabbable ? 0 : -1)}"
+            >
                 <span class="radio">
                     <dile-icon .icon="${this.computeIcon(this.selected)}"></dile-icon>
                 </span>
@@ -63,6 +89,19 @@ export class DileRadio extends LitElement {
         `;
     }
 
+    handleClick() {
+        if (this.disabled || this.decorative) return;
+        this.select();
+    }
+
+    handleKeydown(e) {
+        if (this.disabled || this.decorative) return;
+        if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            this.select();
+        }
+    }
+
     select() {
         this.dispatchEvent(new CustomEvent('dile-radio-selected', {
             bubbles: true,
@@ -74,6 +113,10 @@ export class DileRadio extends LitElement {
         }));
     }
 
+    focus(options) {
+        this.shadowRoot?.querySelector('article')?.focus(options);
+    }
+
     computeIcon(selected) {
         return selected ? radioCheckedIcon : circleBorderIcon;
     }

package/components/radio-group/src/DileRadioGroup.js

@@ -1,9 +1,12 @@
 import { LitElement, html, css } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 import '../radio.js';
 import '../../input/input-message.js';
 import { labelStyles } from '../../input/index.js';
 
+const NAVIGATION_KEYS = ['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft', 'Home', 'End'];
+
 export class DileRadioGroup extends DileEmmitChange(LitElement) {
   static styles = [
     labelStyles,
@@ -43,6 +46,7 @@ export class DileRadioGroup extends DileEmmitChange(LitElement) {
     this.disabled = false;
     this.internals = this.attachInternals();
     this.message = '';
+    this._id = `dile-radio-group-${Math.random().toString(36).substr(2, 9)}`;
   }
 
   updated(changedProperties) {
@@ -52,6 +56,9 @@ export class DileRadioGroup extends DileEmmitChange(LitElement) {
       this.dispatchChangeEvent();
       this.internals.setFormValue(this.value);
     }
+    if(changedProperties.has('disabled')) {
+      this.propagateDisabled();
+    }
   }
 
   firstUpdated() {
@@ -60,20 +67,30 @@ export class DileRadioGroup extends DileEmmitChange(LitElement) {
       setTimeout(() => {
         this.doSelection(this.value);
       }, 200);
+    } else {
+      this.updateTabbable(this.getRadios());
     }
   }
-  
+
   render() {
     return html`
-      <div @dile-radio-selected=${this.changeValue}>
+      <div
+        role="radiogroup"
+        aria-labelledby="${ifDefined(this.label ? `${this._id}-label` : undefined)}"
+        aria-describedby="${ifDefined(this.message ? `${this._id}-message` : undefined)}"
+        aria-invalid="${this.errored ? 'true' : 'false'}"
+        aria-disabled="${this.disabled ? 'true' : 'false'}"
+        @dile-radio-selected=${this.changeValue}
+        @keydown=${this.handleKeydown}
+      >
         ${this.label
-            ? html`<span class="label">${this.label}</span>`
+            ? html`<span class="label" id="${this._id}-label">${this.label}</span>`
             : ""
         }
         <slot></slot>
       </div>
       ${this.message
-        ? html`<dile-input-message message="${this.message}" ?errored=${this.errored}></dile-input-message>`
+        ? html`<dile-input-message id="${this._id}-message" message="${this.message}" ?errored=${this.errored}></dile-input-message>`
         : ''
       }
     `;
@@ -91,7 +108,8 @@ export class DileRadioGroup extends DileEmmitChange(LitElement) {
 
   doSelection(newValue) {
     let numSelected = 0;
-    this.querySelectorAll('dile-radio').forEach(radio => {
+    const radios = this.getRadios();
+    radios.forEach(radio => {
       if (radio.value === newValue) {
         radio.selected = true;
         numSelected++;
@@ -102,6 +120,62 @@ export class DileRadioGroup extends DileEmmitChange(LitElement) {
     if (numSelected > 1) {
       throw new Error('More than one radio selected because have same value')
     }
+    this.updateTabbable(radios);
+  }
+
+  getRadios() {
+    return Array.from(this.querySelectorAll('dile-radio'));
+  }
+
+  updateTabbable(radios) {
+    if (!radios.length) return;
+    const selectedIndex = radios.findIndex(radio => radio.selected);
+    const tabbableIndex = selectedIndex !== -1 ? selectedIndex : 0;
+    radios.forEach((radio, index) => {
+      radio.tabbable = index === tabbableIndex;
+    });
+  }
+
+  propagateDisabled() {
+    this.getRadios().forEach(radio => {
+      radio.disabled = this.disabled;
+    });
+  }
+
+  getFocusableIndex(items, key, currentIndex) {
+    const count = items.length;
+    if (!count) return -1;
+    switch (key) {
+      case 'ArrowDown':
+      case 'ArrowRight':
+        return (currentIndex + 1) % count;
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        return (currentIndex - 1 + count) % count;
+      case 'Home':
+        return 0;
+      case 'End':
+        return count - 1;
+      default:
+        return -1;
+    }
+  }
+
+  handleKeydown(e) {
+    if (this.disabled) return;
+    if (!NAVIGATION_KEYS.includes(e.key)) return;
+    e.preventDefault();
+    const radios = this.getRadios();
+    if (!radios.length) return;
+    const currentIndex = radios.findIndex(radio => radio.value === this.value);
+    const nextIndex = currentIndex === -1
+      ? (e.key === 'End' ? radios.length - 1 : 0)
+      : this.getFocusableIndex(radios, e.key, currentIndex);
+    if (nextIndex === -1) return;
+    const nextRadio = radios[nextIndex];
+    if (nextRadio.disabled) return;
+    nextRadio.focus();
+    this.value = nextRadio.value;
   }
 
   dispatchChangeEvent() {

package/components/radio-group/src/DileRadioGroupDialog.js

@@ -0,0 +1,247 @@
+import { html, css } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { DileRadioGroup } from './DileRadioGroup.js';
+import '../../card/card.js';
+import '../radio.js';
+
+const NAVIGATION_KEYS = ['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft', 'Home', 'End'];
+
+export class DileRadioGroupDialog extends DileRadioGroup {
+  static styles = [
+    ...DileRadioGroup.styles,
+    css`
+      :host {
+        --dile-radio-group-dialog-title-color: var(--dile-on-background-color, #303030);
+        --dile-radio-group-dialog-title-font-size: 1.25rem;
+        --dile-radio-group-dialog-title-font-weight: 600;
+        --dile-radio-group-dialog-description-color: var(--dile-on-background-color, #303030);
+        --dile-radio-group-dialog-description-font-size: 0.95rem;
+        --dile-radio-group-dialog-description-margin-bottom: 1.5rem;
+        --dile-radio-group-dialog-item-margin-bottom: 1rem;
+        --dile-radio-group-dialog-item-gap: 0.25rem 0.75rem;
+        --dile-radio-group-dialog-item-label-color: var(--dile-on-background-color, #303030);
+        --dile-radio-group-dialog-item-label-font-size: 1rem;
+        --dile-radio-group-dialog-item-label-font-weight: 500;
+        --dile-radio-group-dialog-item-description-color: var(--dile-gray-dark-color, #555555);
+        --dile-radio-group-dialog-item-description-font-size: 0.875rem;
+        --dile-radio-group-dialog-item-description-margin-top: 0.5rem;
+      }
+
+      dile-card {
+        width: 100%;
+      }
+
+      .dialog-title {
+        color: var(--dile-radio-group-dialog-title-color);
+        font-size: var(--dile-radio-group-dialog-title-font-size);
+        font-weight: var(--dile-radio-group-dialog-title-font-weight);
+        margin: 0;
+        margin-bottom: 0.5rem;
+      }
+
+      .dialog-description {
+        color: var(--dile-radio-group-dialog-description-color);
+        font-size: var(--dile-radio-group-dialog-description-font-size);
+        margin: 0;
+        margin-bottom: var(--dile-radio-group-dialog-description-margin-bottom);
+      }
+
+      .radio-items {
+        display: flex;
+        flex-direction: column;
+        gap: var(--dile-radio-group-dialog-item-margin-bottom);
+      }
+
+      .radio-item-wrapper {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        grid-template-rows: auto auto;
+        gap: var(--dile-radio-group-dialog-item-gap, 0.5rem 0.75rem);
+        cursor: pointer;
+      }
+
+      .radio-item-wrapper:focus-visible {
+        outline: var(--dile-radio-group-dialog-item-focus-outline, 2px solid #4A90E2);
+        outline-offset: 2px;
+      }
+
+      .radio-item-wrapper dile-radio {
+        grid-row: 1 / 3;
+        grid-column: 1;
+        display: flex;
+        align-items: flex-start;
+        padding-top: 0.15rem;
+      }
+
+      .item-label {
+        grid-row: 1;
+        grid-column: 2;
+        color: var(--dile-radio-group-dialog-item-label-color);
+        font-size: var(--dile-radio-group-dialog-item-label-font-size);
+        font-weight: var(--dile-radio-group-dialog-item-label-font-weight);
+        margin: 0;
+        cursor: pointer;
+        user-select: none;
+        align-self: start;
+      }
+
+      .item-description {
+        grid-row: 2;
+        grid-column: 2;
+        color: var(--dile-radio-group-dialog-item-description-color);
+        font-size: var(--dile-radio-group-dialog-item-description-font-size);
+        margin: 0;
+      }
+
+      .radio-item-wrapper:not(:has(.item-description)) dile-radio {
+        grid-row: 1;
+      }
+
+      dile-radio {
+        --dile-radio-label-font-size: 0;
+        --dile-radio-space-between-label-and-icon: 0;
+      }
+
+      :host([disabled]) .radio-item-wrapper {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      dile-input-message {
+        margin-bottom: -5px;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      ...super.properties,
+      title: { type: String },
+      description: { type: String },
+      dialogItems: { type: Array },
+    };
+  }
+
+  constructor() {
+    super();
+    this.title = '';
+    this.description = '';
+    this.dialogItems = [];
+  }
+
+  render() {
+    return html`
+      <dile-card>
+        ${this.title
+          ? html`<h2 class="dialog-title" id="${this._id}-title">${this.title}</h2>`
+          : ''
+        }
+        ${this.description
+          ? html`<p class="dialog-description" id="${this._id}-description">${this.description}</p>`
+          : ''
+        }
+        <div
+          class="radio-items"
+          role="radiogroup"
+          aria-labelledby="${ifDefined(this.title ? `${this._id}-title` : undefined)}"
+          aria-describedby="${ifDefined(this.getGroupDescribedBy())}"
+          aria-invalid="${this.errored ? 'true' : 'false'}"
+          aria-disabled="${this.disabled ? 'true' : 'false'}"
+          @keydown=${this.handleItemsKeydown}
+        >
+          ${this.dialogItems.map((item, index) => {
+            const labelId = `${this._id}-item-${index}-label`;
+            const descriptionId = `${this._id}-item-${index}-description`;
+            const selected = this.value === item.value;
+            return html`
+              <div
+                class="radio-item-wrapper"
+                role="radio"
+                aria-checked="${selected}"
+                aria-disabled="${this.disabled}"
+                aria-labelledby="${labelId}"
+                aria-describedby="${ifDefined(item.description ? descriptionId : undefined)}"
+                tabindex="${this.disabled ? -1 : (this.getTabbableIndex() === index ? 0 : -1)}"
+                @click="${() => this.selectItem(index)}"
+              >
+                <dile-radio
+                  value="${item.value}"
+                  ?selected=${selected}
+                  ?disabled=${this.disabled}
+                  decorative
+                ></dile-radio>
+                <span class="item-label" id="${labelId}">${item.label}</span>
+                ${item.description
+                  ? html`<p class="item-description" id="${descriptionId}">${item.description}</p>`
+                  : ''
+                }
+              </div>
+            `;
+          })}
+        </div>
+        ${this.message
+          ? html`<dile-input-message id="${this._id}-message" message="${this.message}" ?errored=${this.errored}></dile-input-message>`
+          : ''
+        }
+      </dile-card>
+    `;
+  }
+
+  getGroupDescribedBy() {
+    const ids = [];
+    if (this.description) ids.push(`${this._id}-description`);
+    if (this.message) ids.push(`${this._id}-message`);
+    return ids.length ? ids.join(' ') : undefined;
+  }
+
+  getTabbableIndex() {
+    const selectedIndex = this.dialogItems.findIndex(item => item.value === this.value);
+    return selectedIndex !== -1 ? selectedIndex : 0;
+  }
+
+  handleItemsKeydown(e) {
+    if (this.disabled) return;
+    const wrapper = e.target.closest('.radio-item-wrapper');
+    if (!wrapper) return;
+    const wrappers = Array.from(this.shadowRoot.querySelectorAll('.radio-item-wrapper'));
+    const currentIndex = wrappers.indexOf(wrapper);
+
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      this.selectItem(currentIndex);
+      return;
+    }
+
+    if (!NAVIGATION_KEYS.includes(e.key)) return;
+    e.preventDefault();
+    const nextIndex = this.getFocusableIndex(wrappers, e.key, currentIndex);
+    if (nextIndex === -1) return;
+    wrappers[nextIndex].focus();
+    this.selectItem(nextIndex);
+  }
+
+  selectItem(index) {
+    if (!this.disabled && this.dialogItems[index]) {
+      const item = this.dialogItems[index];
+      this.value = item.value;
+      if (this.hideErrorOnInput && this.errored) {
+        this.message = '';
+        this.errored = false;
+      }
+      this.emmitChange();
+      this.dispatchChangeEvent();
+      this.internals.setFormValue(this.value);
+    }
+  }
+
+  dispatchChangeEvent() {
+    this.dispatchEvent(new CustomEvent('dile-radio-group-changed', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        name: this.name,
+        value: this.value
+      }
+    }));
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.9.2",
+  "version": "3.9.3",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b825edcebfd49f3f524ffd552197b3be48ad4e45"
+  "gitHead": "6c8664d4efb3dea1f363ed00eee50c8964fa2321"
 }