@uh-design-system/component-library 1.3.0 → 1.4.0-rc.1

package/dist/collection/components/01-base-components/ds-options-message/ds-options-message.css

@@ -1,4 +1,4 @@
-.ds-options-message__ugqjFm {
+.ds-options-message__MGLLcm {
   display: flex;
   flex-direction: column;
   padding: var(--ds-spacing-2xSmall);
@@ -9,14 +9,14 @@
   justify-content: center;
   font-family: var(--ds-fontFamily-body);
 }
-.ds-options-message__ugqjFm__error {
+.ds-options-message__MGLLcm__error {
   color: var(--ds-textColor-danger);
   text-align: center;
 }
-.ds-options-message__ugqjFm__error__icon {
+.ds-options-message__MGLLcm__error__icon {
   display: inline-block;
 }
-.ds-options-message__ugqjFm__error__title, .ds-options-message__ugqjFm__no-results__title {
+.ds-options-message__MGLLcm__error__title, .ds-options-message__MGLLcm__no-results__title {
   text-align: center;
   color: var(--ds-textColor-default);
   font-size: var(--ds-fontSize-18);
@@ -24,10 +24,10 @@
   margin-top: var(--ds-spacing-xSmall);
   margin-bottom: var(--ds-spacing-2xSmall);
 }
-.ds-options-message__ugqjFm__no-results__title {
+.ds-options-message__MGLLcm__no-results__title {
   hyphens: auto;
 }
-.ds-options-message__ugqjFm__error__text, .ds-options-message__ugqjFm__no-results__text {
+.ds-options-message__MGLLcm__error__text, .ds-options-message__MGLLcm__no-results__text {
   color: var(--ds-textColor-default);
   text-align: center;
   font-size: var(--ds-fontSize-16);

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-ellipsis/ds-pagination-ellipsis.css

@@ -4,7 +4,7 @@
   justify-content: center;
 }
 
-.ds-pagination-ellipsis__ugqjFm {
+.ds-pagination-ellipsis__MGLLcm {
   min-height: var(--ds-link-cta-min-width, calc(var(--ds-spacing-large) + var(--ds-spacing-xSmall))); /* Match button height */
   min-width: var(--ds-link-cta-min-width, calc(var(--ds-spacing-large) + var(--ds-spacing-xSmall))); /* Match button width */
   padding: 0;

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-item/ds-pagination-item.css

@@ -1,4 +1,4 @@
-.ds-pagination-item__ugqjFm {
+.ds-pagination-item__MGLLcm {
   display: inline-flex;
   align-items: center;
   gap: var(--ds-spacing-2xSmall);
@@ -6,13 +6,13 @@
   --ds-link-cta-text-decoration: none;
   --ds-link-cta-icon-size: 1.25rem; /* 20px */
 }
-.ds-pagination-item__ugqjFm--disabled {
+.ds-pagination-item__MGLLcm--disabled {
   cursor: default;
 }
 
-:host([slot=full]) .ds-pagination-item__ugqjFm--previous {
+:host([slot=full]) .ds-pagination-item__MGLLcm--previous {
   --ds-link-cta-padding-inline-start: var(--ds-spacing-3xSmall); /* 4px */
 }
-:host([slot=full]) .ds-pagination-item__ugqjFm--next {
+:host([slot=full]) .ds-pagination-item__MGLLcm--next {
   --ds-link-cta-padding-inline-end: var(--ds-spacing-3xSmall); /* 4px */
 }

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-page/ds-pagination-page.css

@@ -3,14 +3,14 @@
   align-items: center;
 }
 
-.ds-pagination-page__ugqjFm {
+.ds-pagination-page__MGLLcm {
   --ds-link-cta-padding-inline: var(--ds-spacing-2xSmall);
   --ds-link-cta-padding-block: 0;
   --ds-link-cta-text-decoration: none;
   --ds-link-cta-icon-size: 1.25rem; /* 20px */
 }
 
-.ds-pagination-page__ugqjFm--current {
+.ds-pagination-page__MGLLcm--current {
   pointer-events: none;
   --ds-link-cta-bg-color: var(--ds-bgColor-primary);
   --ds-link-cta-text-color: var(--ds-textColor-white);

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination.css

@@ -1,6 +1,10 @@
-:host *, .ds-no-style-leak * {
+.ds-no-style-leak *, .ds-pagination__MGLLcm,
+.ds-pagination__MGLLcm :where([class*=__MGLLcm]) {
   all: unset;
   box-sizing: border-box;
+}
+
+.ds-no-style-leak * {
   display: block;
 }
 
@@ -14,55 +18,55 @@
   }
 }
 
-.ds-pagination__ugqjFm {
+.ds-pagination__MGLLcm {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--ds-spacing-3xSmall);
   flex-wrap: wrap;
 }
-.ds-pagination__ugqjFm__compact slot, .ds-pagination__ugqjFm__full slot {
+.ds-pagination__MGLLcm__compact slot, .ds-pagination__MGLLcm__full slot {
   display: flex;
   align-items: center;
   gap: var(--ds-spacing-3xSmall);
   flex-wrap: wrap;
 }
-.ds-pagination__ugqjFm--compact .ds-pagination__ugqjFm__compact, .ds-pagination__ugqjFm--auto .ds-pagination__ugqjFm__compact {
+.ds-pagination__MGLLcm--compact .ds-pagination__MGLLcm__compact, .ds-pagination__MGLLcm--auto .ds-pagination__MGLLcm__compact {
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .ds-pagination__ugqjFm--compact .ds-pagination__ugqjFm__compact, .ds-pagination__ugqjFm--auto .ds-pagination__ugqjFm__compact {
+  .ds-pagination__MGLLcm--compact .ds-pagination__MGLLcm__compact, .ds-pagination__MGLLcm--auto .ds-pagination__MGLLcm__compact {
     width: auto;
   }
 }
-.ds-pagination__ugqjFm--compact .ds-pagination__ugqjFm__compact slot, .ds-pagination__ugqjFm--auto .ds-pagination__ugqjFm__compact slot {
+.ds-pagination__MGLLcm--compact .ds-pagination__MGLLcm__compact slot, .ds-pagination__MGLLcm--auto .ds-pagination__MGLLcm__compact slot {
   display: grid;
   grid-template-columns: min-content min-content auto min-content min-content;
   gap: var(--ds-spacing-3xSmall);
   align-items: center;
   width: 100%;
 }
-.ds-pagination__ugqjFm ::slotted([class*=pagination-page-info]) {
+.ds-pagination__MGLLcm ::slotted([class*=pagination-page-info]) {
   padding: 0 var(--ds-spacing-small);
   font-size: var(--ds-pagination-font-size, var(--ds-fontSize-16));
   font-weight: var(--ds-fontWeight-semibold, 600);
   text-align: center;
   align-self: center;
 }
-.ds-pagination__ugqjFm--compact .ds-pagination__ugqjFm__full {
+.ds-pagination__MGLLcm--compact .ds-pagination__MGLLcm__full {
   display: none;
 }
-.ds-pagination__ugqjFm--full .ds-pagination__ugqjFm__compact {
+.ds-pagination__MGLLcm--full .ds-pagination__MGLLcm__compact {
   display: none;
 }
-.ds-pagination__ugqjFm--auto .ds-pagination__ugqjFm__full {
+.ds-pagination__MGLLcm--auto .ds-pagination__MGLLcm__full {
   display: none;
 }
 @media (min-width: 60rem) {
-  .ds-pagination__ugqjFm--auto .ds-pagination__ugqjFm__full {
+  .ds-pagination__MGLLcm--auto .ds-pagination__MGLLcm__full {
     display: contents;
   }
-  .ds-pagination__ugqjFm--auto .ds-pagination__ugqjFm__compact {
+  .ds-pagination__MGLLcm--auto .ds-pagination__MGLLcm__compact {
     display: none;
   }
 }

package/dist/collection/components/01-base-components/ds-radio-button/ds-radio-button.css

@@ -1,23 +1,23 @@
-.ds-radio-button__ugqjFm {
+.ds-radio-button__MGLLcm {
   box-sizing: border-box;
   display: inline-flex;
   color: var(--ds-textColor-default);
 }
-.ds-radio-button__ugqjFm--disabled {
+.ds-radio-button__MGLLcm--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-radio-button__ugqjFm:has(input:focus-visible) .ds-radio-button__ugqjFm__icon {
+.ds-radio-button__MGLLcm:has(input:focus-visible) .ds-radio-button__MGLLcm__icon {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-bgColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-bgColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 0.5);
 }
-.ds-radio-button__ugqjFm__icon {
+.ds-radio-button__MGLLcm__icon {
   border-radius: 50%;
   height: 24px;
   width: 24px;
   margin: 10px 10px 10px 0;
 }
-.ds-radio-button__ugqjFm__text {
+.ds-radio-button__MGLLcm__text {
   margin-top: 10px;
   padding-right: var(--ds-spacing-2xSmall);
   font-family: var(--ds-fontFamily-body);
@@ -26,99 +26,99 @@
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--ds-letterSpacing-wide);
 }
-.ds-radio-button__ugqjFm__icon__outer-circle {
+.ds-radio-button__MGLLcm__icon__outer-circle {
   stroke: var(--ds-borderColor-default);
   fill: var(--ds-bgColor-white);
 }
-.ds-radio-button__ugqjFm__icon__outer-circle--checked {
+.ds-radio-button__MGLLcm__icon__outer-circle--checked {
   stroke: var(--ds-borderColor-primary);
   fill: var(--ds-bgColor-white);
 }
-.ds-radio-button__ugqjFm__icon__inner-circle {
+.ds-radio-button__MGLLcm__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-bgColor-primary);
 }
-.ds-radio-button__ugqjFm:hover:not(.ds-radio-button__ugqjFm--disabled):not(.ds-radio-button__ugqjFm--invalid) .ds-radio-button__ugqjFm__icon__outer-circle {
+.ds-radio-button__MGLLcm:hover:not(.ds-radio-button__MGLLcm--disabled):not(.ds-radio-button__MGLLcm--invalid) .ds-radio-button__MGLLcm__icon__outer-circle {
   stroke: var(--ds-borderColor-default);
   fill: var(--ds-bgColor-white-hover);
 }
-.ds-radio-button__ugqjFm:hover:not(.ds-radio-button__ugqjFm--disabled):not(.ds-radio-button__ugqjFm--invalid) .ds-radio-button__ugqjFm__icon__outer-circle--checked {
+.ds-radio-button__MGLLcm:hover:not(.ds-radio-button__MGLLcm--disabled):not(.ds-radio-button__MGLLcm--invalid) .ds-radio-button__MGLLcm__icon__outer-circle--checked {
   stroke: var(--ds-palette-mainBlue-80);
   fill: var(--ds-bgColor-white);
 }
-.ds-radio-button__ugqjFm:hover:not(.ds-radio-button__ugqjFm--disabled):not(.ds-radio-button__ugqjFm--invalid) .ds-radio-button__ugqjFm__icon__inner-circle {
+.ds-radio-button__MGLLcm:hover:not(.ds-radio-button__MGLLcm--disabled):not(.ds-radio-button__MGLLcm--invalid) .ds-radio-button__MGLLcm__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-bgColor-primary-hover);
 }
-.ds-radio-button__ugqjFm:active:not(.ds-radio-button__ugqjFm--disabled):not(.ds-radio-button__ugqjFm--invalid) .ds-radio-button__ugqjFm__icon__outer-circle {
+.ds-radio-button__MGLLcm:active:not(.ds-radio-button__MGLLcm--disabled):not(.ds-radio-button__MGLLcm--invalid) .ds-radio-button__MGLLcm__icon__outer-circle {
   stroke: var(--ds-borderColor-default);
   fill: var(--ds-bgColor-white-active);
 }
-.ds-radio-button__ugqjFm:active:not(.ds-radio-button__ugqjFm--disabled):not(.ds-radio-button__ugqjFm--invalid) .ds-radio-button__ugqjFm__icon__outer-circle--checked {
+.ds-radio-button__MGLLcm:active:not(.ds-radio-button__MGLLcm--disabled):not(.ds-radio-button__MGLLcm--invalid) .ds-radio-button__MGLLcm__icon__outer-circle--checked {
   stroke: var(--ds-palette-mainBlue-90);
   fill: var(--ds-bgColor-white);
 }
-.ds-radio-button__ugqjFm:active:not(.ds-radio-button__ugqjFm--disabled):not(.ds-radio-button__ugqjFm--invalid) .ds-radio-button__ugqjFm__icon__inner-circle {
+.ds-radio-button__MGLLcm:active:not(.ds-radio-button__MGLLcm--disabled):not(.ds-radio-button__MGLLcm--invalid) .ds-radio-button__MGLLcm__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-bgColor-primary-active);
 }
-.ds-radio-button__ugqjFm--disabled .ds-radio-button__ugqjFm__icon__outer-circle {
+.ds-radio-button__MGLLcm--disabled .ds-radio-button__MGLLcm__icon__outer-circle {
   stroke: var(--ds-borderColor-disabled-onLight);
   fill: var(--ds-bgColor-disabled-onLight);
 }
-.ds-radio-button__ugqjFm--disabled .ds-radio-button__ugqjFm__icon__outer-circle--checked {
+.ds-radio-button__MGLLcm--disabled .ds-radio-button__MGLLcm__icon__outer-circle--checked {
   stroke: var(--ds-borderColor-disabled-onLight);
   fill: var(--ds-bgColor-disabled-onLight);
 }
-.ds-radio-button__ugqjFm--disabled .ds-radio-button__ugqjFm__icon__inner-circle {
+.ds-radio-button__MGLLcm--disabled .ds-radio-button__MGLLcm__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-radio-button__ugqjFm--invalid .ds-radio-button__ugqjFm__icon__outer-circle {
+.ds-radio-button__MGLLcm--invalid .ds-radio-button__MGLLcm__icon__outer-circle {
   stroke: var(--ds-borderColor-danger);
   fill: var(--ds-bgColor-danger);
 }
-.ds-radio-button__ugqjFm--invalid .ds-radio-button__ugqjFm__icon__outer-circle--checked {
+.ds-radio-button__MGLLcm--invalid .ds-radio-button__MGLLcm__icon__outer-circle--checked {
   stroke: var(--ds-borderColor-danger);
   fill: var(--ds-bgColor-danger);
 }
-.ds-radio-button__ugqjFm--invalid .ds-radio-button__ugqjFm__icon__inner-circle {
+.ds-radio-button__MGLLcm--invalid .ds-radio-button__MGLLcm__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-iconColor-danger);
 }
-.ds-radio-button__ugqjFm--invalid:hover:not(.ds-radio-button__ugqjFm--disabled) .ds-radio-button__ugqjFm__icon__outer-circle {
+.ds-radio-button__MGLLcm--invalid:hover:not(.ds-radio-button__MGLLcm--disabled) .ds-radio-button__MGLLcm__icon__outer-circle {
   stroke: var(--ds-borderColor-danger);
   fill: var(--ds-bgColor-danger-hover);
 }
-.ds-radio-button__ugqjFm--invalid:hover:not(.ds-radio-button__ugqjFm--disabled) .ds-radio-button__ugqjFm__icon__outer-circle--checked {
+.ds-radio-button__MGLLcm--invalid:hover:not(.ds-radio-button__MGLLcm--disabled) .ds-radio-button__MGLLcm__icon__outer-circle--checked {
   stroke: var(--ds-borderColor-danger);
   fill: var(--ds-bgColor-danger-hover);
 }
-.ds-radio-button__ugqjFm--invalid:hover:not(.ds-radio-button__ugqjFm--disabled) .ds-radio-button__ugqjFm__icon__inner-circle {
+.ds-radio-button__MGLLcm--invalid:hover:not(.ds-radio-button__MGLLcm--disabled) .ds-radio-button__MGLLcm__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-iconColor-danger);
 }
-.ds-radio-button__ugqjFm--invalid:active:not(.ds-radio-button__ugqjFm--disabled) .ds-radio-button__ugqjFm__icon__outer-circle {
+.ds-radio-button__MGLLcm--invalid:active:not(.ds-radio-button__MGLLcm--disabled) .ds-radio-button__MGLLcm__icon__outer-circle {
   stroke: var(--ds-borderColor-danger);
   fill: var(--ds-bgColor-danger-active);
 }
-.ds-radio-button__ugqjFm--invalid:active:not(.ds-radio-button__ugqjFm--disabled) .ds-radio-button__ugqjFm__icon__outer-circle--checked {
+.ds-radio-button__MGLLcm--invalid:active:not(.ds-radio-button__MGLLcm--disabled) .ds-radio-button__MGLLcm__icon__outer-circle--checked {
   stroke: var(--ds-borderColor-danger);
   fill: var(--ds-bgColor-danger-active);
 }
-.ds-radio-button__ugqjFm--invalid:active:not(.ds-radio-button__ugqjFm--disabled) .ds-radio-button__ugqjFm__icon__inner-circle {
+.ds-radio-button__MGLLcm--invalid:active:not(.ds-radio-button__MGLLcm--disabled) .ds-radio-button__MGLLcm__icon__inner-circle {
   stroke: unset;
   fill: var(--ds-iconColor-danger);
 }
 
-.ds-radio-button__ugqjFm-fieldset {
+.ds-radio-button__MGLLcm-fieldset {
   display: inline-flex;
   flex-direction: column;
   border: none;
   margin: 0;
   padding: 0;
 }
-.ds-radio-button__ugqjFm-fieldset__legend {
+.ds-radio-button__MGLLcm-fieldset__legend {
   padding-inline: 0;
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
@@ -128,7 +128,7 @@
   line-height: var(--ds-lineHeight-large);
   margin-bottom: var(--ds-spacing-3xSmall);
 }
-.ds-radio-button__ugqjFm-fieldset__assistive-text {
+.ds-radio-button__MGLLcm-fieldset__assistive-text {
   display: inline;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);

package/dist/collection/components/01-base-components/ds-radio-button/ds-radio-button.js

@@ -5,8 +5,9 @@ import { getRequiredText, validityMessage } from "../../../utils/controls/contro
 import { idGenerator, declareComponentDependencies, transformTagName, ifDefined } from "../../../utils/utils";
 import { cx } from "../../../utils/cx";
 import { ariaDeprecationFactory } from "../../00-foundations/factories/ariaDeprecationFactory";
+import { disableEventsFactory } from "../../00-foundations/factories/disableEventsFactory";
 const radioButtonIdGenerator = idGenerator('ds-radio-button');
-export class DsRadioButton extends Mixin(ariaDeprecationFactory) {
+export class DsRadioButton extends Mixin(ariaDeprecationFactory, disableEventsFactory) {
     constructor() {
         super();
     }
@@ -62,7 +63,11 @@ export class DsRadioButton extends Mixin(ariaDeprecationFactory) {
         return this.inputElement?.checkValidity();
     }
     dsCheckedObserver(isChecked) {
-        this.dsChange.emit({ checked: isChecked, value: this.dsValue });
+        const shouldEmit = this.getShouldEmit();
+        this.setDisableEventEmits(true);
+        if (shouldEmit) {
+            this.dsChange.emit({ checked: isChecked, value: this.dsValue });
+        }
         const validityState = this.inputElement?.validity;
         for (const key in validityState) {
             if (validityState[key]) {
@@ -92,6 +97,7 @@ export class DsRadioButton extends Mixin(ariaDeprecationFactory) {
             ...inheritAriaAttributes(this.el, ['aria-invalid']),
         };
         this.initialChecked = this.dsChecked;
+        this.setDisableEventEmits(true);
     }
     formResetCallback() {
         this.dsErrorText = '';
@@ -143,6 +149,7 @@ export class DsRadioButton extends Mixin(ariaDeprecationFactory) {
         this.dsErrorText = e.detail;
     };
     handleInput = () => {
+        this.setDisableEventEmits(false);
         this.setChecked();
     };
     handleFocus = () => {

package/dist/collection/components/01-base-components/ds-radio-button-group/ds-radio-button-group.css

@@ -1,19 +1,19 @@
-.ds-radio-button-group__ugqjFm {
+.ds-radio-button-group__MGLLcm {
   display: inline-flex;
   flex-direction: column;
   border: none;
   padding: 0;
   margin: 0;
 }
-.ds-radio-button-group__ugqjFm__radio-buttons-slot {
+.ds-radio-button-group__MGLLcm__radio-buttons-slot {
   display: inline-flex;
   flex-direction: column;
 }
-.ds-radio-button-group__ugqjFm__radio-buttons-slot--horizontal {
+.ds-radio-button-group__MGLLcm__radio-buttons-slot--horizontal {
   flex-flow: row wrap;
   gap: var(--ds-spacing-small);
 }
-.ds-radio-button-group__ugqjFm__legend {
+.ds-radio-button-group__MGLLcm__legend {
   padding-inline: 0;
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
@@ -23,7 +23,7 @@
   line-height: var(--ds-lineHeight-large);
   margin-bottom: var(--ds-spacing-3xSmall);
 }
-.ds-radio-button-group__ugqjFm__assistive-text {
+.ds-radio-button-group__MGLLcm__assistive-text {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   color: var(--ds-textColor-secondary);

package/dist/collection/components/01-base-components/ds-radio-button-group/ds-radio-button-group.js

@@ -1,11 +1,15 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, Mixin } from "@stencil/core";
 import classNames from "classnames";
 import { declareComponentDependencies, idGenerator, transformTagName } from "../../../utils/utils";
+import { disableEventsFactory } from "../../00-foundations/factories/disableEventsFactory";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { atLeastOneOption, getRequiredText } from "../../../utils/controls/controlUtils";
 import { cx } from "../../../utils/cx";
 const radioButtonGroupIdGenerator = idGenerator('ds-radio-button-group');
-export class DsRadioButtonGroup {
+export class DsRadioButtonGroup extends Mixin(disableEventsFactory) {
+    constructor() {
+        super();
+    }
     fieldsetId = radioButtonGroupIdGenerator.next().value;
     legendId = `${this.fieldsetId}-legend`;
     errorTextId = `${this.fieldsetId}-error`;
@@ -109,6 +113,7 @@ export class DsRadioButtonGroup {
             ...inheritAriaAttributes(this.el, ['aria-labelledby']),
         };
         this.updateFocusableRadioButton();
+        this.setDisableEventEmits(true);
     }
     componentDidLoad() {
         this.updateRadios((element, index) => {
@@ -140,7 +145,11 @@ export class DsRadioButtonGroup {
     }
     dsValueObserver(value) {
         this.dsRadioButtonGroupValueChange.emit(value);
-        this.dsChange.emit({ value: value });
+        const shouldEmit = this.getShouldEmit();
+        this.setDisableEventEmits(true);
+        if (shouldEmit) {
+            this.dsChange.emit({ value });
+        }
         if (this.dsRequired) {
             this.internals?.setValidity({ valueMissing: !value }, atLeastOneOption(), this.getRadios()?.[0]?.querySelector('input'));
         }
@@ -168,6 +177,7 @@ export class DsRadioButtonGroup {
     onInputChange(e) {
         e.stopPropagation();
         const targetElem = e.target;
+        this.setDisableEventEmits(false);
         this.dsValue = targetElem.dsValue;
         this.dsRadioButtonGroupValueChange.emit(this.dsValue);
         this.updateFocusableRadioButton();
@@ -214,7 +224,7 @@ export class DsRadioButtonGroup {
         });
         const errorClasses = classNames(`${baseClass}__error`);
         const DsInputValidity = transformTagName('ds-input-validity', 'ds-radio-button-group', this.el);
-        return (h(Host, { key: '36bf4cbd02f044c3809c4edb48d62ab6baef1ebf', "data-invalid": !!this.dsErrorText || undefined }, h("fieldset", { key: '9558613edf6de9c54f8858261a2d6bd6ddc5e05f', class: classes, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, h("legend", { key: 'a07c3e0e337a56655ceaa92e64297a52bee96405', id: this.legendId, class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (h("small", { key: 'b58d9c5dfb3c97bd07204a37f5f41c16b227eb9d', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), h("div", { key: 'b4f14801d2857b53d1fbb34ec6d2c2cfbb4a3fc8', class: radioButtonsSlotClasses }, h("slot", { key: '49ff1c628d3cb2aa89ba280aa41d67b62a355468', onSlotchange: this.updateFocusableRadioButton })), !!this.dsErrorText && (h("div", { key: '111e635ff657ce59290f30d5b1c0997a9faf3d6c', class: errorClasses }, h(DsInputValidity, { key: '089711d7b41735aa18c80feac0adeea1dd7cd1c9', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" }))))));
+        return (h(Host, { key: 'c32e010ee9876d68b856eaf3353b4a39f32083a2', "data-invalid": !!this.dsErrorText || undefined }, h("fieldset", { key: '7f0a5e560087bdd5ac3f113d3d33aab1c0bc142e', class: classes, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, h("legend", { key: '1f9733ba0b888896d29574c4336d80a27830b11f', id: this.legendId, class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (h("small", { key: '262c484ba7db03d7e1a54bdf1566418b8da96e7b', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), h("div", { key: '73ac33d0a98fa7d458bc298fc81cf46165534ffa', class: radioButtonsSlotClasses }, h("slot", { key: '004639794b78de9b0a075e88ce8ad4643dd51045', onSlotchange: this.updateFocusableRadioButton })), !!this.dsErrorText && (h("div", { key: 'e114b2df6ff270ddca4ba46b7dc47ee7b980319b', class: errorClasses }, h(DsInputValidity, { key: '296daba5ca5469937711bc84be349daf695be4bb', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" }))))));
     }
     static get is() { return "ds-radio-button-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.stories.js

@@ -1,6 +1,7 @@
 import { expect, userEvent, waitFor } from "@storybook/test";
 import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { getEventsStoryStyles } from "../../../../utils/storybook/storybookUtils";
 import { getDsElem } from "../../../../utils/tests/testUtils";
 const meta = {
     title: 'Base Components/RadioButtonGroup',
@@ -69,3 +70,68 @@ export const Playground = {
         dsName: 'playground-name',
     },
 };
+export const Events = {
+    args: {
+        dsId: 'events-radio-group',
+        dsLabel: 'Group label',
+        dsAssistiveText: 'Assistive text',
+        dsRequired: false,
+    },
+    render: args => html `
+    <style>
+      ${getEventsStoryStyles()}
+    </style>
+    <ds-grid>
+      <ds-grid>
+        <ds-card ds-heading="Events" ds-description="Use the radio button group to observe the events it triggers. Change events are emitted only on user interaction.">
+          <ul slot="content" id="radio-group-output" class="ds-bodytext-sm ds-m-sm">
+            <li id="radio-group-output__value">Selected value: <span id="radio-group-output__value-text">None</span></li>
+            <li id="radio-group-output__programmatic">Programmatic value: <span id="radio-group-output__programmatic-text">None</span></li>
+          </ul>
+        </ds-card>
+      </ds-grid>
+      <ds-grid>
+        <div class="ds-sb-events">
+          <ds-radio-button-group
+            id=${args.dsId}
+            ds-label=${args.dsLabel}
+            ds-assistive-text=${args.dsAssistiveText}
+            ?ds-required=${args.dsRequired}
+            @dsChange=${(event) => {
+        const output = document.getElementById('radio-group-output__value-text');
+        if (output) {
+            output.textContent = event.detail.value || 'None';
+        }
+    }}
+          >
+            <ds-radio-button ds-value="value-1" ds-text="Value text 1"></ds-radio-button>
+            <ds-radio-button ds-value="value-2" ds-text="Value text 2"></ds-radio-button>
+            <ds-radio-button ds-value="value-3" ds-text="Value text 3"></ds-radio-button>
+          </ds-radio-button-group>
+          <div class="ds-sb-events-buttons">
+            <button
+              type="button"
+              class="ds-sb-events-button"
+              @click=${() => {
+        const group = document.getElementById(args.dsId);
+        if (!group)
+            return;
+        group.dsValue = group.dsValue === 'value-2' ? 'value-1' : 'value-2';
+        const valueOutput = document.getElementById('radio-group-output__value-text');
+        const output = document.getElementById('radio-group-output__programmatic-text');
+        if (valueOutput) {
+            valueOutput.textContent = group.dsValue || 'None';
+        }
+        if (output) {
+            output.textContent = group.dsValue || 'None';
+        }
+    }}
+            >
+              Programmatic select
+            </button>
+          </div>
+        </div>
+      </ds-grid>
+    </ds-grid>
+  `,
+};