@uh-design-system/component-library 1.1.0 → 1.2.0-rc.0

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

@@ -1,4 +1,4 @@
-.ds-checkbox__JDwdTJ-fieldset {
+.ds-checkbox__nkrEji-fieldset {
   display: inline-flex;
   flex-direction: column;
   border: none;
@@ -6,7 +6,7 @@
   margin: 0;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-checkbox__JDwdTJ-fieldset__legend {
+.ds-checkbox__nkrEji-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__JDwdTJ-fieldset__assistive-text {
+.ds-checkbox__nkrEji-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__JDwdTJ {
+.ds-checkbox__nkrEji {
   font-family: var(--ds-fontFamily-body);
   box-sizing: border-box;
   color: var(--ds-textColor-default);
@@ -42,7 +42,7 @@
   font-weight: var(--ds-fontWeight-regular);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-checkbox__JDwdTJ__input {
+.ds-checkbox__nkrEji__input {
   cursor: pointer;
   /* hide the default checkbox */
   appearance: none;
@@ -57,79 +57,79 @@
   flex-shrink: 0;
   margin-right: var(--ds-spacing-xSmall);
 }
-.ds-checkbox__JDwdTJ__input:focus-visible {
+.ds-checkbox__nkrEji__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__JDwdTJ__input {
+.ds-checkbox__nkrEji__input {
   border-width: var(--ds-borderWidth-thin);
   border-style: solid;
   border-color: var(--ds-borderColor-default);
   /** unchecked **/
 }
-.ds-checkbox__JDwdTJ__input:hover, .ds-checkbox__JDwdTJ__input:active {
+.ds-checkbox__nkrEji__input:hover, .ds-checkbox__nkrEji__input:active {
   border-color: var(--ds-borderColor-default);
 }
-.ds-checkbox__JDwdTJ__input:hover {
+.ds-checkbox__nkrEji__input:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-checkbox__JDwdTJ__input:active {
+.ds-checkbox__nkrEji__input:active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-checkbox__JDwdTJ__input:disabled {
+.ds-checkbox__nkrEji__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__JDwdTJ__input:disabled {
+  .ds-checkbox__nkrEji__input:disabled {
     border-color: GrayText;
   }
 }
-.ds-checkbox__JDwdTJ__input--invalid {
+.ds-checkbox__nkrEji__input--invalid {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-checkbox__JDwdTJ__input--invalid:hover {
+.ds-checkbox__nkrEji__input--invalid:hover {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-checkbox__JDwdTJ__input--invalid:active {
+.ds-checkbox__nkrEji__input--invalid:active {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-checkbox__JDwdTJ__input {
+.ds-checkbox__nkrEji__input {
   /** checked and indeterminate **/
 }
-.ds-checkbox__JDwdTJ__input--invalid:checked, .ds-checkbox__JDwdTJ__input--invalid:indeterminate {
+.ds-checkbox__nkrEji__input--invalid:checked, .ds-checkbox__nkrEji__input--invalid:indeterminate {
   background-color: var(--ds-iconColor-danger);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__JDwdTJ__input--invalid:checked:hover, .ds-checkbox__JDwdTJ__input--invalid:indeterminate:hover {
+.ds-checkbox__nkrEji__input--invalid:checked:hover, .ds-checkbox__nkrEji__input--invalid:indeterminate:hover {
   background-color: var(--ds-palette-red-60);
 }
-.ds-checkbox__JDwdTJ__input--invalid:checked:active, .ds-checkbox__JDwdTJ__input--invalid:indeterminate:active {
+.ds-checkbox__nkrEji__input--invalid:checked:active, .ds-checkbox__nkrEji__input--invalid:indeterminate:active {
   background-color: var(--ds-palette-red-70);
 }
-.ds-checkbox__JDwdTJ__input:not(.ds-checkbox__JDwdTJ__input--invalid):checked, .ds-checkbox__JDwdTJ__input:not(.ds-checkbox__JDwdTJ__input--invalid):indeterminate {
+.ds-checkbox__nkrEji__input:not(.ds-checkbox__nkrEji__input--invalid):checked, .ds-checkbox__nkrEji__input:not(.ds-checkbox__nkrEji__input--invalid):indeterminate {
   background-color: var(--ds-bgColor-primary);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__JDwdTJ__input:not(.ds-checkbox__JDwdTJ__input--invalid):checked:hover, .ds-checkbox__JDwdTJ__input:not(.ds-checkbox__JDwdTJ__input--invalid):indeterminate:hover {
+.ds-checkbox__nkrEji__input:not(.ds-checkbox__nkrEji__input--invalid):checked:hover, .ds-checkbox__nkrEji__input:not(.ds-checkbox__nkrEji__input--invalid):indeterminate:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-checkbox__JDwdTJ__input:not(.ds-checkbox__JDwdTJ__input--invalid):checked:active, .ds-checkbox__JDwdTJ__input:not(.ds-checkbox__JDwdTJ__input--invalid):indeterminate:active {
+.ds-checkbox__nkrEji__input:not(.ds-checkbox__nkrEji__input--invalid):checked:active, .ds-checkbox__nkrEji__input:not(.ds-checkbox__nkrEji__input--invalid):indeterminate:active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-checkbox__JDwdTJ__input:not(.ds-checkbox__JDwdTJ__input--invalid):checked:disabled, .ds-checkbox__JDwdTJ__input:not(.ds-checkbox__JDwdTJ__input--invalid):indeterminate:disabled {
+.ds-checkbox__nkrEji__input:not(.ds-checkbox__nkrEji__input--invalid):checked:disabled, .ds-checkbox__nkrEji__input:not(.ds-checkbox__nkrEji__input--invalid):indeterminate:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
 }
-.ds-checkbox__JDwdTJ__input {
+.ds-checkbox__nkrEji__input {
   /** checkmark **/
 }
-.ds-checkbox__JDwdTJ__input::before {
+.ds-checkbox__nkrEji__input::before {
   content: "";
   display: block;
   height: 1em;
@@ -138,36 +138,36 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-.ds-checkbox__JDwdTJ__input:checked::before {
+.ds-checkbox__nkrEji__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__JDwdTJ__input:indeterminate::before {
+.ds-checkbox__nkrEji__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__JDwdTJ__input:checked:disabled::before {
+.ds-checkbox__nkrEji__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__JDwdTJ__input:indeterminate:disabled::before {
+.ds-checkbox__nkrEji__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__JDwdTJ--no-margin .ds-checkbox__JDwdTJ__input {
+.ds-checkbox__nkrEji--no-margin .ds-checkbox__nkrEji__input {
   margin-right: 0;
 }
-.ds-checkbox__JDwdTJ--disabled {
+.ds-checkbox__nkrEji--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-checkbox__JDwdTJ__span--optional {
+.ds-checkbox__nkrEji__span--optional {
   color: var(--ds-textColor-secondary);
   font-size: var(--ds-fontSize-14);
 }
-.ds-checkbox__JDwdTJ:has(.ds-checkbox__JDwdTJ__input:disabled) {
+.ds-checkbox__nkrEji:has(.ds-checkbox__nkrEji__input:disabled) {
   cursor: not-allowed;
 }
 
-.ds-checkbox__JDwdTJ-error {
+.ds-checkbox__nkrEji-error {
   display: flex;
 }
-.ds-checkbox__JDwdTJ-error--visible {
+.ds-checkbox__nkrEji-error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }

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

@@ -1,11 +1,11 @@
-.ds-checkbox-group__JDwdTJ {
+.ds-checkbox-group__nkrEji {
   display: inline-flex;
   flex-direction: column;
   border: none;
   padding: 0;
   margin: 0;
 }
-.ds-checkbox-group__JDwdTJ__legend {
+.ds-checkbox-group__nkrEji__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__JDwdTJ__assistive-text {
+.ds-checkbox-group__nkrEji__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__JDwdTJ__error {
+.ds-checkbox-group__nkrEji__error {
   display: flex;
 }
-.ds-checkbox-group__JDwdTJ__error--visible {
+.ds-checkbox-group__nkrEji__error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-checkbox-group__JDwdTJ > .ds-checkbox-group__JDwdTJ__checkboxes {
+.ds-checkbox-group__nkrEji > .ds-checkbox-group__nkrEji__checkboxes {
   display: inline-flex;
   flex-direction: column;
 }
-.ds-checkbox-group__JDwdTJ--inset {
+.ds-checkbox-group__nkrEji--inset {
   margin-left: var(--ds-spacing-medium);
 }
-.ds-checkbox-group__JDwdTJ--horizontal > .ds-checkbox-group__JDwdTJ__checkboxes {
+.ds-checkbox-group__nkrEji--horizontal > .ds-checkbox-group__nkrEji__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: 'b64380214102bebb0d789d6018886ebfdac43fa7', 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: 'b87e70138eb56171591c462caa5680682508e9a7', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (h("small", { key: '79e979270d9eaedbb7ad48b39b47f0a5d4317d2f', 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: '2b499ffdde772785b2350413a8a59c0920e3f1e5', class: errorClasses }, h(DsInputValidity, { key: '2863135ff88780448f28ac9f57a8b78e5b47d1f9', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
+        return (h("fieldset", { key: 'c4060d2878ae9d424608f81bb482af3f079de37c', 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: 'fb673485fdadfaa19907f76029dc8eee0955fa5d', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (h("small", { key: 'c313974eb63843527671f4ea822f2dfc5b593d1c', 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: 'fe7a22bf3dca643ea10c14bc0c256b0f5ea83a23', class: errorClasses }, h(DsInputValidity, { key: '76e97293f3276fb7771a608851df78ca2f694e41', 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-chip/ds-chip.css

@@ -1,9 +1,9 @@
-.ds-chip__JDwdTJ:focus-visible {
+.ds-chip__nkrEji: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__JDwdTJ {
+.ds-chip__nkrEji {
   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__JDwdTJ:hover {
+.ds-chip__nkrEji:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-chip__JDwdTJ:active {
+.ds-chip__nkrEji:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-chip__JDwdTJ__text {
+.ds-chip__nkrEji__text {
   padding: 0 var(--ds-spacing-3xSmall);
 }

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

@@ -61,7 +61,7 @@ export class DsChip {
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-chip', this.el);
         const Elem = this.inheritedAttributes.role ? 'div' : Fragment;
         const { role, ...restAttributes } = this.inheritedAttributes;
-        return (h(Elem, { key: 'b885f572d06954ffe8b7d72ebe8a7092f2ed46fe', role: role }, h("button", { key: '21294a3220bd575128a1b92442f006da7444e1f2', ref: el => (this.buttonEl = el), class: baseClass, id: this.dsId, name: this.name, form: this.dsForm, type: this.dsType, ...restAttributes }, h("slot", { key: '1009e69d5a99201662a9c05ac5d9f05a1e10faa9', name: "prefix" }, this.dsIcon && h(DsIcon, { key: 'b34b053fcf8ad0363893e6f2a15b1d65096b6d50', dsName: this.dsIcon, dsSize: "1rem" })), h("span", { key: 'dccce4141f97b37bde7f6e192bcfa62f3e329227', class: `${baseClass}__text` }, h("slot", { key: 'aa55f0c6c9f148e7d5f3d0c074651140eb28c8f7' }, this.dsText), h(DsVisuallyHidden, { key: '7c125b88cab746e923d4a1dbeaca69c8c6e638fa', dsTag: "span" }, ", ", removeSelection())), h(DsIcon, { key: '1ff5478cbc6163a27dde651314270007a928a081', dsName: "close", dsSize: "1rem" }))));
+        return (h(Elem, { key: 'd6d0e700274168c3bdad700373065ce1461a5eee', role: role }, h("button", { key: '770ae1766f0de7664b141a6e53ad0a04d3ab37b0', ref: el => (this.buttonEl = el), class: baseClass, id: this.dsId, name: this.name, form: this.dsForm, type: this.dsType, ...restAttributes }, h("slot", { key: '0910eaac3193f00a3b751ea28bb38dd1d243ce5c', name: "prefix" }, this.dsIcon && h(DsIcon, { key: 'd319b05f4428c8dbcb6fadac5e14efb5d5161fc8', dsName: this.dsIcon, dsSize: "1rem" })), h("span", { key: '12b530c87605d6c965a40a018da975fc22e6686b', class: `${baseClass}__text` }, h("slot", { key: '95914131342f5e320cffdcf60592b900c42caf7e' }, this.dsText), h(DsVisuallyHidden, { key: 'f305e96fc82f06f7b4bdd49bba5571da85dceaa8', dsTag: "span" }, ", ", removeSelection())), h(DsIcon, { key: 'b59e33d8d7dcc5a358d9be79f5b2f45abe6ee021', 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__JDwdTJ__chips {
+.ds-chip-group__nkrEji__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

@@ -139,7 +139,7 @@ export class DsChipGroup {
         const ariaDescribedBy = attrAriaDescribedBy || [!!this.dsAssistiveText && assistiveTextId].filter(Boolean).join(' ');
         const ariaLabel = attrAriaLabel || this.dsLabel;
         const errorTextId = `${this.dsId}-error-text`;
-        return (h("div", { key: '8c2e1ff12270960700585bda2e6424bf22377a39', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...ifDefined('aria-labelledby', this.dsErrorText && errorTextId), ...restAttributes }, h(this.DsGroupLabel, { key: 'e98e969033876de30e4959cd331ea1eca49fd670', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: '6611f352ea98a3e57e47ae56175b3acac287728c', name: "label" }), h("slot", { key: 'b34ad08d9e4672ac4c722c9501017597ed698935', name: "assistiveText" })), h("div", { key: '36ab80ab6a2565ab72a5c8f53fb0428ff50ac5f4', role: "list", class: `${baseClass}__chips` }, h("slot", { key: '7c105c033cf72a61305675bf8369309484617d7c' })), this.internals?.form && this.internals?.validity.valid && this.childChips.map(chip => h("input", { type: "hidden", name: this.dsName, value: chip.dsValue })), !!this.dsErrorText && h(this.DsInputValidity, { key: 'dd86654cd86d1d1c651fb958c5a46e742921291c', id: errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })));
+        return (h("div", { key: '41ba94f4a8898d18d37bd0d8df391026557796d6', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...ifDefined('aria-labelledby', this.dsErrorText && errorTextId), ...restAttributes }, h(this.DsGroupLabel, { key: 'aa3d31ed648edf57ba1f6929727ed87ab9289779', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: 'c1782ce439560d8d19e11a3bbbdfff12f5e51480', name: "label" }), h("slot", { key: 'bd07c9363d59341a74cbaa36a70bf2f201a9e5cf', name: "assistiveText" })), h("div", { key: 'b66e9d4d9c2229e97ce6de3c97b649552e5c3ec6', role: "list", class: `${baseClass}__chips` }, h("slot", { key: '8a7b1e640b9bfdf16a8230ab71ba7718e9f0dc79' })), 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: '640d582c5c224a1df088b8ef5b301c1bf1f96dbb', id: errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })));
     }
     static get is() { return "ds-chip-group"; }
     static get encapsulation() { return "scoped"; }
@@ -307,7 +307,7 @@ export class DsChipGroup {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when a chip in the group is clicked.\nReturns the index of the clicked chip."
+                    "text": "Emitted when a chip in the group is clicked.\nReturns the `dsValue` of the clicked chip."
                 },
                 "complexType": {
                     "original": "DsChipClickEvent",

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__JDwdTJ--full-width)) {
+  :host:not(:has(.ds-combobox__nkrEji--full-width)) {
     width: 20rem;
   }
 }
@@ -13,7 +13,7 @@
   position: relative;
 }
 
-.ds-combobox__JDwdTJ__input-container {
+.ds-combobox__nkrEji__input-container {
   position: relative;
   display: flex;
   align-items: center;
@@ -25,42 +25,42 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-combobox__JDwdTJ__input-container--disabled {
+.ds-combobox__nkrEji__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__JDwdTJ__input-container--disabled .ds-combobox__JDwdTJ__input-container__toggle-button {
+.ds-combobox__nkrEji__input-container--disabled .ds-combobox__nkrEji__input-container__toggle-button {
   cursor: not-allowed;
 }
-.ds-combobox__JDwdTJ__input-container--invalid {
+.ds-combobox__nkrEji__input-container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-combobox__JDwdTJ__input-container--invalid:not(.ds-combobox__JDwdTJ__input-container--open):not(.ds-combobox__JDwdTJ__input-container--disabled):hover {
+.ds-combobox__nkrEji__input-container--invalid:not(.ds-combobox__nkrEji__input-container--open):not(.ds-combobox__nkrEji__input-container--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-combobox__JDwdTJ__input-container--invalid:not(.ds-combobox__JDwdTJ__input-container--open):not(.ds-combobox__JDwdTJ__input-container--disabled):active {
+.ds-combobox__nkrEji__input-container--invalid:not(.ds-combobox__nkrEji__input-container--open):not(.ds-combobox__nkrEji__input-container--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-combobox__JDwdTJ__input-container:active:not(.ds-combobox__JDwdTJ__input-container--invalid, .ds-combobox__JDwdTJ__input-container--disabled) {
+.ds-combobox__nkrEji__input-container:active:not(.ds-combobox__nkrEji__input-container--invalid, .ds-combobox__nkrEji__input-container--disabled, .ds-combobox__nkrEji__input-container--open) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-combobox__JDwdTJ__input-container:not(.ds-combobox__JDwdTJ__input-container--open, .ds-combobox__JDwdTJ__input-container:has(> .ds-combobox__JDwdTJ__input-container__clear-button > button:focus), .ds-combobox__JDwdTJ__input-container--invalid, .ds-combobox__JDwdTJ__input-container--disabled):hover {
+.ds-combobox__nkrEji__input-container:not(.ds-combobox__nkrEji__input-container--open, .ds-combobox__nkrEji__input-container:has(> .ds-combobox__nkrEji__input-container__clear-button > button:focus), .ds-combobox__nkrEji__input-container--invalid, .ds-combobox__nkrEji__input-container--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-combobox__JDwdTJ__input-container:has(> .ds-combobox__JDwdTJ__input-container__input:focus), .ds-combobox__JDwdTJ__input-container:has(> .ds-combobox__JDwdTJ__input-container__clear-button > button:focus) {
+.ds-combobox__nkrEji__input-container:has(> .ds-combobox__nkrEji__input-container__input:focus), .ds-combobox__nkrEji__input-container:has(> .ds-combobox__nkrEji__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__JDwdTJ__input-container__input {
+.ds-combobox__nkrEji__input-container__input {
   width: 100%;
   height: 100%;
   border: 0;
   background: none;
-  color: inherit;
+  color: var(--ds-textColor-default);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
   font-family: var(--ds-fontFamily-body);
@@ -69,36 +69,47 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-combobox__JDwdTJ__input-container__input::placeholder {
+.ds-combobox__nkrEji__input-container__input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-combobox__JDwdTJ__input-container__input:disabled {
+.ds-combobox__nkrEji__input-container__input:disabled {
   cursor: not-allowed;
+  color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__JDwdTJ__input-container__input:disabled::placeholder {
+.ds-combobox__nkrEji__input-container__input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__JDwdTJ__input-container__input:focus {
+.ds-combobox__nkrEji__input-container__input:focus {
   outline: none;
 }
-.ds-combobox__JDwdTJ__input-container__icon {
+.ds-combobox__nkrEji__input-container__icon {
   padding-left: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__JDwdTJ__input-container__icon + .ds-combobox__JDwdTJ__input-container__input {
+.ds-combobox__nkrEji__input-container__icon + .ds-combobox__nkrEji__input-container__input {
   padding-left: var(--ds-spacing-2xSmall);
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__JDwdTJ__input-container__clear-button, .ds-combobox__JDwdTJ__input-container__toggle-button {
+.ds-combobox__nkrEji__input-container__badge-container {
+  pointer-events: none;
+  user-select: none;
+}
+.ds-combobox__nkrEji__input-container__badge-container--padded {
+  padding-right: calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall));
+}
+.ds-combobox__nkrEji__input-container__clear-button, .ds-combobox__nkrEji__input-container__toggle-button {
   cursor: pointer;
 }
-.ds-combobox__JDwdTJ__input-container__toggle-button {
+.ds-combobox__nkrEji__input-container__toggle-button {
   color: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
-.ds-combobox__JDwdTJ__input-container__toggle-button__icon {
+.ds-combobox__nkrEji__input-container__toggle-button:focus {
+  outline: none;
+}
+.ds-combobox__nkrEji__input-container__toggle-button__icon {
   align-items: center;
   align-self: stretch;
   border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);
@@ -107,7 +118,7 @@
   pointer-events: none;
   padding: 0 var(--ds-spacing-2xSmall);
 }
-.ds-combobox__JDwdTJ__options-container {
+.ds-combobox__nkrEji__options-container {
   display: none;
   position: absolute;
   top: 100%;
@@ -117,11 +128,11 @@
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   background-color: var(--ds-bgColor-white);
 }
-.ds-combobox__JDwdTJ__options-container--open {
+.ds-combobox__nkrEji__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-combobox__JDwdTJ__options-container__options {
+.ds-combobox__nkrEji__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -130,7 +141,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-combobox__JDwdTJ__options-container__options__inner {
+.ds-combobox__nkrEji__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -141,7 +152,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-combobox__JDwdTJ__options-container__options__inner__top-scrim, .ds-combobox__JDwdTJ__options-container__options__inner__bottom-scrim {
+.ds-combobox__nkrEji__options-container__options__inner__top-scrim, .ds-combobox__nkrEji__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -151,20 +162,20 @@
   z-index: 1;
   display: none;
 }
-.ds-combobox__JDwdTJ__options-container__options__inner__top-scrim--visible, .ds-combobox__JDwdTJ__options-container__options__inner__bottom-scrim--visible {
+.ds-combobox__nkrEji__options-container__options__inner__top-scrim--visible, .ds-combobox__nkrEji__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-combobox__JDwdTJ__options-container__options__inner__top-scrim {
+.ds-combobox__nkrEji__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__JDwdTJ__options-container__options__inner__top-scrim--dark {
+.ds-combobox__nkrEji__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__JDwdTJ__options-container__options__inner__bottom-scrim {
+.ds-combobox__nkrEji__options-container__options__inner__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }