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

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

@@ -1,11 +1,11 @@
-.ds-checkbox-group__ugqjFm {
+.ds-checkbox-group__1Vp5mb {
   display: inline-flex;
   flex-direction: column;
   border: none;
   padding: 0;
   margin: 0;
 }
-.ds-checkbox-group__ugqjFm__legend {
+.ds-checkbox-group__1Vp5mb__legend {
   color: var(--ds-textColor-default);
   padding-inline: 0;
   font-family: var(--ds-fontFamily-body);
@@ -14,28 +14,28 @@
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-checkbox-group__ugqjFm__assistive-text {
+.ds-checkbox-group__1Vp5mb__assistive-text {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   color: var(--ds-textColor-secondary);
   line-height: var(--ds-lineHeight-large);
   margin-bottom: var(--ds-spacing-2xSmall);
 }
-.ds-checkbox-group__ugqjFm__error {
+.ds-checkbox-group__1Vp5mb__error {
   display: flex;
 }
-.ds-checkbox-group__ugqjFm__error--visible {
+.ds-checkbox-group__1Vp5mb__error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-checkbox-group__ugqjFm > .ds-checkbox-group__ugqjFm__checkboxes {
+.ds-checkbox-group__1Vp5mb > .ds-checkbox-group__1Vp5mb__checkboxes {
   display: inline-flex;
   flex-direction: column;
 }
-.ds-checkbox-group__ugqjFm--inset {
+.ds-checkbox-group__1Vp5mb--inset {
   margin-left: var(--ds-spacing-medium);
 }
-.ds-checkbox-group__ugqjFm--horizontal > .ds-checkbox-group__ugqjFm__checkboxes {
+.ds-checkbox-group__1Vp5mb--horizontal > .ds-checkbox-group__1Vp5mb__checkboxes {
   flex-flow: row wrap;
   gap: var(--ds-spacing-small);
 }

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

@@ -1,5 +1,6 @@
 import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { getEventsStoryStyles } from "../../../../utils/storybook/storybookUtils";
 const meta = {
     title: 'Base Components/CheckboxGroup',
     component: 'ds-checkbox-group',
@@ -59,3 +60,70 @@ export const Playground = {
         dsOptional: false,
     },
 };
+export const Events = {
+    args: {
+        dsId: 'events-checkbox-group',
+        dsLabel: 'Group legend',
+        dsAssistiveText: 'Assistive text',
+        dsChecked: false,
+        dsRequired: false,
+    },
+    render: args => html `
+    <style>
+      ${getEventsStoryStyles()}
+    </style>
+    <ds-grid>
+      <ds-grid>
+        <ds-card ds-heading="Events" ds-description="Use the checkbox group to observe the events it triggers. Change events are emitted only on user interaction.">
+          <ul slot="content" id="checkbox-group-output" class="ds-bodytext-sm ds-m-sm">
+            <li id="checkbox-group-output__checked">Group checked: <span id="checkbox-group-output__checked-text">No</span></li>
+            <li id="checkbox-group-output__programmatic">Programmatic state: <span id="checkbox-group-output__programmatic-text">Unchecked</span></li>
+          </ul>
+        </ds-card>
+      </ds-grid>
+      <ds-grid>
+        <div class="ds-sb-events">
+          <ds-checkbox-group
+            id=${args.dsId}
+            ds-label=${args.dsLabel}
+            ds-assistive-text=${args.dsAssistiveText}
+            ?ds-checked=${args.dsChecked}
+            ?ds-required=${args.dsRequired}
+            @dsCheckboxGroupChange=${(event) => {
+        const output = document.getElementById('checkbox-group-output__checked-text');
+        if (output) {
+            output.textContent = event.detail.checked ? 'Yes' : 'No';
+        }
+    }}
+          >
+            <ds-checkbox ds-text="Value text"></ds-checkbox>
+            <ds-checkbox ds-text="Value text"></ds-checkbox>
+            <ds-checkbox ds-text="Value text"></ds-checkbox>
+          </ds-checkbox-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.dsChecked = !group.dsChecked;
+        const checkedOutput = document.getElementById('checkbox-group-output__checked-text');
+        const output = document.getElementById('checkbox-group-output__programmatic-text');
+        if (checkedOutput) {
+            checkedOutput.textContent = group.dsChecked ? 'Yes' : 'No';
+        }
+        if (output) {
+            output.textContent = group.dsChecked ? 'Checked' : 'Unchecked';
+        }
+    }}
+            >
+              Programmatic toggle
+            </button>
+          </div>
+        </div>
+      </ds-grid>
+    </ds-grid>
+  `,
+};

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

@@ -1,9 +1,9 @@
-.ds-chip__ugqjFm:focus-visible {
+.ds-chip__1Vp5mb:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-chip__ugqjFm {
+.ds-chip__1Vp5mb {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -18,12 +18,12 @@
   border: var(--ds-borderWidth-thin) solid var(--ds-borderColor-primary);
   border-radius: 1rem;
 }
-.ds-chip__ugqjFm:hover {
+.ds-chip__1Vp5mb:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-chip__ugqjFm:active {
+.ds-chip__1Vp5mb:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-chip__ugqjFm__text {
+.ds-chip__1Vp5mb__text {
   padding: 0 var(--ds-spacing-3xSmall);
 }

package/dist/collection/components/01-base-components/ds-chip/stories/ds-chip.stories.js

@@ -20,7 +20,7 @@ export const Playground = {
     argTypes: {
         dsIcon: {
             control: 'select',
-            options: icons.map(icon => icon.name),
+            options: icons.map(icon => icon.name).sort(),
         },
     },
     args: {

package/dist/collection/components/01-base-components/ds-chip/stories/ds.chip.features.stories.js

@@ -16,7 +16,7 @@ export const Icon = {
     argTypes: {
         dsIcon: {
             control: 'select',
-            options: icons.map(icon => icon.name),
+            options: icons.map(icon => icon.name).sort(),
         },
     },
     args: {

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

@@ -1,4 +1,4 @@
-.ds-chip-group__ugqjFm__chips {
+.ds-chip-group__1Vp5mb__chips {
   display: inline-flex;
   flex-flow: row wrap;
   gap: var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);

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

@@ -3,7 +3,7 @@
   width: 100%;
 }
 @media (min-width: 30rem) {
-  :host:not(:has(.ds-combobox__ugqjFm--full-width)) {
+  :host:not(:has(.ds-combobox__1Vp5mb--full-width)) {
     width: 20rem;
   }
 }
@@ -13,7 +13,7 @@
   position: relative;
 }
 
-.ds-combobox__ugqjFm__input-container {
+.ds-combobox__1Vp5mb__input-container {
   position: relative;
   display: flex;
   align-items: center;
@@ -25,37 +25,37 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-combobox__ugqjFm__input-container--disabled {
+.ds-combobox__1Vp5mb__input-container--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-combobox__ugqjFm__input-container--disabled .ds-combobox__ugqjFm__input-container__toggle-button {
+.ds-combobox__1Vp5mb__input-container--disabled .ds-combobox__1Vp5mb__input-container__toggle-button {
   cursor: not-allowed;
 }
-.ds-combobox__ugqjFm__input-container--invalid {
+.ds-combobox__1Vp5mb__input-container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-combobox__ugqjFm__input-container--invalid:not(.ds-combobox__ugqjFm__input-container--open):not(.ds-combobox__ugqjFm__input-container--disabled):hover {
+.ds-combobox__1Vp5mb__input-container--invalid:not(.ds-combobox__1Vp5mb__input-container--open):not(.ds-combobox__1Vp5mb__input-container--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-combobox__ugqjFm__input-container--invalid:not(.ds-combobox__ugqjFm__input-container--open):not(.ds-combobox__ugqjFm__input-container--disabled):active {
+.ds-combobox__1Vp5mb__input-container--invalid:not(.ds-combobox__1Vp5mb__input-container--open):not(.ds-combobox__1Vp5mb__input-container--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-combobox__ugqjFm__input-container:active:not(.ds-combobox__ugqjFm__input-container--invalid, .ds-combobox__ugqjFm__input-container--disabled, .ds-combobox__ugqjFm__input-container--open) {
+.ds-combobox__1Vp5mb__input-container:active:not(.ds-combobox__1Vp5mb__input-container--invalid, .ds-combobox__1Vp5mb__input-container--disabled, .ds-combobox__1Vp5mb__input-container--open) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-combobox__ugqjFm__input-container:not(.ds-combobox__ugqjFm__input-container--open, .ds-combobox__ugqjFm__input-container:has(> .ds-combobox__ugqjFm__input-container__clear-button > button:focus), .ds-combobox__ugqjFm__input-container--invalid, .ds-combobox__ugqjFm__input-container--disabled):hover {
+.ds-combobox__1Vp5mb__input-container:not(.ds-combobox__1Vp5mb__input-container--open, .ds-combobox__1Vp5mb__input-container:has(> .ds-combobox__1Vp5mb__input-container__clear-button > button:focus), .ds-combobox__1Vp5mb__input-container--invalid, .ds-combobox__1Vp5mb__input-container--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-combobox__ugqjFm__input-container:has(> .ds-combobox__ugqjFm__input-container__input:focus), .ds-combobox__ugqjFm__input-container:has(> .ds-combobox__ugqjFm__input-container__clear-button > button:focus) {
+.ds-combobox__1Vp5mb__input-container:has(> .ds-combobox__1Vp5mb__input-container__input:focus), .ds-combobox__1Vp5mb__input-container:has(> .ds-combobox__1Vp5mb__input-container__clear-button > button:focus) {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-combobox__ugqjFm__input-container__input {
+.ds-combobox__1Vp5mb__input-container__input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -69,47 +69,47 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-combobox__ugqjFm__input-container__input::placeholder {
+.ds-combobox__1Vp5mb__input-container__input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-combobox__ugqjFm__input-container__input:disabled {
+.ds-combobox__1Vp5mb__input-container__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__ugqjFm__input-container__input:disabled::placeholder {
+.ds-combobox__1Vp5mb__input-container__input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__ugqjFm__input-container__input:focus {
+.ds-combobox__1Vp5mb__input-container__input:focus {
   outline: none;
 }
-.ds-combobox__ugqjFm__input-container__icon {
+.ds-combobox__1Vp5mb__input-container__icon {
   padding-left: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__ugqjFm__input-container__icon + .ds-combobox__ugqjFm__input-container__input {
+.ds-combobox__1Vp5mb__input-container__icon + .ds-combobox__1Vp5mb__input-container__input {
   padding-left: var(--ds-spacing-2xSmall);
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__ugqjFm__input-container__badge-container {
+.ds-combobox__1Vp5mb__input-container__badge-container {
   pointer-events: none;
   user-select: none;
 }
-.ds-combobox__ugqjFm__input-container__badge-container--padded {
+.ds-combobox__1Vp5mb__input-container__badge-container--padded {
   padding-right: calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall));
 }
-.ds-combobox__ugqjFm__input-container__clear-button, .ds-combobox__ugqjFm__input-container__toggle-button {
+.ds-combobox__1Vp5mb__input-container__clear-button, .ds-combobox__1Vp5mb__input-container__toggle-button {
   cursor: pointer;
 }
-.ds-combobox__ugqjFm__input-container__toggle-button {
+.ds-combobox__1Vp5mb__input-container__toggle-button {
   color: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
-.ds-combobox__ugqjFm__input-container__toggle-button:focus {
+.ds-combobox__1Vp5mb__input-container__toggle-button:focus {
   outline: none;
 }
-.ds-combobox__ugqjFm__input-container__toggle-button__icon {
+.ds-combobox__1Vp5mb__input-container__toggle-button__icon {
   align-items: center;
   align-self: stretch;
   border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);
@@ -118,7 +118,7 @@
   pointer-events: none;
   padding: 0 var(--ds-spacing-2xSmall);
 }
-.ds-combobox__ugqjFm__options-container {
+.ds-combobox__1Vp5mb__options-container {
   display: none;
   position: absolute;
   top: 100%;
@@ -128,11 +128,11 @@
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   background-color: var(--ds-bgColor-white);
 }
-.ds-combobox__ugqjFm__options-container--open {
+.ds-combobox__1Vp5mb__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-combobox__ugqjFm__options-container__options {
+.ds-combobox__1Vp5mb__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -141,7 +141,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-combobox__ugqjFm__options-container__options__inner {
+.ds-combobox__1Vp5mb__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -152,7 +152,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-combobox__ugqjFm__options-container__options__inner__top-scrim, .ds-combobox__ugqjFm__options-container__options__inner__bottom-scrim {
+.ds-combobox__1Vp5mb__options-container__options__inner__top-scrim, .ds-combobox__1Vp5mb__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -162,20 +162,20 @@
   z-index: 1;
   display: none;
 }
-.ds-combobox__ugqjFm__options-container__options__inner__top-scrim--visible, .ds-combobox__ugqjFm__options-container__options__inner__bottom-scrim--visible {
+.ds-combobox__1Vp5mb__options-container__options__inner__top-scrim--visible, .ds-combobox__1Vp5mb__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-combobox__ugqjFm__options-container__options__inner__top-scrim {
+.ds-combobox__1Vp5mb__options-container__options__inner__top-scrim {
   top: 0;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-combobox__ugqjFm__options-container__options__inner__top-scrim--dark {
+.ds-combobox__1Vp5mb__options-container__options__inner__top-scrim--dark {
   height: calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));
   background: none;
   margin-top: calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));
   box-shadow: var(--ds-shadow-overflow);
 }
-.ds-combobox__ugqjFm__options-container__options__inner__bottom-scrim {
+.ds-combobox__1Vp5mb__options-container__options__inner__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }

package/dist/collection/components/01-base-components/ds-combobox/ds-combobox.js

@@ -6,8 +6,9 @@ import { cx } from "../../../utils/cx";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { FEEDBACK_RESET_TIMEOUT, FEEDBACK_SET_TIMEOUT, SCRIM_HEIGHT } from "../../../constants";
 import { multipleValueFactory } from "../../00-foundations/factories/multipleValueFactory";
+import { disableEventsFactory } from "../../00-foundations/factories/disableEventsFactory";
 const comboboxIdGenerator = idGenerator('ds-combobox');
-export class DsCombobox extends Mixin(multipleValueFactory) {
+export class DsCombobox extends Mixin(multipleValueFactory, disableEventsFactory) {
     constructor() {
         super();
     }
@@ -129,7 +130,9 @@ export class DsCombobox extends Mixin(multipleValueFactory) {
         const hasChanged = removedValues.length > 0 || addedValues.length > 0;
         oldValue?.forEach(opt => (opt.dsSelected = false));
         newValue.forEach(opt => (opt.dsSelected = true));
-        if (hasChanged) {
+        const shouldEmit = this.getShouldEmit([hasChanged]);
+        this.setDisableEventEmits();
+        if (shouldEmit) {
             this.dsMultipleChange.emit({ values: newValues, added: addedValues, removed: removedValues });
             this.dsChange.emit(newValues[0] || null);
             this.dsValidity.emit({
@@ -208,6 +211,7 @@ export class DsCombobox extends Mixin(multipleValueFactory) {
         this.setSelectedOptionsFromValue(newValue);
     }
     dsValueObserver(newValue) {
+        this.setDisableEventEmits(true);
         this.forceUpdateInputValue = !this.isOpen;
         this.value = this.toValue(newValue);
     }
@@ -241,10 +245,9 @@ export class DsCombobox extends Mixin(multipleValueFactory) {
     }
     onDsValueChange(event) {
         if (this.selectedOptions.some(opt => opt.dsValue === event.detail.oldValue)) {
-            this.value = this.withoutValue(event.detail.oldValue);
-        }
-        if (this.dsValue && this.dsValue === event.detail.oldValue) {
-            this.dsSelectedOptionValueChange.emit(event.detail.newValue);
+            this.setDisableEventEmits(true);
+            const valueWithoutOld = this.withoutValue(event.detail.oldValue);
+            this.value = event.detail.newValue ? [...(valueWithoutOld || []), event.detail.newValue] : valueWithoutOld;
         }
     }
     onDsLabelChange(event) {
@@ -289,13 +292,16 @@ export class DsCombobox extends Mixin(multipleValueFactory) {
         this.updateScrimClasses();
         this.internals?.setValidity({ valueMissing: this.dsRequired && (!this.dsValue || (Array.isArray(this.dsValue) && this.dsValue.length === 0)) }, atLeastOneOption(), this.inputRef);
         this.forceUpdateInputValue = Array.isArray(this.dsValue) ? this.dsValue.length > 0 : !!this.dsValue;
+        this.setDisableEventEmits(true);
         this.value = this.toValue(this.dsValue);
+        this.setDisableEventEmits();
         this.observer = new MutationObserver(mutations => {
             for (const mutation of mutations) {
                 if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
                     const options = Array.from(mutation.removedNodes).filter(node => node.nodeType === Node.ELEMENT_NODE && this.elementIsOption(node));
                     if (options.some(option => this.inValue(option.dsValue))) {
                         this.dsSelectedOptionRemoved.emit();
+                        this.setDisableEventEmits(true);
                         this.value = this.withoutValues(options.map(option => option.dsValue));
                     }
                 }

package/dist/collection/components/01-base-components/ds-combobox/stories/ds-combobox.features.stories.js

@@ -104,7 +104,6 @@ export const ControlledValue = {
     </ds-combobox>
   `,
     play: async ({ canvasElement, step }) => {
-        const dsChangeSpy = fn();
         const dsSelectedOptionValueChangeSpy = fn();
         const dsSelectedOptionRemovedSpy = fn();
         const combobox = (await getDsElem(canvasElement, 'ds-combobox'));
@@ -112,10 +111,6 @@ export const ControlledValue = {
             const options = combobox.querySelectorAll('ds-option');
             return Array.from(options).find(conditionFn);
         };
-        combobox.addEventListener('dsChange', (event) => {
-            combobox.dsValue = event.detail;
-            dsChangeSpy(event.detail);
-        });
         combobox.addEventListener('dsSelectedOptionValueChange', (event) => {
             combobox.dsValue = event.detail;
             dsSelectedOptionValueChangeSpy(event.detail);
@@ -141,14 +136,28 @@ export const ControlledValue = {
                     description: null,
                 });
                 await expect(combobox.dsValue).toBe('option3');
-                await expect(dsChangeSpy).toHaveBeenCalledWith('option3');
             });
         });
-        await step('Changing selected option value should update value', async () => {
+        await step('Changing selected option value programmatically should not update controlled value or emit selected-option-value-change event', async () => {
             await waitFor(async () => {
                 const option = getOption(option => option.dsSelected);
+                if (!option) {
+                    throw new Error('Selected option not found');
+                }
                 option.dsValue = 'optionX';
             });
+            await waitFor(async () => {
+                await expect(await combobox.getSelectedOption()).toEqual({
+                    value: 'optionX',
+                    label: 'Short option',
+                    description: null,
+                });
+                await expect(combobox.dsValue).toBe('option3');
+                await expect(dsSelectedOptionValueChangeSpy).not.toHaveBeenCalled();
+            });
+        });
+        await step('Changing controlled value programmatically should sync selected option value', async () => {
+            combobox.dsValue = 'optionX';
             await waitFor(async () => {
                 await expect(await combobox.getSelectedOption()).toEqual({
                     value: 'optionX',
@@ -156,12 +165,14 @@ export const ControlledValue = {
                     description: null,
                 });
                 await expect(combobox.dsValue).toBe('optionX');
-                await expect(dsSelectedOptionValueChangeSpy).toHaveBeenCalledWith('optionX');
             });
         });
         await step('Removing selected option should nullify combobox value', async () => {
             await waitFor(async () => {
                 const option = getOption(option => option.dsSelected);
+                if (!option) {
+                    throw new Error('Selected option not found');
+                }
                 option.remove();
             });
             await waitFor(async () => {
@@ -321,6 +332,9 @@ export const MutatingDOM = {
         await step('Updating value should select an option (1)', async () => {
             combobox.dsValue = 'option1';
             const option = getOption(option => option.dsValue === 'option1');
+            if (!option) {
+                throw new Error('Option not found');
+            }
             await expect(await combobox.getSelectedOption()).toEqual({
                 value: 'option1',
                 label: 'Option 1',
@@ -331,6 +345,9 @@ export const MutatingDOM = {
         });
         await step('Removing an unselected option should not nullify selection', async () => {
             const option = getOption(option => option.dsValue === 'option0');
+            if (!option) {
+                throw new Error('Option not found');
+            }
             option.remove();
             await expect(await combobox.getSelectedOption()).toEqual({
                 value: 'option1',
@@ -340,6 +357,9 @@ export const MutatingDOM = {
         });
         await step('Removing a selected option should nullify selection without mutating combobox value', async () => {
             const option = getOption(option => option.dsSelected);
+            if (!option) {
+                throw new Error('Selected option not found');
+            }
             option.remove();
             await waitFor(async () => {
                 await expect(await combobox.getSelectedOption()).toBeNull();
@@ -349,6 +369,9 @@ export const MutatingDOM = {
         await step('Updating value should select an option (2)', async () => {
             combobox.dsValue = 'option2';
             const option = getOption(option => option.dsValue === 'option2');
+            if (!option) {
+                throw new Error('Option not found');
+            }
             await expect(await combobox.getSelectedOption()).toEqual({
                 value: 'option2',
                 label: 'Option 2',
@@ -360,6 +383,9 @@ export const MutatingDOM = {
         await step('Changing selected option `textContent` should update input value', async () => {
             await waitFor(async () => {
                 const option = getOption(option => option.dsSelected);
+                if (!option) {
+                    throw new Error('Selected option not found');
+                }
                 option.textContent = 'Option X';
                 await expect(option.dsSelected).toBeTruthy();
                 await expect(option.textContent).toBe('Option X');
@@ -378,6 +404,9 @@ export const MutatingDOM = {
         await step('Changing option value should update selected option without mutating combobox value', async () => {
             await waitFor(async () => {
                 const option = getOption(option => option.dsSelected);
+                if (!option) {
+                    throw new Error('Selected option not found');
+                }
                 option.dsValue = 'optionX';
                 await expect(option.dsSelected).toBeTruthy();
                 await expect(option.dsValue).toBe('optionX');
@@ -401,6 +430,9 @@ export const MutatingDOM = {
         await step('Updating value should select an option (3)', async () => {
             combobox.dsValue = 'option11';
             const option = combobox.querySelector('ds-option[ds-value="option11"]');
+            if (!option) {
+                throw new Error('Option not found');
+            }
             await expect(await combobox.getSelectedOption()).toEqual({
                 value: 'option11',
                 label: 'Option 11',
@@ -412,6 +444,9 @@ export const MutatingDOM = {
         await step('Changing selected option `dsLabel` should update input value', async () => {
             await waitFor(async () => {
                 const option = getOption(option => option.dsSelected);
+                if (!option) {
+                    throw new Error('Selected option not found');
+                }
                 option.dsLabel = 'Option Y';
                 await expect(option.dsSelected).toBeTruthy();
                 await expect(option.dsLabel).toBe('Option Y');