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

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

@@ -1,4 +1,4 @@
-.ds-checkbox__1Vp5mb-fieldset {
+.ds-checkbox__oSBnIJ-fieldset {
   display: inline-flex;
   flex-direction: column;
   border: none;
@@ -6,7 +6,7 @@
   margin: 0;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-checkbox__1Vp5mb-fieldset__legend {
+.ds-checkbox__oSBnIJ-fieldset__legend {
   padding-inline: 0;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
@@ -14,7 +14,7 @@
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-checkbox__1Vp5mb-fieldset__assistive-text {
+.ds-checkbox__oSBnIJ-fieldset__assistive-text {
   display: inline;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
@@ -22,7 +22,7 @@
   line-height: var(--ds-lineHeight-large);
 }
 
-.ds-checkbox__1Vp5mb {
+.ds-checkbox__oSBnIJ {
   font-family: var(--ds-fontFamily-body);
   box-sizing: border-box;
   color: var(--ds-textColor-default);
@@ -41,7 +41,7 @@
   font-weight: var(--ds-fontWeight-regular);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-checkbox__1Vp5mb__input {
+.ds-checkbox__oSBnIJ__input {
   /* hide the default checkbox */
   appearance: none;
   /* For iOS < 15 to remove gradient background */
@@ -55,79 +55,79 @@
   flex-shrink: 0;
   margin-right: var(--ds-spacing-xSmall);
 }
-.ds-checkbox__1Vp5mb__input:focus-visible {
+.ds-checkbox__oSBnIJ__input: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-checkbox__1Vp5mb__input {
+.ds-checkbox__oSBnIJ__input {
   border-width: var(--ds-borderWidth-thin);
   border-style: solid;
   border-color: var(--ds-borderColor-default);
   /** unchecked **/
 }
-.ds-checkbox__1Vp5mb__input:hover, .ds-checkbox__1Vp5mb__input:active {
+.ds-checkbox__oSBnIJ__input:hover, .ds-checkbox__oSBnIJ__input:active {
   border-color: var(--ds-borderColor-default);
 }
-.ds-checkbox__1Vp5mb__input:hover {
+.ds-checkbox__oSBnIJ__input:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-checkbox__1Vp5mb__input:active {
+.ds-checkbox__oSBnIJ__input:active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-checkbox__1Vp5mb__input:disabled {
+.ds-checkbox__oSBnIJ__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
 @media (forced-colors: active) {
-  .ds-checkbox__1Vp5mb__input:disabled {
+  .ds-checkbox__oSBnIJ__input:disabled {
     border-color: GrayText;
   }
 }
-.ds-checkbox__1Vp5mb__input--invalid {
+.ds-checkbox__oSBnIJ__input--invalid {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-checkbox__1Vp5mb__input--invalid:hover {
+.ds-checkbox__oSBnIJ__input--invalid:hover {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-checkbox__1Vp5mb__input--invalid:active {
+.ds-checkbox__oSBnIJ__input--invalid:active {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-checkbox__1Vp5mb__input {
+.ds-checkbox__oSBnIJ__input {
   /** checked and indeterminate **/
 }
-.ds-checkbox__1Vp5mb__input--invalid:checked, .ds-checkbox__1Vp5mb__input--invalid:indeterminate {
+.ds-checkbox__oSBnIJ__input--invalid:checked, .ds-checkbox__oSBnIJ__input--invalid:indeterminate {
   background-color: var(--ds-iconColor-danger);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__1Vp5mb__input--invalid:checked:hover, .ds-checkbox__1Vp5mb__input--invalid:indeterminate:hover {
+.ds-checkbox__oSBnIJ__input--invalid:checked:hover, .ds-checkbox__oSBnIJ__input--invalid:indeterminate:hover {
   background-color: var(--ds-palette-red-60);
 }
-.ds-checkbox__1Vp5mb__input--invalid:checked:active, .ds-checkbox__1Vp5mb__input--invalid:indeterminate:active {
+.ds-checkbox__oSBnIJ__input--invalid:checked:active, .ds-checkbox__oSBnIJ__input--invalid:indeterminate:active {
   background-color: var(--ds-palette-red-70);
 }
-.ds-checkbox__1Vp5mb__input:not(.ds-checkbox__1Vp5mb__input--invalid):checked, .ds-checkbox__1Vp5mb__input:not(.ds-checkbox__1Vp5mb__input--invalid):indeterminate {
+.ds-checkbox__oSBnIJ__input:not(.ds-checkbox__oSBnIJ__input--invalid):checked, .ds-checkbox__oSBnIJ__input:not(.ds-checkbox__oSBnIJ__input--invalid):indeterminate {
   background-color: var(--ds-bgColor-primary);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__1Vp5mb__input:not(.ds-checkbox__1Vp5mb__input--invalid):checked:hover, .ds-checkbox__1Vp5mb__input:not(.ds-checkbox__1Vp5mb__input--invalid):indeterminate:hover {
+.ds-checkbox__oSBnIJ__input:not(.ds-checkbox__oSBnIJ__input--invalid):checked:hover, .ds-checkbox__oSBnIJ__input:not(.ds-checkbox__oSBnIJ__input--invalid):indeterminate:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-checkbox__1Vp5mb__input:not(.ds-checkbox__1Vp5mb__input--invalid):checked:active, .ds-checkbox__1Vp5mb__input:not(.ds-checkbox__1Vp5mb__input--invalid):indeterminate:active {
+.ds-checkbox__oSBnIJ__input:not(.ds-checkbox__oSBnIJ__input--invalid):checked:active, .ds-checkbox__oSBnIJ__input:not(.ds-checkbox__oSBnIJ__input--invalid):indeterminate:active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-checkbox__1Vp5mb__input:not(.ds-checkbox__1Vp5mb__input--invalid):checked:disabled, .ds-checkbox__1Vp5mb__input:not(.ds-checkbox__1Vp5mb__input--invalid):indeterminate:disabled {
+.ds-checkbox__oSBnIJ__input:not(.ds-checkbox__oSBnIJ__input--invalid):checked:disabled, .ds-checkbox__oSBnIJ__input:not(.ds-checkbox__oSBnIJ__input--invalid):indeterminate:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
 }
-.ds-checkbox__1Vp5mb__input {
+.ds-checkbox__oSBnIJ__input {
   /** checkmark **/
 }
-.ds-checkbox__1Vp5mb__input::before {
+.ds-checkbox__oSBnIJ__input::before {
   content: "";
   display: block;
   height: 1em;
@@ -136,36 +136,36 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-.ds-checkbox__1Vp5mb__input:checked::before {
+.ds-checkbox__oSBnIJ__input:checked::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>");
 }
-.ds-checkbox__1Vp5mb__input:indeterminate::before {
+.ds-checkbox__oSBnIJ__input:indeterminate::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>");
 }
-.ds-checkbox__1Vp5mb__input:checked:disabled::before {
+.ds-checkbox__oSBnIJ__input:checked:disabled::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>");
 }
-.ds-checkbox__1Vp5mb__input:indeterminate:disabled::before {
+.ds-checkbox__oSBnIJ__input:indeterminate:disabled::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>");
 }
-.ds-checkbox__1Vp5mb--no-margin .ds-checkbox__1Vp5mb__input {
+.ds-checkbox__oSBnIJ--no-margin .ds-checkbox__oSBnIJ__input {
   margin-right: 0;
 }
-.ds-checkbox__1Vp5mb--disabled {
+.ds-checkbox__oSBnIJ--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-checkbox__1Vp5mb__span--optional {
+.ds-checkbox__oSBnIJ__span--optional {
   color: var(--ds-textColor-secondary);
   font-size: var(--ds-fontSize-14);
 }
-.ds-checkbox__1Vp5mb:has(.ds-checkbox__1Vp5mb__input:disabled) {
+.ds-checkbox__oSBnIJ:has(.ds-checkbox__oSBnIJ__input:disabled) {
   cursor: not-allowed;
 }
 
-.ds-checkbox__1Vp5mb-error {
+.ds-checkbox__oSBnIJ-error {
   display: flex;
 }
-.ds-checkbox__1Vp5mb-error--visible {
+.ds-checkbox__oSBnIJ-error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }

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

@@ -42,7 +42,11 @@ export const Events = {
     </style>
     <ds-grid>
       <ds-grid>
-        <ds-card ds-heading="Events" ds-description="Toggle the checkbox to observe the events it triggers. Change events are emitted only on user interaction.">
+        <ds-card
+          ds-link-type="none"
+          ds-heading="Events"
+          ds-description="Toggle the checkbox to observe the events it triggers. Change events are emitted only on user interaction."
+        >
           <ul slot="content" id="checkbox-output" class="ds-bodytext-sm ds-m-sm">
             <li id="checkbox-output__checked">Checked: <span id="checkbox-output__checked-text">No</span></li>
             <li id="checkbox-output__focus">Has focus: <span id="checkbox-output__focus-text">No</span></li>

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

@@ -1,11 +1,11 @@
-.ds-checkbox-group__1Vp5mb {
+.ds-checkbox-group__oSBnIJ {
   display: inline-flex;
   flex-direction: column;
   border: none;
   padding: 0;
   margin: 0;
 }
-.ds-checkbox-group__1Vp5mb__legend {
+.ds-checkbox-group__oSBnIJ__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__1Vp5mb__assistive-text {
+.ds-checkbox-group__oSBnIJ__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__1Vp5mb__error {
+.ds-checkbox-group__oSBnIJ__error {
   display: flex;
 }
-.ds-checkbox-group__1Vp5mb__error--visible {
+.ds-checkbox-group__oSBnIJ__error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-checkbox-group__1Vp5mb > .ds-checkbox-group__1Vp5mb__checkboxes {
+.ds-checkbox-group__oSBnIJ > .ds-checkbox-group__oSBnIJ__checkboxes {
   display: inline-flex;
   flex-direction: column;
 }
-.ds-checkbox-group__1Vp5mb--inset {
+.ds-checkbox-group__oSBnIJ--inset {
   margin-left: var(--ds-spacing-medium);
 }
-.ds-checkbox-group__1Vp5mb--horizontal > .ds-checkbox-group__1Vp5mb__checkboxes {
+.ds-checkbox-group__oSBnIJ--horizontal > .ds-checkbox-group__oSBnIJ__checkboxes {
   flex-flow: row wrap;
   gap: var(--ds-spacing-small);
 }

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

@@ -288,7 +288,7 @@ export class DsCheckboxGroup {
         const checkboxesClasses = classNames(`${baseClass}__checkboxes`);
         const DsCheckbox = transformTagName('ds-checkbox', 'ds-checkbox-group', this.el);
         const DsInputValidity = transformTagName('ds-input-validity', 'ds-checkbox-group', this.el);
-        return (h("fieldset", { key: '6ba6b8548e3d6e3f91b1310c5c69d385073bd509', class: classes, id: this.fieldsetId, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, this.dsLabel && (h("legend", { key: '1256f55d3a1eb7d18f3992cd25c8659cd96eeb77', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (h("small", { key: '1ee9c34be040ed05fa51306cc307b7599d9df91d', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (h(Fragment, null, h(DsCheckbox, { ref: checkboxElem => (this.checkboxElem = checkboxElem), dsId: this.checkboxId, dsText: this.dsText, dsChecked: this.checkedChildElementCount === this.childElementsCount, dsDisabled: this.dsDisabled, dsIndeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate, dsErrorText: this.dsErrorText, dsErrorsDisabled: true }), h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), !!this.dsErrorText && (h("div", { key: '90bdad9d1cb4d57bc2c22b4d214c82f5a0480c44', class: errorClasses }, h(DsInputValidity, { key: '8e63def8cd2563e6cd5c978eee627a4cee9fab9d', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
+        return (h("fieldset", { key: '97c33f7bfa88e2f5e65ec4b2e1acf3eae38735a5', class: classes, id: this.fieldsetId, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, this.dsLabel && (h("legend", { key: '30fede2edca715e8c0f7be36e2f2b96818f668d1', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (h("small", { key: '28a6a32ccef64f5032cc5db8cad62e43695bed85', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (h(Fragment, null, h(DsCheckbox, { ref: checkboxElem => (this.checkboxElem = checkboxElem), dsId: this.checkboxId, dsText: this.dsText, dsChecked: this.checkedChildElementCount === this.childElementsCount, dsDisabled: this.dsDisabled, dsIndeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate, dsErrorText: this.dsErrorText, dsErrorsDisabled: true }), h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), !!this.dsErrorText && (h("div", { key: 'd8b664aed2374d434160f2434e3ad7e6075361eb', class: errorClasses }, h(DsInputValidity, { key: '2a6aa333b8c99be0034866eccdc2520df08fe1b7', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
     }
     static get is() { return "ds-checkbox-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -74,7 +74,11 @@ export const Events = {
     </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.">
+        <ds-card
+          ds-link-type="none"
+          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>

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

@@ -1,9 +1,9 @@
-.ds-chip__1Vp5mb:focus-visible {
+.ds-chip__oSBnIJ: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__1Vp5mb {
+.ds-chip__oSBnIJ {
   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__1Vp5mb:hover {
+.ds-chip__oSBnIJ:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-chip__1Vp5mb:active {
+.ds-chip__oSBnIJ:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-chip__1Vp5mb__text {
+.ds-chip__oSBnIJ__text {
   padding: 0 var(--ds-spacing-3xSmall);
 }

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

@@ -70,7 +70,7 @@ export class DsChip extends Mixin(ariaDeprecationFactory) {
         const ariaLabel = this.dsAriaLabel ?? this.inheritedAttributes['aria-label'];
         const Elem = resolvedRole ? 'div' : Fragment;
         const restAttributes = omit(this.inheritedAttributes, ['role', 'aria-label']);
-        return (h(Elem, { key: 'bc95b1c90077b8877be813414722c94ffc3e3894', role: resolvedRole }, h("button", { key: 'cd719e321e21b7286bfdbe785efc0d4cd170fa31', ref: el => (this.buttonEl = el), class: baseClass, id: this.dsId, name: this.name, form: this.dsForm, type: this.dsType, "aria-label": ariaLabel, ...restAttributes }, h("slot", { key: '4cfe8fddded972175cde63b1c894ad840adb1c02', name: "prefix" }, this.dsIcon && h(DsIcon, { key: '3284f346152098ead4c9c80fbebbca8cbb83e2b5', dsName: this.dsIcon, dsSize: "1rem" })), h("span", { key: 'fe6691ca5c114a60862face6bda7d8a48c527365', class: `${baseClass}__text` }, h("slot", { key: '1ca4e7c085635d5e38d88e803d5e13b7afc2e64a' }, this.dsText), h(DsVisuallyHidden, { key: '7dd2f06afa496041d81b531dbdca8601f22ef313', dsTag: "span" }, ", ", removeSelection())), h(DsIcon, { key: 'f8ef7a4cc84a10e8cbf1b095a5265baef89a957f', dsName: "close", dsSize: "1rem" }))));
+        return (h(Elem, { key: '371f7c04673f8502f88233737ca85171656fdcc0', role: resolvedRole }, h("button", { key: '8b49be3de497f1c0aff0b7bd2fe68f72d44aab3d', ref: el => (this.buttonEl = el), class: baseClass, id: this.dsId, name: this.name, form: this.dsForm, type: this.dsType, "aria-label": ariaLabel, ...restAttributes }, h("slot", { key: '1ed5ff4cba08a042fbaedb52f3e92a26f9101f92', name: "prefix" }, this.dsIcon && h(DsIcon, { key: 'e1605059499255cd7aa3c9d846353b8608bcefc4', dsName: this.dsIcon, dsSize: "1rem" })), h("span", { key: '3a3798b0824da46103ba0cba455dd2c5393addcd', class: `${baseClass}__text` }, h("slot", { key: 'ffaf74d9bbb17c882be1941de517b90db4ab29c5' }, this.dsText), h(DsVisuallyHidden, { key: 'a2833c2b0fdd05adfb78185f4f378b67b7d061e1', dsTag: "span" }, ", ", removeSelection())), h(DsIcon, { key: '9588bb2ebcf2a28cdbaa4126c0a88401fb18ad05', dsName: "close", dsSize: "1rem" }))));
     }
     static get is() { return "ds-chip"; }
     static get originalStyleUrls() {

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

@@ -1,4 +1,4 @@
-.ds-chip-group__1Vp5mb__chips {
+.ds-chip-group__oSBnIJ__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-chip-group/ds-chip-group.js

@@ -147,7 +147,7 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
         const ariaDescribedBy = this.dsAriaDescribedby || attrAriaDescribedBy || [!!this.dsAssistiveText && assistiveTextId].filter(Boolean).join(' ');
         const ariaLabel = this.dsAriaLabel || attrAriaLabel || this.dsLabel;
         const errorTextId = `${this.dsId}-error-text`;
-        return (h("div", { key: 'e9dd72a285559dcb33fa9f8ddcdbbc5d48fdc2e8', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', this.dsAriaLabelledby), ...ifDefined('aria-describedby', ariaDescribedBy), ...ifDefined('aria-labelledby', this.dsErrorText && errorTextId), ...restAttributes }, h(this.DsGroupLabel, { key: 'eac361e4327c233c20f437d77104dffbc8d36386', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: '8a2f488a74d3eb1d2001d40556f872dfa3619a1a', name: "label" }), h("slot", { key: '893129dcc1743de6f1bb055a189d45138ee08d7e', name: "assistiveText" })), h("div", { key: '027deb6e86ed2cd888397991f23e1def1c994d09', role: "list", class: `${baseClass}__chips` }, h("slot", { key: 'da2dcdb375e6d75bd0780c62a1bca76b8a8edef6' })), this.internals?.form && this.internals?.validity.valid && this.childChips.map(chip => h("input", { type: "hidden", name: this.dsName, value: chip.dsValue, key: chip.dsValue })), !!this.dsErrorText && h(this.DsInputValidity, { key: 'e2c584f02eac10ce82bc7b1c15052c5012d1def9', id: errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })));
+        return (h("div", { key: '33eb366e2d70716997ffd5b119818a7be52db5af', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', this.dsAriaLabelledby), ...ifDefined('aria-describedby', ariaDescribedBy), ...ifDefined('aria-labelledby', this.dsErrorText && errorTextId), ...restAttributes }, h(this.DsGroupLabel, { key: '917e6f249b06f09a8083ae76685bf1f7371e4d74', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: 'c4c04b11a8deb40a6db522359dcd7e29742b5d37', name: "label" }), h("slot", { key: 'b3b0d16ebf31f21fece76a3fbdf4caa5ff3fc855', name: "assistiveText" })), h("div", { key: '60c9a3553793e6b04458fbc1783a6e9a90c6c15b', role: "list", class: `${baseClass}__chips` }, h("slot", { key: '11441ab72ee4fabec90844ae693621cffeba8ac0' })), this.internals?.form && this.internals?.validity.valid && this.childChips.map(chip => h("input", { type: "hidden", name: this.dsName, value: chip.dsValue, key: chip.dsValue })), !!this.dsErrorText && h(this.DsInputValidity, { key: '6a0767d0c03d129b3e9a6b2dbd8b2d44f869fc90', id: errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })));
     }
     static get is() { return "ds-chip-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -94,6 +94,7 @@ export const Events = {
     <ds-grid>
       <ds-grid>
         <ds-card
+          ds-link-type="none"
           ds-heading="Events"
           ds-description="Use the chips in the group and the other controls to observe the events the group triggers. For implementation details, view 'Show code' in the Docs."
         >

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__1Vp5mb--full-width)) {
+  :host:not(:has(.ds-combobox__oSBnIJ--full-width)) {
     width: 20rem;
   }
 }
@@ -13,7 +13,7 @@
   position: relative;
 }
 
-.ds-combobox__1Vp5mb__input-container {
+.ds-combobox__oSBnIJ__input-container {
   position: relative;
   display: flex;
   align-items: center;
@@ -25,37 +25,37 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-combobox__1Vp5mb__input-container--disabled {
+.ds-combobox__oSBnIJ__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__1Vp5mb__input-container--disabled .ds-combobox__1Vp5mb__input-container__toggle-button {
+.ds-combobox__oSBnIJ__input-container--disabled .ds-combobox__oSBnIJ__input-container__toggle-button {
   cursor: not-allowed;
 }
-.ds-combobox__1Vp5mb__input-container--invalid {
+.ds-combobox__oSBnIJ__input-container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-combobox__1Vp5mb__input-container--invalid:not(.ds-combobox__1Vp5mb__input-container--open):not(.ds-combobox__1Vp5mb__input-container--disabled):hover {
+.ds-combobox__oSBnIJ__input-container--invalid:not(.ds-combobox__oSBnIJ__input-container--open):not(.ds-combobox__oSBnIJ__input-container--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-combobox__1Vp5mb__input-container--invalid:not(.ds-combobox__1Vp5mb__input-container--open):not(.ds-combobox__1Vp5mb__input-container--disabled):active {
+.ds-combobox__oSBnIJ__input-container--invalid:not(.ds-combobox__oSBnIJ__input-container--open):not(.ds-combobox__oSBnIJ__input-container--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
 }
-.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) {
+.ds-combobox__oSBnIJ__input-container:active:not(.ds-combobox__oSBnIJ__input-container--invalid, .ds-combobox__oSBnIJ__input-container--disabled, .ds-combobox__oSBnIJ__input-container--open) {
   background-color: var(--ds-bgColor-white-active);
 }
-.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 {
+.ds-combobox__oSBnIJ__input-container:not(.ds-combobox__oSBnIJ__input-container--open, .ds-combobox__oSBnIJ__input-container:has(> .ds-combobox__oSBnIJ__input-container__clear-button > button:focus), .ds-combobox__oSBnIJ__input-container--invalid, .ds-combobox__oSBnIJ__input-container--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.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) {
+.ds-combobox__oSBnIJ__input-container:has(> .ds-combobox__oSBnIJ__input-container__input:focus), .ds-combobox__oSBnIJ__input-container:has(> .ds-combobox__oSBnIJ__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__1Vp5mb__input-container__input {
+.ds-combobox__oSBnIJ__input-container__input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -69,47 +69,47 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-combobox__1Vp5mb__input-container__input::placeholder {
+.ds-combobox__oSBnIJ__input-container__input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-combobox__1Vp5mb__input-container__input:disabled {
+.ds-combobox__oSBnIJ__input-container__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__1Vp5mb__input-container__input:disabled::placeholder {
+.ds-combobox__oSBnIJ__input-container__input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__1Vp5mb__input-container__input:focus {
+.ds-combobox__oSBnIJ__input-container__input:focus {
   outline: none;
 }
-.ds-combobox__1Vp5mb__input-container__icon {
+.ds-combobox__oSBnIJ__input-container__icon {
   padding-left: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__1Vp5mb__input-container__icon + .ds-combobox__1Vp5mb__input-container__input {
+.ds-combobox__oSBnIJ__input-container__icon + .ds-combobox__oSBnIJ__input-container__input {
   padding-left: var(--ds-spacing-2xSmall);
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__1Vp5mb__input-container__badge-container {
+.ds-combobox__oSBnIJ__input-container__badge-container {
   pointer-events: none;
   user-select: none;
 }
-.ds-combobox__1Vp5mb__input-container__badge-container--padded {
+.ds-combobox__oSBnIJ__input-container__badge-container--padded {
   padding-right: calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall));
 }
-.ds-combobox__1Vp5mb__input-container__clear-button, .ds-combobox__1Vp5mb__input-container__toggle-button {
+.ds-combobox__oSBnIJ__input-container__clear-button, .ds-combobox__oSBnIJ__input-container__toggle-button {
   cursor: pointer;
 }
-.ds-combobox__1Vp5mb__input-container__toggle-button {
+.ds-combobox__oSBnIJ__input-container__toggle-button {
   color: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
-.ds-combobox__1Vp5mb__input-container__toggle-button:focus {
+.ds-combobox__oSBnIJ__input-container__toggle-button:focus {
   outline: none;
 }
-.ds-combobox__1Vp5mb__input-container__toggle-button__icon {
+.ds-combobox__oSBnIJ__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__1Vp5mb__options-container {
+.ds-combobox__oSBnIJ__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__1Vp5mb__options-container--open {
+.ds-combobox__oSBnIJ__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-combobox__1Vp5mb__options-container__options {
+.ds-combobox__oSBnIJ__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -141,7 +141,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-combobox__1Vp5mb__options-container__options__inner {
+.ds-combobox__oSBnIJ__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -152,7 +152,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-combobox__1Vp5mb__options-container__options__inner__top-scrim, .ds-combobox__1Vp5mb__options-container__options__inner__bottom-scrim {
+.ds-combobox__oSBnIJ__options-container__options__inner__top-scrim, .ds-combobox__oSBnIJ__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__1Vp5mb__options-container__options__inner__top-scrim--visible, .ds-combobox__1Vp5mb__options-container__options__inner__bottom-scrim--visible {
+.ds-combobox__oSBnIJ__options-container__options__inner__top-scrim--visible, .ds-combobox__oSBnIJ__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-combobox__1Vp5mb__options-container__options__inner__top-scrim {
+.ds-combobox__oSBnIJ__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__1Vp5mb__options-container__options__inner__top-scrim--dark {
+.ds-combobox__oSBnIJ__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__1Vp5mb__options-container__options__inner__bottom-scrim {
+.ds-combobox__oSBnIJ__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

@@ -131,15 +131,15 @@ export class DsCombobox extends Mixin(multipleValueFactory, disableEventsFactory
         oldValue?.forEach(opt => (opt.dsSelected = false));
         newValue.forEach(opt => (opt.dsSelected = true));
         const shouldEmit = this.getShouldEmit([hasChanged]);
-        this.setDisableEventEmits();
+        this.setDisableEventEmits(true);
         if (shouldEmit) {
             this.dsMultipleChange.emit({ values: newValues, added: addedValues, removed: removedValues });
             this.dsChange.emit(newValues[0] || null);
-            this.dsValidity.emit({
-                flag: this.internals?.validity.valid ? 'valid' : 'customError',
-                message: this.internals?.validationMessage,
-            });
         }
+        this.dsValidity.emit({
+            flag: this.internals?.validity.valid ? 'valid' : 'customError',
+            message: this.internals?.validationMessage,
+        });
         if (this.forceUpdateInputValue) {
             this.forceUpdateInputValue = false;
             this.setInputValue();
@@ -211,7 +211,6 @@ export class DsCombobox extends Mixin(multipleValueFactory, disableEventsFactory
         this.setSelectedOptionsFromValue(newValue);
     }
     dsValueObserver(newValue) {
-        this.setDisableEventEmits(true);
         this.forceUpdateInputValue = !this.isOpen;
         this.value = this.toValue(newValue);
     }
@@ -225,6 +224,7 @@ export class DsCombobox extends Mixin(multipleValueFactory, disableEventsFactory
     async handleOptionClick(option) {
         if (!option || option.dsDisabled)
             return;
+        this.setDisableEventEmits(false);
         if (this.inValue(option.dsValue) && this.isMultiple) {
             this.value = this.withoutValue(option.dsValue);
         }
@@ -245,7 +245,6 @@ export class DsCombobox extends Mixin(multipleValueFactory, disableEventsFactory
     }
     onDsValueChange(event) {
         if (this.selectedOptions.some(opt => opt.dsValue === event.detail.oldValue)) {
-            this.setDisableEventEmits(true);
             const valueWithoutOld = this.withoutValue(event.detail.oldValue);
             this.value = event.detail.newValue ? [...(valueWithoutOld || []), event.detail.newValue] : valueWithoutOld;
         }
@@ -272,6 +271,7 @@ export class DsCombobox extends Mixin(multipleValueFactory, disableEventsFactory
         }
     }
     componentWillLoad() {
+        this.setDisableEventEmits(true);
         this.badgeId = `${this.dsId}-badge`;
         this.labelId = `${this.dsId}-label`;
         this.assistiveTextId = `${this.dsId}-assistive-text`;
@@ -292,16 +292,13 @@ export class DsCombobox extends Mixin(multipleValueFactory, disableEventsFactory
         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));
                     }
                 }
@@ -607,6 +604,7 @@ export class DsCombobox extends Mixin(multipleValueFactory, disableEventsFactory
     handleClearButtonClick = (event) => {
         event.stopPropagation();
         this.unsetActiveOption();
+        this.setDisableEventEmits(false);
         this.value = this.toValue(null);
         if (this.isOpen) {
             this.closeCombobox('focus', '');

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

@@ -185,6 +185,7 @@ export const Events = {
     <ds-grid>
       <ds-grid>
         <ds-card
+          ds-link-type="none"
           ds-heading="Events"
           ds-description="Use the combobox and the other controls to observe the events it triggers. Change events are emitted only on user interaction. For implementation details, view 'Show code' in the Docs."
         >