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

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

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

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

@@ -199,7 +199,7 @@ export class DsRadioButton extends Mixin(ariaDeprecationFactory, disableEventsFa
         const ariaLabel = this.dsAriaLabel ?? attrAriaLabel;
         const ariaDescribedby = this.dsAriaDescribedby ?? attrAriaDescribedby;
         const ariaInvalid = this.dsErrorText ? 'true' : this.inheritedAttributes['aria-invalid'];
-        return (h(Fragment, null, h("div", null, h("label", { class: classes }, h(DsVisuallyHidden, null, h("input", { ref: ref => (this.inputElement = ref), type: "radio", class: inputClasses, id: this.dsId, name: this.dsName, form: this.dsForm, value: this.dsValue, disabled: this.dsDisabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, checked: this.dsChecked, tabIndex: tabindex, required: this.dsRequired, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, ...restAttributes })), this.renderRadioIcon(baseClass), h("span", { class: textClasses }, h("slot", null, this.dsText)))), !this.dsErrorsDisabled && (h("slot", { name: "validity" }, h("div", { class: `${baseClass}__validity` }, h(DsInputValidity, { id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" }))))));
+        return (h(Fragment, null, h("div", null, h("label", { class: classes }, h(DsVisuallyHidden, null, h("input", { ref: ref => (this.inputElement = ref), type: "radio", class: inputClasses, id: this.dsId, name: this.dsName, form: this.dsForm, value: this.dsValue, disabled: this.dsDisabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, checked: this.dsChecked, tabIndex: tabindex, required: this.dsRequired, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, ...restAttributes })), this.renderRadioIcon(baseClass), h("span", { class: textClasses }, h("slot", null, this.dsText)))), !this.dsErrorsDisabled && (h("slot", { name: "validity" }, h("div", { class: `${baseClass}__validity` }, h(DsInputValidity, { id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }))))));
     }
     renderFieldset(baseClass) {
         const fieldsetClasses = classNames(`${baseClass}-fieldset`);
@@ -614,7 +614,8 @@ export class DsRadioButton extends Mixin(ariaDeprecationFactory, disableEventsFa
                         "DsSubmitInvalidEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent",
+                            "referenceLocation": "DsSubmitInvalidEvent"
                         }
                     }
                 }
@@ -635,7 +636,8 @@ export class DsRadioButton extends Mixin(ariaDeprecationFactory, disableEventsFa
                         "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-radio-button-group/ds-radio-button-group.css

@@ -1,19 +1,19 @@
-.ds-radio-button-group__oSBnIJ {
+.ds-radio-button-group__SPFJ1E {
   display: inline-flex;
   flex-direction: column;
   border: none;
   padding: 0;
   margin: 0;
 }
-.ds-radio-button-group__oSBnIJ__radio-buttons-slot {
+.ds-radio-button-group__SPFJ1E__radio-buttons-slot {
   display: inline-flex;
   flex-direction: column;
 }
-.ds-radio-button-group__oSBnIJ__radio-buttons-slot--horizontal {
+.ds-radio-button-group__SPFJ1E__radio-buttons-slot--horizontal {
   flex-flow: row wrap;
   gap: var(--ds-spacing-small);
 }
-.ds-radio-button-group__oSBnIJ__legend {
+.ds-radio-button-group__SPFJ1E__legend {
   padding-inline: 0;
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
@@ -23,7 +23,7 @@
   line-height: var(--ds-lineHeight-large);
   margin-bottom: var(--ds-spacing-3xSmall);
 }
-.ds-radio-button-group__oSBnIJ__assistive-text {
+.ds-radio-button-group__SPFJ1E__assistive-text {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   color: var(--ds-textColor-secondary);

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

@@ -224,7 +224,7 @@ export class DsRadioButtonGroup extends Mixin(disableEventsFactory) {
         });
         const errorClasses = classNames(`${baseClass}__error`);
         const DsInputValidity = transformTagName('ds-input-validity', 'ds-radio-button-group', this.el);
-        return (h(Host, { key: 'bedefe79e57524a5b5655d06b73456dcedfa7984', "data-invalid": !!this.dsErrorText || undefined }, h("fieldset", { key: '6bc3a8edb473b606b4590c929c515de7c70118e7', class: classes, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, h("legend", { key: 'b3d7b8d0f43236a20c721ec0b69ade20261c4165', id: this.legendId, class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (h("small", { key: '35f79343044a15e9deb6cff6b6959e0f95a79dfb', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), h("div", { key: '80bad16e1c065426ffe7ffdd6f18d81681feb026', class: radioButtonsSlotClasses }, h("slot", { key: '6d82e10ca13db950cc78975c269b5c248df4d09b', onSlotchange: this.updateFocusableRadioButton })), !!this.dsErrorText && (h("div", { key: 'f19909cd15f4580b5b4bf78a6c0d01463550f4a7', class: errorClasses }, h(DsInputValidity, { key: 'bc59e09ae37368cba41bb31ec1c4fc6228e109c1', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" }))))));
+        return (h(Host, { key: 'bfc004f27594e8f9d7a35e591cd6f8f8d5ce20f4', "data-invalid": !!this.dsErrorText || undefined }, h("fieldset", { key: '2fc540ce180279ed112755593db055160a2126fd', class: classes, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, h("legend", { key: 'd4f408aa4697f93c98a2388fb34e27c92035ad5f', id: this.legendId, class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (h("small", { key: '11e343143059e91b42699e2d83c867bca2ba22a9', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), h("div", { key: 'f3f5c95b6969c35657638a435a855fcb4fc80617', class: radioButtonsSlotClasses }, h("slot", { key: '9ab636880f3cf6db34f2e0015c38e9f3a1644471', onSlotchange: this.updateFocusableRadioButton })), h("div", { key: '48d8c84ef7365d463a3b33e2b7cd55bc3c948aba', class: errorClasses }, h(DsInputValidity, { key: 'd7cc1919ac771a9a7f824ab2035e22909d1baced', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" })))));
     }
     static get is() { return "ds-radio-button-group"; }
     static get encapsulation() { return "shadow"; }
@@ -486,7 +486,8 @@ export class DsRadioButtonGroup extends Mixin(disableEventsFactory) {
                         "DsSubmitInvalidEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent",
+                            "referenceLocation": "DsSubmitInvalidEvent"
                         }
                     }
                 }
@@ -507,7 +508,8 @@ export class DsRadioButtonGroup extends Mixin(disableEventsFactory) {
                         "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-ribbon/ds-ribbon.css

@@ -13,7 +13,7 @@
   z-index: 1000;
 }
 
-.ds-ribbon__oSBnIJ {
+.ds-ribbon__SPFJ1E {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -21,7 +21,7 @@
   font-size: var(--ds-fontSize-16);
   display: block;
 }
-.ds-ribbon__oSBnIJ__container {
+.ds-ribbon__SPFJ1E__container {
   display: grid;
   grid-template-columns: 8rem auto;
   align-items: center;
@@ -32,36 +32,36 @@
   height: 3rem;
 }
 @media (min-width: 30rem) {
-  .ds-ribbon__oSBnIJ__container {
+  .ds-ribbon__SPFJ1E__container {
     grid-template-columns: auto auto;
   }
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__oSBnIJ__container {
+  .ds-ribbon__SPFJ1E__container {
     grid-template-columns: 145px auto;
     padding: 0 var(--ds-spacing-large, 32px);
   }
 }
 @media (min-width: 75rem) {
-  .ds-ribbon__oSBnIJ__container {
+  .ds-ribbon__SPFJ1E__container {
     grid-template-columns: auto auto;
   }
 }
-.ds-ribbon__oSBnIJ__branding {
+.ds-ribbon__SPFJ1E__branding {
   display: flex;
   align-items: center;
   flex-shrink: 0;
 }
-.ds-ribbon__oSBnIJ__mobile-toggle {
+.ds-ribbon__SPFJ1E__mobile-toggle {
   display: block;
   grid-column-end: -1;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__oSBnIJ__mobile-toggle {
+  .ds-ribbon__SPFJ1E__mobile-toggle {
     display: none;
   }
 }
-.ds-ribbon__oSBnIJ__drawer-backdrop {
+.ds-ribbon__SPFJ1E__drawer-backdrop {
   position: fixed;
   inset: 0;
   background-color: var(--ds-overlay-black-00);
@@ -71,20 +71,20 @@
   pointer-events: none;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__oSBnIJ__drawer-backdrop {
+  .ds-ribbon__SPFJ1E__drawer-backdrop {
     display: none;
   }
 }
-.ds-ribbon__oSBnIJ--drawer-open .ds-ribbon__oSBnIJ__drawer-backdrop {
+.ds-ribbon__SPFJ1E--drawer-open .ds-ribbon__SPFJ1E__drawer-backdrop {
   cursor: pointer;
   pointer-events: auto;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__oSBnIJ__drawer-backdrop {
+  .ds-ribbon__SPFJ1E__drawer-backdrop {
     pointer-events: auto;
     z-index: 1;
   }
-  .ds-ribbon__oSBnIJ__drawer-backdrop, .ds-ribbon__oSBnIJ--drawer-open .ds-ribbon__oSBnIJ__container .ds-ribbon__oSBnIJ__drawer-backdrop {
+  .ds-ribbon__SPFJ1E__drawer-backdrop, .ds-ribbon__SPFJ1E--drawer-open .ds-ribbon__SPFJ1E__container .ds-ribbon__SPFJ1E__drawer-backdrop {
     position: static;
     background-color: unset;
     backdrop-filter: unset;
@@ -92,25 +92,25 @@
     transition: none;
   }
 }
-.ds-ribbon__oSBnIJ--drawer-clicked .ds-ribbon__oSBnIJ__drawer-backdrop {
+.ds-ribbon__SPFJ1E--drawer-clicked .ds-ribbon__SPFJ1E__drawer-backdrop {
   transition: background-color 0.3s, opacity 0s 0.3s;
 }
-.ds-ribbon__oSBnIJ--drawer-open .ds-ribbon__oSBnIJ__drawer-backdrop {
+.ds-ribbon__SPFJ1E--drawer-open .ds-ribbon__SPFJ1E__drawer-backdrop {
   background-color: var(--ds-overlay-black-50);
   opacity: 1;
   transition: background-color 0.1s 0.3s, opacity 0s 0s;
   z-index: 999;
 }
-.ds-ribbon__oSBnIJ__desktop-nav {
+.ds-ribbon__SPFJ1E__desktop-nav {
   display: none;
   grid-column-end: -1;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__oSBnIJ__desktop-nav {
+  .ds-ribbon__SPFJ1E__desktop-nav {
     display: block;
   }
 }
-.ds-ribbon__oSBnIJ__desktop-links {
+.ds-ribbon__SPFJ1E__desktop-links {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -119,18 +119,18 @@
   gap: var(--ds-spacing-medium, 24px);
   align-items: center;
 }
-.ds-ribbon__oSBnIJ__desktop-link-item {
+.ds-ribbon__SPFJ1E__desktop-link-item {
   display: flex;
   align-items: center;
   position: relative;
   text-transform: uppercase;
   height: var(--ds-spacing-2xLarge, 3rem);
 }
-.ds-ribbon__oSBnIJ__desktop-link {
+.ds-ribbon__SPFJ1E__desktop-link {
   font-size: var(--ds-fontSize-12);
   white-space: nowrap;
 }
-.ds-ribbon__oSBnIJ__desktop-badge {
+.ds-ribbon__SPFJ1E__desktop-badge {
   font-size: var(--ds-fontSize-12);
   letter-spacing: var(--ds-letterSpacing-wide, 0);
   margin-left: var(--ds-spacing-2xSmall, 8px);
@@ -139,7 +139,7 @@
   top: 0;
   right: 100%;
 }
-.ds-ribbon__oSBnIJ__desktop-badge > * {
+.ds-ribbon__SPFJ1E__desktop-badge > * {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -148,13 +148,13 @@
   border-radius: 1.25rem;
   padding: 0 var(--ds-spacing-2xSmall, 0.5rem);
 }
-.ds-ribbon__oSBnIJ__desktop-badge > * span {
+.ds-ribbon__SPFJ1E__desktop-badge > * span {
   font-size: var(--ds-fontSize-12);
   line-height: 0;
   font-weight: 600;
   color: var(--ds-textColor-info, #005b80);
 }
-.ds-ribbon__oSBnIJ__drawer {
+.ds-ribbon__SPFJ1E__drawer {
   position: absolute;
   top: 0;
   right: 0;
@@ -169,7 +169,7 @@
   cursor: default;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__oSBnIJ__drawer {
+  .ds-ribbon__SPFJ1E__drawer {
     position: static;
     width: auto;
     max-width: none;
@@ -181,10 +181,10 @@
     overflow-y: visible;
   }
 }
-.ds-ribbon__oSBnIJ--drawer-open .ds-ribbon__oSBnIJ__drawer {
+.ds-ribbon__SPFJ1E--drawer-open .ds-ribbon__SPFJ1E__drawer {
   transform: translateX(0%);
 }
-.ds-ribbon__oSBnIJ__drawer-header {
+.ds-ribbon__SPFJ1E__drawer-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -197,36 +197,36 @@
   background-color: var(--ds-bgColor-white, #fff);
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__oSBnIJ__drawer-header {
+  .ds-ribbon__SPFJ1E__drawer-header {
     display: none;
   }
 }
-.ds-ribbon__oSBnIJ__drawer-branding {
+.ds-ribbon__SPFJ1E__drawer-branding {
   display: flex;
   align-items: center;
   flex-shrink: 0;
   max-width: 8rem;
 }
 @media (min-width: 30rem) {
-  .ds-ribbon__oSBnIJ__drawer-branding {
+  .ds-ribbon__SPFJ1E__drawer-branding {
     max-width: unset;
   }
 }
-.ds-ribbon__oSBnIJ__drawer-close {
+.ds-ribbon__SPFJ1E__drawer-close {
   flex-shrink: 0;
   margin-left: var(--ds-spacing-small, 16px);
 }
-.ds-ribbon__oSBnIJ__drawer-nav {
+.ds-ribbon__SPFJ1E__drawer-nav {
   display: block;
   padding: var(--ds-spacing-medium, 24px);
   position: relative;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__oSBnIJ__drawer-nav {
+  .ds-ribbon__SPFJ1E__drawer-nav {
     padding: 0;
   }
 }
-.ds-ribbon__oSBnIJ__top-scrim, .ds-ribbon__oSBnIJ__bottom-scrim {
+.ds-ribbon__SPFJ1E__top-scrim, .ds-ribbon__SPFJ1E__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -237,21 +237,21 @@
   z-index: 1;
   display: none;
 }
-.ds-ribbon__oSBnIJ__top-scrim {
+.ds-ribbon__SPFJ1E__top-scrim {
   top: 3rem;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-ribbon__oSBnIJ__bottom-scrim {
+.ds-ribbon__SPFJ1E__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.has-top-scrim .ds-ribbon__oSBnIJ__top-scrim {
+.has-top-scrim .ds-ribbon__SPFJ1E__top-scrim {
   display: block;
 }
-.has-bottom-scrim .ds-ribbon__oSBnIJ__bottom-scrim {
+.has-bottom-scrim .ds-ribbon__SPFJ1E__bottom-scrim {
   display: block;
 }
-.ds-ribbon__oSBnIJ__drawer-links {
+.ds-ribbon__SPFJ1E__drawer-links {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -259,7 +259,7 @@
   flex-direction: column;
   gap: var(--ds-spacing-4xSmall, 2px);
 }
-.ds-ribbon__oSBnIJ__drawer-link-item {
+.ds-ribbon__SPFJ1E__drawer-link-item {
   display: flex;
   align-items: center;
   position: relative;
@@ -267,42 +267,42 @@
   border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-color-border-subtle);
   height: var(--ds-spacing-2xLarge, 3rem);
 }
-.ds-ribbon__oSBnIJ__drawer-link-item:last-child {
+.ds-ribbon__SPFJ1E__drawer-link-item:last-child {
   border-bottom: none;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__oSBnIJ__drawer-link-item {
+  .ds-ribbon__SPFJ1E__drawer-link-item {
     justify-content: flex-start;
     padding: 0;
     border-bottom: none;
   }
-  .ds-ribbon__oSBnIJ__drawer-link-item:last-child {
+  .ds-ribbon__SPFJ1E__drawer-link-item:last-child {
     border-bottom: none;
   }
 }
-.ds-ribbon__oSBnIJ__drawer-link {
+.ds-ribbon__SPFJ1E__drawer-link {
   font-size: var(--ds-fontSize-14, 0.875rem);
   white-space: nowrap;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__oSBnIJ__drawer-link {
+  .ds-ribbon__SPFJ1E__drawer-link {
     font-size: var(--ds-fontSize-12, 0.75rem);
   }
 }
-.ds-ribbon__oSBnIJ__drawer-badge {
+.ds-ribbon__SPFJ1E__drawer-badge {
   font-size: var(--ds-fontSize-12);
   letter-spacing: var(--ds-letterSpacing-wide, 0);
   margin-left: var(--ds-spacing-2xSmall, 8px);
   text-transform: none;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__oSBnIJ__drawer-badge {
+  .ds-ribbon__SPFJ1E__drawer-badge {
     position: absolute;
     top: 0;
     right: 100%;
   }
 }
-.ds-ribbon__oSBnIJ__drawer-badge > * {
+.ds-ribbon__SPFJ1E__drawer-badge > * {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -311,26 +311,26 @@
   border-radius: 1.25rem;
   padding: 0 var(--ds-spacing-2xSmall, 0.5rem);
 }
-.ds-ribbon__oSBnIJ__drawer-badge > * span {
+.ds-ribbon__SPFJ1E__drawer-badge > * span {
   font-size: inherit;
   line-height: 0;
   font-weight: 600;
   color: var(--ds-textColor-info, #005b80);
 }
 
-:host(.ds-ribbon__oSBnIJ--drawer-open) .ds-ribbon__oSBnIJ__drawer-backdrop {
+:host(.ds-ribbon__SPFJ1E--drawer-open) .ds-ribbon__SPFJ1E__drawer-backdrop {
   display: block;
 }
 @media (min-width: 60rem) {
-  :host(.ds-ribbon__oSBnIJ--drawer-open) .ds-ribbon__oSBnIJ__drawer-backdrop {
+  :host(.ds-ribbon__SPFJ1E--drawer-open) .ds-ribbon__SPFJ1E__drawer-backdrop {
     display: block;
   }
 }
-:host(.ds-ribbon__oSBnIJ--drawer-open) .ds-ribbon__oSBnIJ__drawer {
+:host(.ds-ribbon__SPFJ1E--drawer-open) .ds-ribbon__SPFJ1E__drawer {
   transform: translateX(0);
 }
 @media (min-width: 60rem) {
-  :host(.ds-ribbon__oSBnIJ--drawer-open) .ds-ribbon__oSBnIJ__drawer {
+  :host(.ds-ribbon__SPFJ1E--drawer-open) .ds-ribbon__SPFJ1E__drawer {
     transform: none;
   }
 }

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

@@ -354,7 +354,7 @@ export class DsRibbon {
             [`${baseClass}--drawer-open`]: this.isMobileDrawerOpen,
             [`${baseClass}--drawer-clicked`]: this.isMobileDrawerClicked,
         });
-        return (h("div", { key: '87e9bae7c9e635fb51e618d1027829725bf9701f', class: ribbonClasses }, h("nav", { key: '66425f1bbea02075de67220e9faead1d04cf36c0', "aria-label": this.localizedNavAriaLabel, ...(this.isMobileDrawerOpen ? { inert: true } : {}) }, h("div", { key: 'e19044437b0739fe43d9f22e5e9f0e528e214902', class: `${baseClass}__container`, ...this.inheritedAttributes }, this.renderBranding(), this.renderDesktopNavigation(), this.renderMobileToggle())), this.renderMobileNavigation()));
+        return (h("div", { key: '083f9b57e28d8eecbfae7e2030d64a93b1d06c7c', class: ribbonClasses }, h("nav", { key: 'e27bb14d0158c3338a9cee617cadd6d7a939f4c4', "aria-label": this.localizedNavAriaLabel, ...(this.isMobileDrawerOpen ? { inert: true } : {}) }, h("div", { key: 'dd069ba6a40bbd9e8019f63de6cd6a8c76c07427', class: `${baseClass}__container`, ...this.inheritedAttributes }, this.renderBranding(), this.renderDesktopNavigation(), this.renderMobileToggle())), this.renderMobileNavigation()));
     }
     static get is() { return "ds-ribbon"; }
     static get encapsulation() { return "shadow"; }
@@ -476,7 +476,8 @@ export class DsRibbon {
                         "RibbonLink": {
                             "location": "import",
                             "path": "../../../data",
-                            "id": "src/data.d.ts::RibbonLink"
+                            "id": "src/data.d.ts::RibbonLink",
+                            "referenceLocation": "RibbonLink"
                         }
                     }
                 },
@@ -494,7 +495,7 @@ export class DsRibbon {
                 "mutable": false,
                 "complexType": {
                     "original": "Record<string, string>",
-                    "resolved": "{ [x: string]: string; }",
+                    "resolved": "string",
                     "references": {
                         "Record": {
                             "location": "global",