npm - @uh-design-system/component-library - Versions diffs - 1.5.1 → 1.5.2-rc.1 - Mend

@uh-design-system/component-library 1.5.1 → 1.5.2-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2261) hide show

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

@@ -3,7 +3,7 @@
   width: var(--ds-select-narrow-width, 100%);
 }
 @media (min-width: 30rem) {
-  :not(:has(.ds-select__bQiYWO--full-width)):host {
+  :not(:has(.ds-select__m9sbXh--full-width)):host {
     width: var(--ds-select-wide-width, 20rem);
   }
 }
@@ -13,7 +13,7 @@
   position: relative;
 }
-.ds-select__bQiYWO-native, .ds-select__bQiYWO-custom {
+.ds-select__m9sbXh-native, .ds-select__m9sbXh-custom {
   position: relative;
   display: flex;
   align-items: center;
@@ -26,7 +26,7 @@
   width: 100%;
 }
-.ds-select__bQiYWO-native__dropdown-icon, .ds-select__bQiYWO-custom__dropdown-icon {
+.ds-select__m9sbXh-native__dropdown-icon, .ds-select__m9sbXh-custom__dropdown-icon {
   cursor: pointer;
   align-items: center;
   align-self: stretch;
@@ -37,60 +37,60 @@
   padding: var(--ds-select-dropdown-icon-padding, 0 var(--ds-spacing-2xSmall));
 }
-.ds-select__bQiYWO-custom-wrapper {
+.ds-select__m9sbXh-custom-wrapper {
   position: relative;
 }
-.ds-select__bQiYWO-custom .ds-options__bQiYWO {
+.ds-select__m9sbXh-custom .ds-options__m9sbXh {
   display: block;
 }
-.ds-select__bQiYWO-custom-input-container {
+.ds-select__m9sbXh-custom-input-container {
   display: flex;
   position: relative;
 }
-.ds-select__bQiYWO-custom-input-container:has(.ds-select__bQiYWO-custom__clear-button:hover) .ds-select__bQiYWO-custom {
+.ds-select__m9sbXh-custom-input-container:has(.ds-select__m9sbXh-custom__clear-button:hover) .ds-select__m9sbXh-custom {
   background-color: var(--ds-bgColor-white-hover) !important;
 }
-.ds-select__bQiYWO-custom:not(.ds-select__bQiYWO-custom--open, .ds-select__bQiYWO-custom--invalid, .ds-select__bQiYWO-custom--disabled):hover {
+.ds-select__m9sbXh-custom:not(.ds-select__m9sbXh-custom--open, .ds-select__m9sbXh-custom--invalid, .ds-select__m9sbXh-custom--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-select__bQiYWO-custom:active:not(.ds-select__bQiYWO-custom--open, .ds-select__bQiYWO-custom--invalid, .ds-select__bQiYWO-custom--disabled) {
+.ds-select__m9sbXh-custom:active:not(.ds-select__m9sbXh-custom--open, .ds-select__m9sbXh-custom--invalid, .ds-select__m9sbXh-custom--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-select__bQiYWO-custom--open, .ds-select__bQiYWO-custom:focus-visible {
+.ds-select__m9sbXh-custom--open, .ds-select__m9sbXh-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__bQiYWO-custom--open:not(.ds-select__bQiYWO-custom--open--invalid, .ds-select__bQiYWO-custom:focus-visible--invalid), .ds-select__bQiYWO-custom:focus-visible:not(.ds-select__bQiYWO-custom--open--invalid, .ds-select__bQiYWO-custom:focus-visible--invalid) {
+.ds-select__m9sbXh-custom--open:not(.ds-select__m9sbXh-custom--open--invalid, .ds-select__m9sbXh-custom:focus-visible--invalid), .ds-select__m9sbXh-custom:focus-visible:not(.ds-select__m9sbXh-custom--open--invalid, .ds-select__m9sbXh-custom:focus-visible--invalid) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-select__bQiYWO-custom--disabled {
+.ds-select__m9sbXh-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__bQiYWO-custom--disabled .ds-select__bQiYWO-custom__dropdown-icon {
+.ds-select__m9sbXh-custom--disabled .ds-select__m9sbXh-custom__dropdown-icon {
   color: var(--ds-textColor-disabled-onLight);
   border-left-color: var(--ds-borderColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__bQiYWO-custom--invalid {
+.ds-select__m9sbXh-custom--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__bQiYWO-custom--invalid:not(.ds-select__bQiYWO-custom--invalid--open, .ds-select__bQiYWO-custom--invalid--disabled):active {
+.ds-select__m9sbXh-custom--invalid:not(.ds-select__m9sbXh-custom--invalid--open, .ds-select__m9sbXh-custom--invalid--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__bQiYWO-custom--invalid:not(.ds-select__bQiYWO-custom--invalid--disabled):hover {
+.ds-select__m9sbXh-custom--invalid:not(.ds-select__m9sbXh-custom--invalid--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-select__bQiYWO-custom__dropdown-icon--has-clear-button {
+.ds-select__m9sbXh-custom__dropdown-icon--has-clear-button {
   margin-left: var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px));
 }
-.ds-select__bQiYWO-custom__selected-option {
+.ds-select__m9sbXh-custom__selected-option {
   display: flex;
   align-items: center;
   gap: var(--ds-spacing-2xSmall);
@@ -105,27 +105,27 @@
   padding-left: var(--ds-select-selected-option-padding, var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px)));
   padding-right: var(--ds-select-selected-option-padding, var(--ds-spacing-xSmall));
 }
-.ds-select__bQiYWO-custom--has-icon .ds-select__bQiYWO-custom__selected-option {
+.ds-select__m9sbXh-custom--has-icon .ds-select__m9sbXh-custom__selected-option {
   padding-left: var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-select__bQiYWO-custom__selected-option__placeholder-icon {
+.ds-select__m9sbXh-custom__selected-option__placeholder-icon {
   font-size: var(--ds-fontSize-16);
 }
-.ds-select__bQiYWO-custom__selected-option__text {
+.ds-select__m9sbXh-custom__selected-option__text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding-left: 2px;
   color: var(--ds-textColor-default);
 }
-.ds-select__bQiYWO-custom__selected-option__text--none-selected {
+.ds-select__m9sbXh-custom__selected-option__text--none-selected {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__bQiYWO-custom__selected-option__text--disabled {
+.ds-select__m9sbXh-custom__selected-option__text--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__bQiYWO-custom input {
+.ds-select__m9sbXh-custom input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -139,32 +139,39 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-select__bQiYWO-custom input::placeholder {
+.ds-select__m9sbXh-custom input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__bQiYWO-custom input:disabled {
+.ds-select__m9sbXh-custom input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__bQiYWO-custom input:disabled::placeholder {
+.ds-select__m9sbXh-custom input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__bQiYWO-custom input:focus {
+.ds-select__m9sbXh-custom input:focus {
   outline: none;
 }
-.ds-select__bQiYWO-custom__clear-button {
+.ds-select__m9sbXh-custom__clear-button {
   position: absolute;
   right: calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);
+  top: 2px;
+  bottom: 2px;
   cursor: pointer;
 }
-.ds-select__bQiYWO-custom__badge-container {
+.ds-select__m9sbXh-custom__clear-button:has(button:focus) {
+  box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 2);
+}
+.ds-select__m9sbXh-custom__badge-container {
   position: absolute;
   z-index: 2;
   pointer-events: none;
   right: calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px + 40px + var(--ds-spacing-4xSmall) * 2);
   padding: 10px 0;
 }
-.ds-select__bQiYWO-custom__options-container {
+.ds-select__m9sbXh-custom__options-container {
   display: none;
   position: absolute;
   top: 100%;
@@ -174,11 +181,11 @@
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   background-color: var(--ds-bgColor-white);
 }
-.ds-select__bQiYWO-custom__options-container--open {
+.ds-select__m9sbXh-custom__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-select__bQiYWO-custom__options-container__options {
+.ds-select__m9sbXh-custom__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -187,7 +194,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-select__bQiYWO-custom__options-container__options__inner {
+.ds-select__m9sbXh-custom__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -198,7 +205,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-select__bQiYWO-custom__options-container__options__inner__top-scrim, .ds-select__bQiYWO-custom__options-container__options__inner__bottom-scrim {
+.ds-select__m9sbXh-custom__options-container__options__inner__top-scrim, .ds-select__m9sbXh-custom__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -208,61 +215,61 @@
   z-index: 1;
   display: none;
 }
-.ds-select__bQiYWO-custom__options-container__options__inner__top-scrim--visible, .ds-select__bQiYWO-custom__options-container__options__inner__bottom-scrim--visible {
+.ds-select__m9sbXh-custom__options-container__options__inner__top-scrim--visible, .ds-select__m9sbXh-custom__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-select__bQiYWO-custom__options-container__options__inner__top-scrim {
+.ds-select__m9sbXh-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__bQiYWO-custom__options-container__options__inner__top-scrim--dark {
+.ds-select__m9sbXh-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__bQiYWO-custom__options-container__options__inner__bottom-scrim {
+.ds-select__m9sbXh-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%);
 }
-.ds-select__bQiYWO-native:not(.ds-select__bQiYWO-native--invalid, .ds-select__bQiYWO-native--disabled):hover {
+.ds-select__m9sbXh-native:not(.ds-select__m9sbXh-native--invalid, .ds-select__m9sbXh-native--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-select__bQiYWO-native:has(.ds-select__bQiYWO-native__select:active):not(.ds-select__bQiYWO-native--invalid, .ds-select__bQiYWO-native--disabled) {
+.ds-select__m9sbXh-native:has(.ds-select__m9sbXh-native__select:active):not(.ds-select__m9sbXh-native--invalid, .ds-select__m9sbXh-native--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-select__bQiYWO-native:focus-within {
+.ds-select__m9sbXh-native: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__bQiYWO-native--disabled {
+.ds-select__m9sbXh-native--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__bQiYWO-native--disabled .ds-select__bQiYWO-native__dropdown-icon {
+.ds-select__m9sbXh-native--disabled .ds-select__m9sbXh-native__dropdown-icon {
   color: var(--ds-textColor-disabled-onLight);
   border-left-color: var(--ds-borderColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__bQiYWO-native--invalid {
+.ds-select__m9sbXh-native--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__bQiYWO-native--invalid:not(.ds-select__bQiYWO-native--invalid--disabled):has(.ds-select__bQiYWO-native__select:active) {
+.ds-select__m9sbXh-native--invalid:not(.ds-select__m9sbXh-native--invalid--disabled):has(.ds-select__m9sbXh-native__select:active) {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__bQiYWO-native--invalid:not(.ds-select__bQiYWO-native--invalid--disabled):hover {
+.ds-select__m9sbXh-native--invalid:not(.ds-select__m9sbXh-native--invalid--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-select__bQiYWO-native__dropdown-icon {
+.ds-select__m9sbXh-native__dropdown-icon {
   color: var(--ds-select-selected-option-color, inherit);
 }
-.ds-select__bQiYWO-native__selected-text {
+.ds-select__m9sbXh-native__selected-text {
   flex: 1;
   padding: 0 var(--ds-select-selected-option-padding, var(--ds-spacing-xSmall));
   margin-right: var(--ds-select-selected-text-margin-right, 0);
@@ -274,7 +281,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.ds-select__bQiYWO-native__select {
+.ds-select__m9sbXh-native__select {
   position: absolute;
   top: 0;
   left: 0;
@@ -293,10 +300,10 @@
   color: inherit;
   flex: 1;
 }
-.ds-select__bQiYWO-native__select::placeholder {
+.ds-select__m9sbXh-native__select::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__bQiYWO-native__select:disabled {
+.ds-select__m9sbXh-native__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.css CHANGED Viewed

@@ -3,7 +3,7 @@
   width: var(--ds-select-narrow-width, 100%);
 }
 @media (min-width: 30rem) {
-  :not(:has(.ds-select__bQiYWO--full-width)):host {
+  :not(:has(.ds-select__m9sbXh--full-width)):host {
     width: var(--ds-select-wide-width, 20rem);
   }
 }
@@ -13,7 +13,7 @@
   position: relative;
 }
-.ds-select__bQiYWO-custom {
+.ds-select__m9sbXh-custom {
   position: relative;
   display: flex;
   align-items: center;
@@ -26,7 +26,7 @@
   width: 100%;
 }
-.ds-select__bQiYWO-custom__dropdown-icon {
+.ds-select__m9sbXh-custom__dropdown-icon {
   cursor: pointer;
   align-items: center;
   align-self: stretch;
@@ -37,60 +37,60 @@
   padding: var(--ds-select-dropdown-icon-padding, 0 var(--ds-spacing-2xSmall));
 }
-.ds-select__bQiYWO-custom-wrapper {
+.ds-select__m9sbXh-custom-wrapper {
   position: relative;
 }
-.ds-select__bQiYWO-custom .ds-options__bQiYWO {
+.ds-select__m9sbXh-custom .ds-options__m9sbXh {
   display: block;
 }
-.ds-select__bQiYWO-custom-input-container {
+.ds-select__m9sbXh-custom-input-container {
   display: flex;
   position: relative;
 }
-.ds-select__bQiYWO-custom-input-container:has(.ds-select__bQiYWO-custom__clear-button:hover) .ds-select__bQiYWO-custom {
+.ds-select__m9sbXh-custom-input-container:has(.ds-select__m9sbXh-custom__clear-button:hover) .ds-select__m9sbXh-custom {
   background-color: var(--ds-bgColor-white-hover) !important;
 }
-.ds-select__bQiYWO-custom:not(.ds-select__bQiYWO-custom--open, .ds-select__bQiYWO-custom--invalid, .ds-select__bQiYWO-custom--disabled):hover {
+.ds-select__m9sbXh-custom:not(.ds-select__m9sbXh-custom--open, .ds-select__m9sbXh-custom--invalid, .ds-select__m9sbXh-custom--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-select__bQiYWO-custom:active:not(.ds-select__bQiYWO-custom--open, .ds-select__bQiYWO-custom--invalid, .ds-select__bQiYWO-custom--disabled) {
+.ds-select__m9sbXh-custom:active:not(.ds-select__m9sbXh-custom--open, .ds-select__m9sbXh-custom--invalid, .ds-select__m9sbXh-custom--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-select__bQiYWO-custom--open, .ds-select__bQiYWO-custom:focus-visible {
+.ds-select__m9sbXh-custom--open, .ds-select__m9sbXh-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__bQiYWO-custom--open:not(.ds-select__bQiYWO-custom--open--invalid, .ds-select__bQiYWO-custom:focus-visible--invalid), .ds-select__bQiYWO-custom:focus-visible:not(.ds-select__bQiYWO-custom--open--invalid, .ds-select__bQiYWO-custom:focus-visible--invalid) {
+.ds-select__m9sbXh-custom--open:not(.ds-select__m9sbXh-custom--open--invalid, .ds-select__m9sbXh-custom:focus-visible--invalid), .ds-select__m9sbXh-custom:focus-visible:not(.ds-select__m9sbXh-custom--open--invalid, .ds-select__m9sbXh-custom:focus-visible--invalid) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-select__bQiYWO-custom--disabled {
+.ds-select__m9sbXh-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__bQiYWO-custom--disabled .ds-select__bQiYWO-custom__dropdown-icon {
+.ds-select__m9sbXh-custom--disabled .ds-select__m9sbXh-custom__dropdown-icon {
   color: var(--ds-textColor-disabled-onLight);
   border-left-color: var(--ds-borderColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__bQiYWO-custom--invalid {
+.ds-select__m9sbXh-custom--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__bQiYWO-custom--invalid:not(.ds-select__bQiYWO-custom--invalid--open, .ds-select__bQiYWO-custom--invalid--disabled):active {
+.ds-select__m9sbXh-custom--invalid:not(.ds-select__m9sbXh-custom--invalid--open, .ds-select__m9sbXh-custom--invalid--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__bQiYWO-custom--invalid:not(.ds-select__bQiYWO-custom--invalid--disabled):hover {
+.ds-select__m9sbXh-custom--invalid:not(.ds-select__m9sbXh-custom--invalid--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-select__bQiYWO-custom__dropdown-icon--has-clear-button {
+.ds-select__m9sbXh-custom__dropdown-icon--has-clear-button {
   margin-left: var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px));
 }
-.ds-select__bQiYWO-custom__selected-option {
+.ds-select__m9sbXh-custom__selected-option {
   display: flex;
   align-items: center;
   gap: var(--ds-spacing-2xSmall);
@@ -105,27 +105,27 @@
   padding-left: var(--ds-select-selected-option-padding, var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px)));
   padding-right: var(--ds-select-selected-option-padding, var(--ds-spacing-xSmall));
 }
-.ds-select__bQiYWO-custom--has-icon .ds-select__bQiYWO-custom__selected-option {
+.ds-select__m9sbXh-custom--has-icon .ds-select__m9sbXh-custom__selected-option {
   padding-left: var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-select__bQiYWO-custom__selected-option__placeholder-icon {
+.ds-select__m9sbXh-custom__selected-option__placeholder-icon {
   font-size: var(--ds-fontSize-16);
 }
-.ds-select__bQiYWO-custom__selected-option__text {
+.ds-select__m9sbXh-custom__selected-option__text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding-left: 2px;
   color: var(--ds-textColor-default);
 }
-.ds-select__bQiYWO-custom__selected-option__text--none-selected {
+.ds-select__m9sbXh-custom__selected-option__text--none-selected {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__bQiYWO-custom__selected-option__text--disabled {
+.ds-select__m9sbXh-custom__selected-option__text--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__bQiYWO-custom input {
+.ds-select__m9sbXh-custom input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -139,32 +139,39 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-select__bQiYWO-custom input::placeholder {
+.ds-select__m9sbXh-custom input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__bQiYWO-custom input:disabled {
+.ds-select__m9sbXh-custom input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__bQiYWO-custom input:disabled::placeholder {
+.ds-select__m9sbXh-custom input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__bQiYWO-custom input:focus {
+.ds-select__m9sbXh-custom input:focus {
   outline: none;
 }
-.ds-select__bQiYWO-custom__clear-button {
+.ds-select__m9sbXh-custom__clear-button {
   position: absolute;
   right: calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);
+  top: 2px;
+  bottom: 2px;
   cursor: pointer;
 }
-.ds-select__bQiYWO-custom__badge-container {
+.ds-select__m9sbXh-custom__clear-button:has(button:focus) {
+  box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 2);
+}
+.ds-select__m9sbXh-custom__badge-container {
   position: absolute;
   z-index: 2;
   pointer-events: none;
   right: calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px + 40px + var(--ds-spacing-4xSmall) * 2);
   padding: 10px 0;
 }
-.ds-select__bQiYWO-custom__options-container {
+.ds-select__m9sbXh-custom__options-container {
   display: none;
   position: absolute;
   top: 100%;
@@ -174,11 +181,11 @@
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   background-color: var(--ds-bgColor-white);
 }
-.ds-select__bQiYWO-custom__options-container--open {
+.ds-select__m9sbXh-custom__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-select__bQiYWO-custom__options-container__options {
+.ds-select__m9sbXh-custom__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -187,7 +194,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-select__bQiYWO-custom__options-container__options__inner {
+.ds-select__m9sbXh-custom__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -198,7 +205,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-select__bQiYWO-custom__options-container__options__inner__top-scrim, .ds-select__bQiYWO-custom__options-container__options__inner__bottom-scrim {
+.ds-select__m9sbXh-custom__options-container__options__inner__top-scrim, .ds-select__m9sbXh-custom__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -208,20 +215,20 @@
   z-index: 1;
   display: none;
 }
-.ds-select__bQiYWO-custom__options-container__options__inner__top-scrim--visible, .ds-select__bQiYWO-custom__options-container__options__inner__bottom-scrim--visible {
+.ds-select__m9sbXh-custom__options-container__options__inner__top-scrim--visible, .ds-select__m9sbXh-custom__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-select__bQiYWO-custom__options-container__options__inner__top-scrim {
+.ds-select__m9sbXh-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__bQiYWO-custom__options-container__options__inner__top-scrim--dark {
+.ds-select__m9sbXh-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__bQiYWO-custom__options-container__options__inner__bottom-scrim {
+.ds-select__m9sbXh-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%);
 }

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

@@ -102,7 +102,7 @@ export class DsSelect extends Mixin(componentFactory('ds-select', { stopRootTrac
         }
     }
     componentWillLoad() {
-        this.setDisableEventEmits(true);
+        this._setDisableEventEmits(true);
         this.inheritedAttributes = {
             ...inheritAttributes(this, this.el),
             ...inheritAriaAttributes(this.el, this.isNative
@@ -169,7 +169,7 @@ export class DsSelect extends Mixin(componentFactory('ds-select', { stopRootTrac
     async handleOptionClick(option) {
         if (!option || option.dsDisabled)
             return;
-        this.setDisableEventEmits(false);
+        this._setDisableEventEmits(false);
         if (this.inValue(option.dsValue) && this.isMultiple) {
             this.value = this.withoutValue(option.dsValue);
         }
@@ -195,7 +195,7 @@ export class DsSelect extends Mixin(componentFactory('ds-select', { stopRootTrac
         if (this.dsDisabled)
             return;
         this.activeIndex = null;
-        this.setDisableEventEmits(false);
+        this._setDisableEventEmits(false);
         this.value = this.toValue(null);
         this.isOpen = false;
         (this.customSelectRef || this.nativeSelectRef)?.focus();
@@ -265,7 +265,7 @@ export class DsSelect extends Mixin(componentFactory('ds-select', { stopRootTrac
         oldValue?.forEach(opt => (opt.dsSelected = false));
         newValue.forEach(opt => (opt.dsSelected = true));
         const shouldEmit = this.getShouldEmit([hasChanged]);
-        this.setDisableEventEmits(true);
+        this._setDisableEventEmits(true);
         if (shouldEmit) {
             this.dsMultipleChange.emit({ values: newValues, added: addedValues, removed: removedValues });
             this.dsChange.emit(newValues[0] || null);
@@ -398,7 +398,7 @@ export class DsSelect extends Mixin(componentFactory('ds-select', { stopRootTrac
                     event.stopPropagation();
                     this.handleClearSelection();
                 }
-            }, dsAriaLabel: clearButtonAriaLabel, dsAriaDescribedby: selectedOptionId }))), h("div", { id: optionsContainerId, class: {
+            }, dsAriaLabel: clearButtonAriaLabel, dsAriaDescribedby: selectedOptionId, dsInInput: true, dsNoFocusRing: true }))), h("div", { id: optionsContainerId, class: {
                 [`${customSelectClass}__options-container`]: true,
                 [`${customSelectClass}__options-container--open`]: this.isOpen,
             }, onClick: e => {
@@ -414,7 +414,7 @@ export class DsSelect extends Mixin(componentFactory('ds-select', { stopRootTrac
     }
     render() {
         const baseClass = cx('ds-select');
-        return (h(Host, { key: '049829fc522f3e1fbed4b078a3e7648e6dcef3c0', ...ifDefined('name', this.isNative ? undefined : this.dsName) }, h("div", { key: '00bbb3a9f4c9ad16b0e81f87ed9253ae2dbf0ef1', tabIndex: this.isNative ? undefined : -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
+        return (h(Host, { key: '3c2dd72616c0c522d4c8bc90e24049fdbba9ba51', ...ifDefined('name', this.isNative ? undefined : this.dsName) }, h("div", { key: 'b9c1004ca24fe0735b18f41a376c37d8c4b431d7', tabIndex: this.isNative ? undefined : -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
     }
     static get is() { return "ds-select"; }
     static get encapsulation() { return "scoped"; }