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

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

@@ -1,4 +1,4 @@
-.ds-checkbox__MGLLcm-fieldset {
+.ds-checkbox__KmYz6O-fieldset {
   display: inline-flex;
   flex-direction: column;
   border: none;
@@ -6,7 +6,7 @@
   margin: 0;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-checkbox__MGLLcm-fieldset__legend {
+.ds-checkbox__KmYz6O-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__MGLLcm-fieldset__assistive-text {
+.ds-checkbox__KmYz6O-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__MGLLcm {
+.ds-checkbox__KmYz6O {
   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__MGLLcm__input {
+.ds-checkbox__KmYz6O__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__MGLLcm__input:focus-visible {
+.ds-checkbox__KmYz6O__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__MGLLcm__input {
+.ds-checkbox__KmYz6O__input {
   border-width: var(--ds-borderWidth-thin);
   border-style: solid;
   border-color: var(--ds-borderColor-default);
   /** unchecked **/
 }
-.ds-checkbox__MGLLcm__input:hover, .ds-checkbox__MGLLcm__input:active {
+.ds-checkbox__KmYz6O__input:hover, .ds-checkbox__KmYz6O__input:active {
   border-color: var(--ds-borderColor-default);
 }
-.ds-checkbox__MGLLcm__input:hover {
+.ds-checkbox__KmYz6O__input:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-checkbox__MGLLcm__input:active {
+.ds-checkbox__KmYz6O__input:active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-checkbox__MGLLcm__input:disabled {
+.ds-checkbox__KmYz6O__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__MGLLcm__input:disabled {
+  .ds-checkbox__KmYz6O__input:disabled {
     border-color: GrayText;
   }
 }
-.ds-checkbox__MGLLcm__input--invalid {
+.ds-checkbox__KmYz6O__input--invalid {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-checkbox__MGLLcm__input--invalid:hover {
+.ds-checkbox__KmYz6O__input--invalid:hover {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-checkbox__MGLLcm__input--invalid:active {
+.ds-checkbox__KmYz6O__input--invalid:active {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-checkbox__MGLLcm__input {
+.ds-checkbox__KmYz6O__input {
   /** checked and indeterminate **/
 }
-.ds-checkbox__MGLLcm__input--invalid:checked, .ds-checkbox__MGLLcm__input--invalid:indeterminate {
+.ds-checkbox__KmYz6O__input--invalid:checked, .ds-checkbox__KmYz6O__input--invalid:indeterminate {
   background-color: var(--ds-iconColor-danger);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__MGLLcm__input--invalid:checked:hover, .ds-checkbox__MGLLcm__input--invalid:indeterminate:hover {
+.ds-checkbox__KmYz6O__input--invalid:checked:hover, .ds-checkbox__KmYz6O__input--invalid:indeterminate:hover {
   background-color: var(--ds-palette-red-60);
 }
-.ds-checkbox__MGLLcm__input--invalid:checked:active, .ds-checkbox__MGLLcm__input--invalid:indeterminate:active {
+.ds-checkbox__KmYz6O__input--invalid:checked:active, .ds-checkbox__KmYz6O__input--invalid:indeterminate:active {
   background-color: var(--ds-palette-red-70);
 }
-.ds-checkbox__MGLLcm__input:not(.ds-checkbox__MGLLcm__input--invalid):checked, .ds-checkbox__MGLLcm__input:not(.ds-checkbox__MGLLcm__input--invalid):indeterminate {
+.ds-checkbox__KmYz6O__input:not(.ds-checkbox__KmYz6O__input--invalid):checked, .ds-checkbox__KmYz6O__input:not(.ds-checkbox__KmYz6O__input--invalid):indeterminate {
   background-color: var(--ds-bgColor-primary);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__MGLLcm__input:not(.ds-checkbox__MGLLcm__input--invalid):checked:hover, .ds-checkbox__MGLLcm__input:not(.ds-checkbox__MGLLcm__input--invalid):indeterminate:hover {
+.ds-checkbox__KmYz6O__input:not(.ds-checkbox__KmYz6O__input--invalid):checked:hover, .ds-checkbox__KmYz6O__input:not(.ds-checkbox__KmYz6O__input--invalid):indeterminate:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-checkbox__MGLLcm__input:not(.ds-checkbox__MGLLcm__input--invalid):checked:active, .ds-checkbox__MGLLcm__input:not(.ds-checkbox__MGLLcm__input--invalid):indeterminate:active {
+.ds-checkbox__KmYz6O__input:not(.ds-checkbox__KmYz6O__input--invalid):checked:active, .ds-checkbox__KmYz6O__input:not(.ds-checkbox__KmYz6O__input--invalid):indeterminate:active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-checkbox__MGLLcm__input:not(.ds-checkbox__MGLLcm__input--invalid):checked:disabled, .ds-checkbox__MGLLcm__input:not(.ds-checkbox__MGLLcm__input--invalid):indeterminate:disabled {
+.ds-checkbox__KmYz6O__input:not(.ds-checkbox__KmYz6O__input--invalid):checked:disabled, .ds-checkbox__KmYz6O__input:not(.ds-checkbox__KmYz6O__input--invalid):indeterminate:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
 }
-.ds-checkbox__MGLLcm__input {
+.ds-checkbox__KmYz6O__input {
   /** checkmark **/
 }
-.ds-checkbox__MGLLcm__input::before {
+.ds-checkbox__KmYz6O__input::before {
   content: "";
   display: block;
   height: 1em;
@@ -136,36 +136,36 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-.ds-checkbox__MGLLcm__input:checked::before {
+.ds-checkbox__KmYz6O__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__MGLLcm__input:indeterminate::before {
+.ds-checkbox__KmYz6O__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__MGLLcm__input:checked:disabled::before {
+.ds-checkbox__KmYz6O__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__MGLLcm__input:indeterminate:disabled::before {
+.ds-checkbox__KmYz6O__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__MGLLcm--no-margin .ds-checkbox__MGLLcm__input {
+.ds-checkbox__KmYz6O--no-margin .ds-checkbox__KmYz6O__input {
   margin-right: 0;
 }
-.ds-checkbox__MGLLcm--disabled {
+.ds-checkbox__KmYz6O--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-checkbox__MGLLcm__span--optional {
+.ds-checkbox__KmYz6O__span--optional {
   color: var(--ds-textColor-secondary);
   font-size: var(--ds-fontSize-14);
 }
-.ds-checkbox__MGLLcm:has(.ds-checkbox__MGLLcm__input:disabled) {
+.ds-checkbox__KmYz6O:has(.ds-checkbox__KmYz6O__input:disabled) {
   cursor: not-allowed;
 }
 
-.ds-checkbox__MGLLcm-error {
+.ds-checkbox__KmYz6O-error {
   display: flex;
 }
-.ds-checkbox__MGLLcm-error--visible {
+.ds-checkbox__KmYz6O-error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }

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

@@ -680,7 +680,8 @@ export class DsCheckbox extends Mixin(ariaDeprecationFactory, disableEventsFacto
                         "DsSubmitInvalidEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent",
+                            "referenceLocation": "DsSubmitInvalidEvent"
                         }
                     }
                 }
@@ -701,7 +702,8 @@ export class DsCheckbox extends Mixin(ariaDeprecationFactory, disableEventsFacto
                         "DsValidityEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent",
+                            "referenceLocation": "DsValidityEvent"
                         }
                     }
                 }

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__MGLLcm {
+.ds-checkbox-group__KmYz6O {
   display: inline-flex;
   flex-direction: column;
   border: none;
   padding: 0;
   margin: 0;
 }
-.ds-checkbox-group__MGLLcm__legend {
+.ds-checkbox-group__KmYz6O__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__MGLLcm__assistive-text {
+.ds-checkbox-group__KmYz6O__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__MGLLcm__error {
+.ds-checkbox-group__KmYz6O__error {
   display: flex;
 }
-.ds-checkbox-group__MGLLcm__error--visible {
+.ds-checkbox-group__KmYz6O__error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-checkbox-group__MGLLcm > .ds-checkbox-group__MGLLcm__checkboxes {
+.ds-checkbox-group__KmYz6O > .ds-checkbox-group__KmYz6O__checkboxes {
   display: inline-flex;
   flex-direction: column;
 }
-.ds-checkbox-group__MGLLcm--inset {
+.ds-checkbox-group__KmYz6O--inset {
   margin-left: var(--ds-spacing-medium);
 }
-.ds-checkbox-group__MGLLcm--horizontal > .ds-checkbox-group__MGLLcm__checkboxes {
+.ds-checkbox-group__KmYz6O--horizontal > .ds-checkbox-group__KmYz6O__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: 'f4a2a1a756d5462350de2edaa9aed784a83e0d09', 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: '5cbaa003cc6889bc6236ab319aa19fa78a55738e', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (h("small", { key: '7d80e58250290c5dcd5e97d883340196b3bdbda7', 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: '405b931a1db8fe270b31840e74ab5f81a6d859dd', class: errorClasses }, h(DsInputValidity, { key: 'ab659a093a9a5b8f9ced356e1f2580b772e58c3e', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
     }
     static get is() { return "ds-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -674,7 +674,8 @@ export class DsCheckboxGroup {
                         "DsSubmitInvalidEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent",
+                            "referenceLocation": "DsSubmitInvalidEvent"
                         }
                     }
                 }
@@ -695,7 +696,8 @@ export class DsCheckboxGroup {
                         "DsValidityEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent",
+                            "referenceLocation": "DsValidityEvent"
                         }
                     }
                 }

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__MGLLcm:focus-visible {
+.ds-chip__KmYz6O: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__MGLLcm {
+.ds-chip__KmYz6O {
   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__MGLLcm:hover {
+.ds-chip__KmYz6O:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-chip__MGLLcm:active {
+.ds-chip__KmYz6O:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-chip__MGLLcm__text {
+.ds-chip__KmYz6O__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: '5e8fac24a20ef512b186789fb1c7884b01d4a134', role: resolvedRole }, h("button", { key: '2ca4745f784e31dea050d4bf3f5b726a90635707', 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: '7b5cd3d4e3adaeb8e155f2a010a40af90d778dbe', name: "prefix" }, this.dsIcon && h(DsIcon, { key: '8b77eaa9122d68572ed39a707e795d408dbdc5d2', dsName: this.dsIcon, dsSize: "1rem" })), h("span", { key: '70e7f1a4235e8f427a18bdae863c93b4d48490ce', class: `${baseClass}__text` }, h("slot", { key: 'ccc96fdcb6b8576b0a56539ce0e219b0a65c0d17' }, this.dsText), h(DsVisuallyHidden, { key: '797a97d887309696dffa97a06fa9f315ee8413e9', dsTag: "span" }, ", ", removeSelection())), h(DsIcon, { key: 'dc664f8b8afbdc823605a6c36455152ddccf1a66', 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__MGLLcm__chips {
+.ds-chip-group__KmYz6O__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: '3d997105e24947a53a36e592319a44ebc722f9f5', 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: '23b0f596dc6ab52eeb6f5a5672438e3b1480c51a', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: 'de5b26bea865bae644051c906246429f13311f5c', name: "label" }), h("slot", { key: '73e8e3fce131d9425363e1923f9c5d5edb32c889', name: "assistiveText" })), h("div", { key: '10fa94cd28f8a7ea592129acbd3469beaf642ff2', role: "list", class: `${baseClass}__chips` }, h("slot", { key: '2f464bd8dabc4f00a83e4ec33fc3a13da70663e0' })), 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: '30e5a9059ed2cb8cc89f78e8282bfdf192c65cf3', id: errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })));
     }
     static get is() { return "ds-chip-group"; }
     static get encapsulation() { return "scoped"; }
@@ -381,7 +381,8 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
                         "DsChipClickEvent": {
                             "location": "import",
                             "path": "../ds-chip/ds-chip",
-                            "id": "src/components/01-base-components/ds-chip/ds-chip.tsx::DsChipClickEvent"
+                            "id": "src/components/01-base-components/ds-chip/ds-chip.tsx::DsChipClickEvent",
+                            "referenceLocation": "DsChipClickEvent"
                         }
                     }
                 }
@@ -402,7 +403,8 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
                         "DsSubmitInvalidEvent": {
                             "location": "import",
                             "path": "../../..",
-                            "id": "src/index.ts::DsSubmitInvalidEvent"
+                            "id": "src/index.ts::DsSubmitInvalidEvent",
+                            "referenceLocation": "DsSubmitInvalidEvent"
                         }
                     }
                 }
@@ -423,7 +425,8 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
                         "DsValidityEvent": {
                             "location": "import",
                             "path": "../../..",
-                            "id": "src/index.ts::DsValidityEvent"
+                            "id": "src/index.ts::DsValidityEvent",
+                            "referenceLocation": "DsValidityEvent"
                         }
                     }
                 }

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