diff --git a/components/interactive-elements.html b/components/interactive-elements.html index f6e18fa..ab5850b 100644 --- a/components/interactive-elements.html +++ b/components/interactive-elements.html @@ -430,12 +430,22 @@ Standard Radio - + Variante aktivierbar - - - - Option wählbar + + + + + + Option 1 + + + + + + Option 2 + + × @@ -738,13 +748,31 @@ return; } - const activatableOption = radio.closest('[data-component="radio-field"][data-activatable="true"]'); - if (activatableOption) { - radio.setAttribute('aria-checked', 'true'); - radio.classList.add('sg-form-active'); - radio.classList.remove('sg-radio-field--inactive-selectable'); - activatableOption.dataset.componentState = 'active'; - const removeButton = activatableOption.querySelector('[data-radio-activate-remove]'); + const activatableGroup = radio.closest('[data-activatable-radio-group="true"]'); + if (activatableGroup) { + const radios = activatableGroup.querySelectorAll('.sg-radio-field'); + const defaultRadio = radios[0]; + const removeButton = activatableGroup.querySelector('[data-radio-activate-remove]'); + + if (activatableGroup.dataset.componentState === 'inactive-selectable' && defaultRadio) { + radios.forEach((otherRadio) => { + otherRadio.setAttribute('aria-checked', String(otherRadio === defaultRadio)); + otherRadio.classList.remove('sg-radio-field--inactive-selectable'); + otherRadio.classList.toggle('sg-form-active', otherRadio === defaultRadio); + }); + activatableGroup.dataset.componentState = 'active'; + if (removeButton) { + removeButton.hidden = false; + } + return; + } + + radios.forEach((otherRadio) => { + otherRadio.setAttribute('aria-checked', String(otherRadio === radio)); + otherRadio.classList.remove('sg-radio-field--inactive-selectable'); + otherRadio.classList.toggle('sg-form-active', otherRadio === radio); + }); + activatableGroup.dataset.componentState = 'active'; if (removeButton) { removeButton.hidden = false; } @@ -910,17 +938,19 @@ document.querySelectorAll('[data-radio-activate-remove]').forEach((removeButton) => { removeButton.addEventListener('click', (event) => { event.stopPropagation(); - const option = removeButton.closest('[data-component="radio-field"][data-activatable="true"]'); - const radio = option ? option.querySelector('.sg-radio-field') : null; + const option = removeButton.closest('[data-activatable-radio-group="true"]'); + const radios = option ? option.querySelectorAll('.sg-radio-field') : null; - if (!option || !radio) { + if (!option || !radios || radios.length === 0) { return; } option.dataset.componentState = 'inactive-selectable'; - radio.setAttribute('aria-checked', 'false'); - radio.classList.remove('sg-form-active'); - radio.classList.add('sg-radio-field--inactive-selectable'); + radios.forEach((radio) => { + radio.setAttribute('aria-checked', 'false'); + radio.classList.remove('sg-form-active'); + radio.classList.add('sg-radio-field--inactive-selectable'); + }); removeButton.hidden = true; }); }); diff --git a/styleguide.css b/styleguide.css index 53c2613..6055640 100644 --- a/styleguide.css +++ b/styleguide.css @@ -1297,6 +1297,18 @@ section + section { opacity: var(--disabled-opacity); } + .sg-radio-activatable-group__choices { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-radio-activatable-group__choice { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + .sg-checkbox-field-option--disabled { color: var(--text-control-disabled); opacity: var(--disabled-opacity);