@uh-design-system/component-library 1.1.0-rc.5 → 1.1.0-rc.7

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

@@ -20,8 +20,8 @@ export const Default = {
         dsSiteName: ribbonData.siteNames.en,
         dsLinks: convertToRibbonLinks(ribbonData.links.en, ribbonData),
         dsBrandingUrls: ribbonData.brandingUrls,
-        dsSitesText: ribbonData.uiTexts.sites.en,
-        dsCloseText: ribbonData.uiTexts.close.en,
+        dsMobileToggleText: ribbonData.uiTexts.sites.en,
+        dsCloseButtonText: ribbonData.uiTexts.close.en,
         dsNavAriaLabel: ribbonData.uiTexts.navigationLabel.en,
         dsLogoAriaLabel: ribbonData.uiTexts.logoLabel.en,
     },
@@ -29,8 +29,8 @@ export const Default = {
     <ds-ribbon
       ds-icon="${args.dsIcon}"
       ds-site-name="${args.dsSiteName}"
-      ds-sites-text="${args.dsSitesText}"
-      ds-close-text="${args.dsCloseText}"
+      ds-mobile-toggle-text="${args.dsMobileToggleText}"
+      ds-close-button-text="${args.dsCloseButtonText}"
       ds-nav-aria-label="${args.dsNavAriaLabel}"
       ds-logo-aria-label="${args.dsLogoAriaLabel}"
       .dsLinks="${args.dsLinks}"
@@ -45,8 +45,8 @@ export const WithoutBranding = {
         dsHideBranding: true,
         dsLinks: convertToRibbonLinks(ribbonData.links.en, ribbonData),
         dsBrandingUrls: ribbonData.brandingUrls,
-        dsSitesText: ribbonData.uiTexts.sites.en,
-        dsCloseText: ribbonData.uiTexts.close.en,
+        dsMobileToggleText: ribbonData.uiTexts.sites.en,
+        dsCloseButtonText: ribbonData.uiTexts.close.en,
         dsNavAriaLabel: ribbonData.uiTexts.navigationLabel.en,
         dsLogoAriaLabel: ribbonData.uiTexts.logoLabel.en,
     },
@@ -54,8 +54,8 @@ export const WithoutBranding = {
     <ds-ribbon
       ds-icon="${args.dsIcon}"
       ds-site-name="${args.dsSiteName}"
-      ds-sites-text="${args.dsSitesText}"
-      ds-close-text="${args.dsCloseText}"
+      ds-mobile-toggle-text="${args.dsMobileToggleText}"
+      ds-close-button-text="${args.dsCloseButtonText}"
       ds-nav-aria-label="${args.dsNavAriaLabel}"
       ds-logo-aria-label="${args.dsLogoAriaLabel}"
       ?ds-hide-branding="${args.dsHideBranding}"
@@ -64,13 +64,53 @@ export const WithoutBranding = {
     ></ds-ribbon>
   `,
 };
+export const CustomTagName = {
+    args: {
+        ...ribbonData.config,
+        dsSiteName: ribbonData.siteNames.en,
+        dsLinks: convertToRibbonLinks(ribbonData.links.en, ribbonData),
+        dsBrandingUrls: ribbonData.brandingUrls,
+        dsMobileToggleText: ribbonData.uiTexts.sites.en,
+        dsCloseButtonText: ribbonData.uiTexts.close.en,
+        dsNavAriaLabel: ribbonData.uiTexts.navigationLabel.en,
+        dsLogoAriaLabel: ribbonData.uiTexts.logoLabel.en,
+    },
+    render: args => html `
+    <custom-ds-ribbon
+      ds-icon="${args.dsIcon}"
+      ds-site-name="${args.dsSiteName}"
+      ds-mobile-toggle-text="${args.dsMobileToggleText}"
+      ds-close-button-text="${args.dsCloseButtonText}"
+      ds-nav-aria-label="${args.dsNavAriaLabel}"
+      ds-logo-aria-label="${args.dsLogoAriaLabel}"
+      .dsLinks="${args.dsLinks}"
+      .dsBrandingUrls="${args.dsBrandingUrls}"
+    ></custom-ds-ribbon>
+  `,
+};
+export const WithExternalData = {
+    args: {
+        dsDataUrl: 'https://cdn.jsdelivr.net/npm/@uh-design-system/component-library@1.1.0/dist/data.json',
+    },
+    argTypes: {
+        dsDataUrl: { control: 'text' },
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Ribbon component that fetches data from an external JSON file using the dsDataUrl property. You can change the URL in the controls to test with different data sources.',
+            },
+        },
+    },
+    render: args => html ` <ds-ribbon ds-data-url="${args.dsDataUrl}"></ds-ribbon> `,
+};
 export const Playground = {
     args: {
         ...ribbonData.config,
         dsSiteName: ribbonData.siteNames.en,
         dsLinks: convertToRibbonLinks(ribbonData.links.en, ribbonData),
-        dsSitesText: ribbonData.uiTexts.sites.en,
-        dsCloseText: ribbonData.uiTexts.close.en,
+        dsMobileToggleText: ribbonData.uiTexts.sites.en,
+        dsCloseButtonText: ribbonData.uiTexts.close.en,
         dsNavAriaLabel: ribbonData.uiTexts.navigationLabel.en,
         dsLogoAriaLabel: ribbonData.uiTexts.logoLabel.en,
     },
@@ -79,8 +119,8 @@ export const Playground = {
         dsSiteName: { control: 'text' },
         dsHideBranding: { control: 'boolean' },
         dsLinks: { control: 'object' },
-        dsSitesText: { control: 'text' },
-        dsCloseText: { control: 'text' },
+        dsMobileToggleText: { control: 'text' },
+        dsCloseButtonText: { control: 'text' },
         dsNavAriaLabel: { control: 'text' },
         dsLogoAriaLabel: { control: 'text' },
     },
@@ -88,8 +128,8 @@ export const Playground = {
     <ds-ribbon
       ds-icon="${args.dsIcon}"
       ds-site-name="${args.dsSiteName}"
-      ds-sites-text="${args.dsSitesText}"
-      ds-close-text="${args.dsCloseText}"
+      ds-mobile-toggle-text="${args.dsMobileToggleText}"
+      ds-close-button-text="${args.dsCloseButtonText}"
       ds-nav-aria-label="${args.dsNavAriaLabel}"
       ds-logo-aria-label="${args.dsLogoAriaLabel}"
       ?ds-hide-branding="${args.dsHideBranding}"

package/dist/collection/components/01-base-components/ds-select/ds-select-native/ds-select-native.css

@@ -13,7 +13,7 @@
   position: relative;
 }
 
-.ds-select-native__BahgnS, .ds-select__BahgnS-custom {
+.ds-select-native__kfFKF0, .ds-select__kfFKF0-custom {
   position: relative;
   display: flex;
   align-items: center;
@@ -25,11 +25,11 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-select-native__BahgnS:hover, .ds-select__BahgnS-custom:hover {
+.ds-select-native__kfFKF0:hover, .ds-select__kfFKF0-custom:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
 
-.ds-select-native__BahgnS__dropdown-icon, .ds-select__BahgnS-custom__dropdown-icon {
+.ds-select-native__kfFKF0__dropdown-icon, .ds-select__kfFKF0-custom__dropdown-icon {
   cursor: pointer;
   align-items: center;
   align-self: stretch;
@@ -40,60 +40,60 @@
   padding: 0 var(--ds-spacing-2xSmall);
 }
 
-.ds-select__BahgnS-custom-wrapper {
+.ds-select__kfFKF0-custom-wrapper {
   position: relative;
 }
 
-.ds-select__BahgnS-custom {
+.ds-select__kfFKF0-custom {
   /** Rough estimate based on button margins and styles if button width is not available */
 }
-.ds-select__BahgnS-custom .ds-options__BahgnS {
+.ds-select__kfFKF0-custom .ds-options__kfFKF0 {
   display: block;
 }
-.ds-select__BahgnS-custom-input-container {
+.ds-select__kfFKF0-custom-input-container {
   display: flex;
   position: relative;
 }
-.ds-select__BahgnS-custom:not(.ds-select__BahgnS-custom--open, .ds-select__BahgnS-custom--invalid, .ds-select__BahgnS-custom--disabled):hover {
+.ds-select__kfFKF0-custom:not(.ds-select__kfFKF0-custom--open, .ds-select__kfFKF0-custom--invalid, .ds-select__kfFKF0-custom--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-select__BahgnS-custom:active:not(.ds-select__BahgnS-custom--open, .ds-select__BahgnS-custom--invalid, .ds-select__BahgnS-custom--disabled) {
+.ds-select__kfFKF0-custom:active:not(.ds-select__kfFKF0-custom--open, .ds-select__kfFKF0-custom--invalid, .ds-select__kfFKF0-custom--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-select__BahgnS-custom--open, .ds-select__BahgnS-custom:focus-visible {
+.ds-select__kfFKF0-custom--open, .ds-select__kfFKF0-custom: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-select__BahgnS-custom--open:not(.ds-select__BahgnS-custom--open--invalid, .ds-select__BahgnS-custom:focus-visible--invalid), .ds-select__BahgnS-custom:focus-visible:not(.ds-select__BahgnS-custom--open--invalid, .ds-select__BahgnS-custom:focus-visible--invalid) {
+.ds-select__kfFKF0-custom--open:not(.ds-select__kfFKF0-custom--open--invalid, .ds-select__kfFKF0-custom:focus-visible--invalid), .ds-select__kfFKF0-custom:focus-visible:not(.ds-select__kfFKF0-custom--open--invalid, .ds-select__kfFKF0-custom:focus-visible--invalid) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-select__BahgnS-custom--disabled {
+.ds-select__kfFKF0-custom--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-select__BahgnS-custom--disabled .ds-select__BahgnS-custom__dropdown-icon {
+.ds-select__kfFKF0-custom--disabled .ds-select__kfFKF0-custom__dropdown-icon {
   color: var(--ds-textColor-disabled-onLight);
   border-left-color: var(--ds-borderColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__BahgnS-custom--invalid {
+.ds-select__kfFKF0-custom--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__BahgnS-custom--invalid:not(.ds-select__BahgnS-custom--invalid--open, .ds-select__BahgnS-custom--invalid--disabled):active {
+.ds-select__kfFKF0-custom--invalid:not(.ds-select__kfFKF0-custom--invalid--open, .ds-select__kfFKF0-custom--invalid--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__BahgnS-custom--invalid:not(.ds-select__BahgnS-custom--invalid--disabled):hover {
+.ds-select__kfFKF0-custom--invalid:not(.ds-select__kfFKF0-custom--invalid--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-select__BahgnS-custom__dropdown-icon--has-clear-button {
+.ds-select__kfFKF0-custom__dropdown-icon--has-clear-button {
   margin-left: var(--clear-button-offset, calc(24px + var(--ds-spacing-4xSmall) * 2 + var(--ds-spacing-xSmall) + 4px));
 }
-.ds-select__BahgnS-custom__selected-option {
+.ds-select__kfFKF0-custom__selected-option {
   display: flex;
   align-items: center;
   gap: var(--ds-spacing-2xSmall);
@@ -107,14 +107,14 @@
   padding-left: var(--ds-spacing-xSmall);
   padding-right: var(--ds-spacing-xSmall);
 }
-.ds-select__BahgnS-custom--has-icon .ds-select__BahgnS-custom__selected-option {
+.ds-select__kfFKF0-custom--has-icon .ds-select__kfFKF0-custom__selected-option {
   padding-left: var(--ds-spacing-2xSmall);
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-select__BahgnS-custom__selected-option__placeholder-icon {
+.ds-select__kfFKF0-custom__selected-option__placeholder-icon {
   font-size: var(--ds-fontSize-16);
 }
-.ds-select__BahgnS-custom input {
+.ds-select__kfFKF0-custom input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -128,24 +128,24 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-select__BahgnS-custom input::placeholder {
+.ds-select__kfFKF0-custom input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__BahgnS-custom input:disabled {
+.ds-select__kfFKF0-custom input:disabled {
   cursor: not-allowed;
 }
-.ds-select__BahgnS-custom input:disabled::placeholder {
+.ds-select__kfFKF0-custom input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__BahgnS-custom input:focus {
+.ds-select__kfFKF0-custom input:focus {
   outline: none;
 }
-.ds-select__BahgnS-custom__clear-button {
+.ds-select__kfFKF0-custom__clear-button {
   position: absolute;
   right: var(--clear-button-offset, calc(24px + var(--ds-spacing-4xSmall) * 2 + var(--ds-spacing-xSmall) + 4px));
   cursor: pointer;
 }
-.ds-select__BahgnS-custom__options-container {
+.ds-select__kfFKF0-custom__options-container {
   display: none;
   position: absolute;
   top: 100%;
@@ -155,11 +155,11 @@
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   background-color: var(--ds-bgColor-white);
 }
-.ds-select__BahgnS-custom__options-container--open {
+.ds-select__kfFKF0-custom__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-select__BahgnS-custom__options-container__options {
+.ds-select__kfFKF0-custom__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -168,7 +168,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-select__BahgnS-custom__options-container__options__inner {
+.ds-select__kfFKF0-custom__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -179,7 +179,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-select__BahgnS-custom__options-container__options__inner__top-scrim, .ds-select__BahgnS-custom__options-container__options__inner__bottom-scrim {
+.ds-select__kfFKF0-custom__options-container__options__inner__top-scrim, .ds-select__kfFKF0-custom__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -189,20 +189,20 @@
   z-index: 1;
   display: none;
 }
-.ds-select__BahgnS-custom__options-container__options__inner__top-scrim--visible, .ds-select__BahgnS-custom__options-container__options__inner__bottom-scrim--visible {
+.ds-select__kfFKF0-custom__options-container__options__inner__top-scrim--visible, .ds-select__kfFKF0-custom__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-select__BahgnS-custom__options-container__options__inner__top-scrim {
+.ds-select__kfFKF0-custom__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-select__BahgnS-custom__options-container__options__inner__top-scrim--dark {
+.ds-select__kfFKF0-custom__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: 0 -2px 7px var(--ds-overlay-black-50);
 }
-.ds-select__BahgnS-custom__options-container__options__inner__bottom-scrim {
+.ds-select__kfFKF0-custom__options-container__options__inner__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
@@ -222,25 +222,25 @@
   position: relative;
 }
 
-.ds-select-native__BahgnS:hover {
+.ds-select-native__kfFKF0:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-select-native__BahgnS:focus-within {
+.ds-select-native__kfFKF0:focus-within {
   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-select-native__BahgnS--disabled {
+.ds-select-native__kfFKF0--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-select-native__BahgnS--invalid {
+.ds-select-native__kfFKF0--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select-native__BahgnS__selected-text {
+.ds-select-native__kfFKF0__selected-text {
   flex: 1;
   padding: 0 var(--ds-spacing-xSmall);
   font-family: var(--ds-fontFamily-body);
@@ -250,7 +250,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.ds-select-native__BahgnS__select {
+.ds-select-native__kfFKF0__select {
   position: absolute;
   top: 0;
   left: 0;
@@ -269,10 +269,10 @@
   color: inherit;
   flex: 1;
 }
-.ds-select-native__BahgnS__select::placeholder {
+.ds-select-native__kfFKF0__select::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-select-native__BahgnS__select:disabled {
+.ds-select-native__kfFKF0__select:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;

package/dist/collection/components/01-base-components/ds-select/ds-select-native/ds-select-native.js

@@ -38,17 +38,17 @@ export class DsSelectNative {
     render() {
         const nativeSelectClass = cx('ds-select-native');
         const DsControlLabel = transformTagName('ds-control-label', 'ds-select-native', this.el);
-        return (h("div", { key: '88bfa6da4dd3b4824c17fa4eab27f65e33f9f0a2' }, h(DsControlLabel, { key: '3c698d18a9ece0c261f214c54c24347aae6ec2c4', dsHtmlFor: this.dsId, dsLabel: this.dsLabel }, h("slot", { key: '6b16cfb0e05fdc61519bd6610f3c9f2cb8252904', name: "label" })), h("div", { key: '63b3dca8117fb6127648c962e6ae8bc52aac1c2a', class: classNames(`${nativeSelectClass}`, {
+        return (h("div", { key: '905725c0f6e8075a434aa969a2f62bc84d683fb5' }, h(DsControlLabel, { key: '1a157d11191636c02d1bbf35cfec35c091a2a225', dsHtmlFor: this.dsId, dsLabel: this.dsLabel }, h("slot", { key: '297bc928fccb1adb621fbe75c9ad4ee109fe573e', name: "label" })), h("div", { key: '0084f495f64de0384fa8e707bae678450b27218f', class: classNames(`${nativeSelectClass}`, {
                 [`${nativeSelectClass}--disabled`]: this.dsDisabled,
                 [`${nativeSelectClass}--invalid`]: !!this.dsErrorText,
-            }) }, h("div", { key: 'aeb00994199885b07d9dbc775a0541264b2ee79b', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.dsValue ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), h("select", { key: '31eafc69c39b650526f2f93c96be7c73746f674a', ref: el => {
+            }) }, h("div", { key: '243162101ef62d6961f55f23d37db66df699fe06', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.dsValue ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), h("select", { key: '3e852ca7f6b5453f367b35d9bcc67e241c8298a9', ref: el => {
                 this.nativeSelectRef = el;
                 if (el)
                     el.value = this.dsValue || '';
             }, id: this.dsId, name: this.dsName, form: this.dsForm, class: `${nativeSelectClass}__select`, disabled: this.dsDisabled, required: !!this.dsErrorText, onChange: (event) => {
                 const target = event.target;
                 this.dsValue = target.value;
-            }, "aria-controls": `${this.dsId}-listbox`, "aria-haspopup": "listbox", ...this.inheritedAttributes }, h("option", { key: '8158c037b8fb3aa08097a98123af6d47e0f7fe2a', value: "", disabled: true, selected: !this.dsValue }, this.dsPlaceholder), h("slot", { key: '9eda772a21ff3467051378cdfb43841667dff011', name: "native" })), h(this.DsIconTag, { key: '0760114fa09448375d579bfd42897421ac7f51d5', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down" })), !!this.dsErrorText && h(this.DsInputValidityTag, { key: '2c11db373e9ef00b01037328ce2617dae8fb83f9', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+            }, "aria-controls": `${this.dsId}-listbox`, "aria-haspopup": "listbox", ...this.inheritedAttributes }, h("option", { key: '9363c3bdf8006ec79485f93644734f5aa754b6fe', value: "", disabled: true, selected: !this.dsValue }, this.dsPlaceholder), h("slot", { key: '100c51736563347f27600a6fc9d3aee58236cede', name: "native" })), h(this.DsIconTag, { key: 'cc8dc0f6b71994ec81c811afffc3930309f7847b', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down" })), !!this.dsErrorText && h(this.DsInputValidityTag, { key: 'fa42d3c1eba1791ceca8280f6260c6c859a56474', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get is() { return "ds-select-native"; }
     static get encapsulation() { return "scoped"; }

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

@@ -13,7 +13,7 @@
   position: relative;
 }
 
-.ds-select__BahgnS-custom {
+.ds-select__kfFKF0-custom {
   position: relative;
   display: flex;
   align-items: center;
@@ -25,11 +25,11 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-select__BahgnS-custom:hover {
+.ds-select__kfFKF0-custom:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
 
-.ds-select__BahgnS-custom__dropdown-icon {
+.ds-select__kfFKF0-custom__dropdown-icon {
   cursor: pointer;
   align-items: center;
   align-self: stretch;
@@ -40,60 +40,60 @@
   padding: 0 var(--ds-spacing-2xSmall);
 }
 
-.ds-select__BahgnS-custom-wrapper {
+.ds-select__kfFKF0-custom-wrapper {
   position: relative;
 }
 
-.ds-select__BahgnS-custom {
+.ds-select__kfFKF0-custom {
   /** Rough estimate based on button margins and styles if button width is not available */
 }
-.ds-select__BahgnS-custom .ds-options__BahgnS {
+.ds-select__kfFKF0-custom .ds-options__kfFKF0 {
   display: block;
 }
-.ds-select__BahgnS-custom-input-container {
+.ds-select__kfFKF0-custom-input-container {
   display: flex;
   position: relative;
 }
-.ds-select__BahgnS-custom:not(.ds-select__BahgnS-custom--open, .ds-select__BahgnS-custom--invalid, .ds-select__BahgnS-custom--disabled):hover {
+.ds-select__kfFKF0-custom:not(.ds-select__kfFKF0-custom--open, .ds-select__kfFKF0-custom--invalid, .ds-select__kfFKF0-custom--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-select__BahgnS-custom:active:not(.ds-select__BahgnS-custom--open, .ds-select__BahgnS-custom--invalid, .ds-select__BahgnS-custom--disabled) {
+.ds-select__kfFKF0-custom:active:not(.ds-select__kfFKF0-custom--open, .ds-select__kfFKF0-custom--invalid, .ds-select__kfFKF0-custom--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-select__BahgnS-custom--open, .ds-select__BahgnS-custom:focus-visible {
+.ds-select__kfFKF0-custom--open, .ds-select__kfFKF0-custom: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-select__BahgnS-custom--open:not(.ds-select__BahgnS-custom--open--invalid, .ds-select__BahgnS-custom:focus-visible--invalid), .ds-select__BahgnS-custom:focus-visible:not(.ds-select__BahgnS-custom--open--invalid, .ds-select__BahgnS-custom:focus-visible--invalid) {
+.ds-select__kfFKF0-custom--open:not(.ds-select__kfFKF0-custom--open--invalid, .ds-select__kfFKF0-custom:focus-visible--invalid), .ds-select__kfFKF0-custom:focus-visible:not(.ds-select__kfFKF0-custom--open--invalid, .ds-select__kfFKF0-custom:focus-visible--invalid) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-select__BahgnS-custom--disabled {
+.ds-select__kfFKF0-custom--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-select__BahgnS-custom--disabled .ds-select__BahgnS-custom__dropdown-icon {
+.ds-select__kfFKF0-custom--disabled .ds-select__kfFKF0-custom__dropdown-icon {
   color: var(--ds-textColor-disabled-onLight);
   border-left-color: var(--ds-borderColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__BahgnS-custom--invalid {
+.ds-select__kfFKF0-custom--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__BahgnS-custom--invalid:not(.ds-select__BahgnS-custom--invalid--open, .ds-select__BahgnS-custom--invalid--disabled):active {
+.ds-select__kfFKF0-custom--invalid:not(.ds-select__kfFKF0-custom--invalid--open, .ds-select__kfFKF0-custom--invalid--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__BahgnS-custom--invalid:not(.ds-select__BahgnS-custom--invalid--disabled):hover {
+.ds-select__kfFKF0-custom--invalid:not(.ds-select__kfFKF0-custom--invalid--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-select__BahgnS-custom__dropdown-icon--has-clear-button {
+.ds-select__kfFKF0-custom__dropdown-icon--has-clear-button {
   margin-left: var(--clear-button-offset, calc(24px + var(--ds-spacing-4xSmall) * 2 + var(--ds-spacing-xSmall) + 4px));
 }
-.ds-select__BahgnS-custom__selected-option {
+.ds-select__kfFKF0-custom__selected-option {
   display: flex;
   align-items: center;
   gap: var(--ds-spacing-2xSmall);
@@ -107,14 +107,14 @@
   padding-left: var(--ds-spacing-xSmall);
   padding-right: var(--ds-spacing-xSmall);
 }
-.ds-select__BahgnS-custom--has-icon .ds-select__BahgnS-custom__selected-option {
+.ds-select__kfFKF0-custom--has-icon .ds-select__kfFKF0-custom__selected-option {
   padding-left: var(--ds-spacing-2xSmall);
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-select__BahgnS-custom__selected-option__placeholder-icon {
+.ds-select__kfFKF0-custom__selected-option__placeholder-icon {
   font-size: var(--ds-fontSize-16);
 }
-.ds-select__BahgnS-custom input {
+.ds-select__kfFKF0-custom input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -128,24 +128,24 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-select__BahgnS-custom input::placeholder {
+.ds-select__kfFKF0-custom input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__BahgnS-custom input:disabled {
+.ds-select__kfFKF0-custom input:disabled {
   cursor: not-allowed;
 }
-.ds-select__BahgnS-custom input:disabled::placeholder {
+.ds-select__kfFKF0-custom input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__BahgnS-custom input:focus {
+.ds-select__kfFKF0-custom input:focus {
   outline: none;
 }
-.ds-select__BahgnS-custom__clear-button {
+.ds-select__kfFKF0-custom__clear-button {
   position: absolute;
   right: var(--clear-button-offset, calc(24px + var(--ds-spacing-4xSmall) * 2 + var(--ds-spacing-xSmall) + 4px));
   cursor: pointer;
 }
-.ds-select__BahgnS-custom__options-container {
+.ds-select__kfFKF0-custom__options-container {
   display: none;
   position: absolute;
   top: 100%;
@@ -155,11 +155,11 @@
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   background-color: var(--ds-bgColor-white);
 }
-.ds-select__BahgnS-custom__options-container--open {
+.ds-select__kfFKF0-custom__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-select__BahgnS-custom__options-container__options {
+.ds-select__kfFKF0-custom__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -168,7 +168,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-select__BahgnS-custom__options-container__options__inner {
+.ds-select__kfFKF0-custom__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -179,7 +179,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-select__BahgnS-custom__options-container__options__inner__top-scrim, .ds-select__BahgnS-custom__options-container__options__inner__bottom-scrim {
+.ds-select__kfFKF0-custom__options-container__options__inner__top-scrim, .ds-select__kfFKF0-custom__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -189,20 +189,20 @@
   z-index: 1;
   display: none;
 }
-.ds-select__BahgnS-custom__options-container__options__inner__top-scrim--visible, .ds-select__BahgnS-custom__options-container__options__inner__bottom-scrim--visible {
+.ds-select__kfFKF0-custom__options-container__options__inner__top-scrim--visible, .ds-select__kfFKF0-custom__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-select__BahgnS-custom__options-container__options__inner__top-scrim {
+.ds-select__kfFKF0-custom__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-select__BahgnS-custom__options-container__options__inner__top-scrim--dark {
+.ds-select__kfFKF0-custom__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: 0 -2px 7px var(--ds-overlay-black-50);
 }
-.ds-select__BahgnS-custom__options-container__options__inner__bottom-scrim {
+.ds-select__kfFKF0-custom__options-container__options__inner__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }