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

package/dist/components/ds-select-native2.js

@@ -11,7 +11,7 @@ import { d as defineCustomElement$4 } from './ds-feedback2.js';
 import { d as defineCustomElement$2 } from './ds-input-validity2.js';
 import { d as defineCustomElement$1 } from './ds-visually-hidden2.js';
 
-const dsSelectNativeCss = ".sc-ds-select-native-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-select-native-h{width:20rem}}.sc-ds-select-native-h>div.sc-ds-select-native{display:flex;flex-direction:column;position:relative}.ds-select-native__DFAX9n.sc-ds-select-native,.ds-select__DFAX9n-custom.sc-ds-select-native{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);cursor:pointer;box-sizing:border-box;height:2.75rem;width:100%}.ds-select-native__DFAX9n.sc-ds-select-native:hover,.ds-select__DFAX9n-custom.sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select-native__DFAX9n__dropdown-icon.sc-ds-select-native,.ds-select__DFAX9n-custom__dropdown-icon.sc-ds-select-native{cursor:pointer;align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-secondary);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-select__DFAX9n-custom-wrapper.sc-ds-select-native{position:relative}.ds-select__DFAX9n-custom.sc-ds-select-native .ds-options__DFAX9n.sc-ds-select-native{display:block}.ds-select__DFAX9n-custom-input-container.sc-ds-select-native{display:flex;position:relative}.ds-select__DFAX9n-custom-input-container.sc-ds-select-native:has(.ds-select__DFAX9n-custom__clear-button:hover) .ds-select__DFAX9n-custom.sc-ds-select-native{background-color:var(--ds-bgColor-white-hover) !important}.ds-select__DFAX9n-custom.sc-ds-select-native:not(.ds-select__DFAX9n-custom--open,.ds-select__DFAX9n-custom--invalid.sc-ds-select-native,.ds-select__DFAX9n-custom--disabled).sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__DFAX9n-custom.sc-ds-select-native:active:not(.ds-select__DFAX9n-custom--open,.ds-select__DFAX9n-custom--invalid.sc-ds-select-native,.ds-select__DFAX9n-custom--disabled).sc-ds-select-native{background-color:var(--ds-bgColor-white-active)}.ds-select__DFAX9n-custom--open.sc-ds-select-native,.ds-select__DFAX9n-custom.sc-ds-select-native: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__DFAX9n-custom--open.sc-ds-select-native:not(.ds-select__DFAX9n-custom--open--invalid,.ds-select__DFAX9n-custom.sc-ds-select-native:focus-visible--invalid),.ds-select__DFAX9n-custom.sc-ds-select-native:focus-visible:not(.ds-select__DFAX9n-custom--open--invalid,.ds-select__DFAX9n-custom.sc-ds-select-native:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__DFAX9n-custom--disabled.sc-ds-select-native{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__DFAX9n-custom--disabled.sc-ds-select-native .ds-select__DFAX9n-custom__dropdown-icon.sc-ds-select-native{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__DFAX9n-custom--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__DFAX9n-custom--invalid.sc-ds-select-native:not(.ds-select__DFAX9n-custom--invalid--open,.ds-select__DFAX9n-custom--invalid--disabled).sc-ds-select-native:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__DFAX9n-custom--invalid.sc-ds-select-native:not(.ds-select__DFAX9n-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__DFAX9n-custom__dropdown-icon--has-clear-button.sc-ds-select-native{margin-left:var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px))}.ds-select__DFAX9n-custom__selected-option.sc-ds-select-native{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall);flex:1;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall)}.ds-select__DFAX9n-custom--has-icon.sc-ds-select-native .ds-select__DFAX9n-custom__selected-option.sc-ds-select-native{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-select__DFAX9n-custom__selected-option__placeholder-icon.sc-ds-select-native{font-size:var(--ds-fontSize-16)}.ds-select__DFAX9n-custom__selected-option__text.sc-ds-select-native{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ds-textColor-default)}.ds-select__DFAX9n-custom__selected-option__text--none-selected.sc-ds-select-native{color:var(--ds-textColor-secondary)}.ds-select__DFAX9n-custom__selected-option__text--disabled.sc-ds-select-native{color:var(--ds-textColor-disabled-onLight)}.ds-select__DFAX9n-custom.sc-ds-select-native input.sc-ds-select-native{width:100%;height:100%;border:0;background:none;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-select__DFAX9n-custom.sc-ds-select-native input.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select__DFAX9n-custom.sc-ds-select-native input.sc-ds-select-native:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-select__DFAX9n-custom.sc-ds-select-native input.sc-ds-select-native:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__DFAX9n-custom.sc-ds-select-native input.sc-ds-select-native:focus{outline:none}.ds-select__DFAX9n-custom__clear-button.sc-ds-select-native{position:absolute;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);cursor:pointer}.ds-select__DFAX9n-custom__badge-container.sc-ds-select-native{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__DFAX9n-custom__options-container.sc-ds-select-native{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white)}.ds-select__DFAX9n-custom__options-container--open.sc-ds-select-native{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__DFAX9n-custom__options-container__options.sc-ds-select-native{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__DFAX9n-custom__options-container__options__inner.sc-ds-select-native{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-select__DFAX9n-custom__options-container__options__inner__top-scrim.sc-ds-select-native,.ds-select__DFAX9n-custom__options-container__options__inner__bottom-scrim.sc-ds-select-native{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-select__DFAX9n-custom__options-container__options__inner__top-scrim--visible.sc-ds-select-native,.ds-select__DFAX9n-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select-native{display:block}.ds-select__DFAX9n-custom__options-container__options__inner__top-scrim.sc-ds-select-native{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__DFAX9n-custom__options-container__options__inner__top-scrim--dark.sc-ds-select-native{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__DFAX9n-custom__options-container__options__inner__bottom-scrim.sc-ds-select-native{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.sc-ds-select-native-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-select-native-h{width:20rem}}.sc-ds-select-native-h>div.sc-ds-select-native{display:flex;flex-direction:column;position:relative}.ds-select-native__DFAX9n.sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select-native__DFAX9n.sc-ds-select-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-native__DFAX9n--disabled.sc-ds-select-native{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__DFAX9n--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select-native__DFAX9n__selected-text.sc-ds-select-native{flex:1;padding:0 var(--ds-spacing-xSmall);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-select-native__DFAX9n__select.sc-ds-select-native{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1;appearance:none;border:none;outline:none;padding:0 var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);background-color:transparent;color:inherit;flex:1}.ds-select-native__DFAX9n__select.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select-native__DFAX9n__select.sc-ds-select-native:disabled{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}";
+const dsSelectNativeCss = ".sc-ds-select-native-h{display:inline-block;width:100%}@media (min-width: 30rem){:not(:has(.ds-select__HTSRrd--full-width)).sc-ds-select-native-h{width:20rem}}.sc-ds-select-native-h>div.sc-ds-select-native{display:flex;flex-direction:column;position:relative}.ds-select__HTSRrd-native.sc-ds-select-native,.ds-select__HTSRrd-custom.sc-ds-select-native{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);cursor:pointer;box-sizing:border-box;height:2.75rem;width:100%}.ds-select__HTSRrd-native__dropdown-icon.sc-ds-select-native,.ds-select__HTSRrd-custom__dropdown-icon.sc-ds-select-native{cursor:pointer;align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-secondary);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-select__HTSRrd-custom-wrapper.sc-ds-select-native{position:relative}.ds-select__HTSRrd-custom.sc-ds-select-native .ds-options__HTSRrd.sc-ds-select-native{display:block}.ds-select__HTSRrd-custom-input-container.sc-ds-select-native{display:flex;position:relative}.ds-select__HTSRrd-custom-input-container.sc-ds-select-native:has(.ds-select__HTSRrd-custom__clear-button:hover) .ds-select__HTSRrd-custom.sc-ds-select-native{background-color:var(--ds-bgColor-white-hover) !important}.ds-select__HTSRrd-custom.sc-ds-select-native:not(.ds-select__HTSRrd-custom--open,.ds-select__HTSRrd-custom--invalid.sc-ds-select-native,.ds-select__HTSRrd-custom--disabled).sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__HTSRrd-custom.sc-ds-select-native:active:not(.ds-select__HTSRrd-custom--open,.ds-select__HTSRrd-custom--invalid.sc-ds-select-native,.ds-select__HTSRrd-custom--disabled).sc-ds-select-native{background-color:var(--ds-bgColor-white-active)}.ds-select__HTSRrd-custom--open.sc-ds-select-native,.ds-select__HTSRrd-custom.sc-ds-select-native: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__HTSRrd-custom--open.sc-ds-select-native:not(.ds-select__HTSRrd-custom--open--invalid,.ds-select__HTSRrd-custom.sc-ds-select-native:focus-visible--invalid),.ds-select__HTSRrd-custom.sc-ds-select-native:focus-visible:not(.ds-select__HTSRrd-custom--open--invalid,.ds-select__HTSRrd-custom.sc-ds-select-native:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__HTSRrd-custom--disabled.sc-ds-select-native{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__HTSRrd-custom--disabled.sc-ds-select-native .ds-select__HTSRrd-custom__dropdown-icon.sc-ds-select-native{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__HTSRrd-custom--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__HTSRrd-custom--invalid.sc-ds-select-native:not(.ds-select__HTSRrd-custom--invalid--open,.ds-select__HTSRrd-custom--invalid--disabled).sc-ds-select-native:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__HTSRrd-custom--invalid.sc-ds-select-native:not(.ds-select__HTSRrd-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__HTSRrd-custom__dropdown-icon--has-clear-button.sc-ds-select-native{margin-left:var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px))}.ds-select__HTSRrd-custom__selected-option.sc-ds-select-native{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall);flex:1;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall)}.ds-select__HTSRrd-custom--has-icon.sc-ds-select-native .ds-select__HTSRrd-custom__selected-option.sc-ds-select-native{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-select__HTSRrd-custom__selected-option__placeholder-icon.sc-ds-select-native{font-size:var(--ds-fontSize-16)}.ds-select__HTSRrd-custom__selected-option__text.sc-ds-select-native{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ds-textColor-default)}.ds-select__HTSRrd-custom__selected-option__text--none-selected.sc-ds-select-native{color:var(--ds-textColor-secondary)}.ds-select__HTSRrd-custom__selected-option__text--disabled.sc-ds-select-native{color:var(--ds-textColor-disabled-onLight)}.ds-select__HTSRrd-custom.sc-ds-select-native input.sc-ds-select-native{width:100%;height:100%;border:0;background:none;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-select__HTSRrd-custom.sc-ds-select-native input.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select__HTSRrd-custom.sc-ds-select-native input.sc-ds-select-native:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-select__HTSRrd-custom.sc-ds-select-native input.sc-ds-select-native:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__HTSRrd-custom.sc-ds-select-native input.sc-ds-select-native:focus{outline:none}.ds-select__HTSRrd-custom__clear-button.sc-ds-select-native{position:absolute;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);cursor:pointer}.ds-select__HTSRrd-custom__badge-container.sc-ds-select-native{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__HTSRrd-custom__options-container.sc-ds-select-native{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white)}.ds-select__HTSRrd-custom__options-container--open.sc-ds-select-native{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__HTSRrd-custom__options-container__options.sc-ds-select-native{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__HTSRrd-custom__options-container__options__inner.sc-ds-select-native{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-select__HTSRrd-custom__options-container__options__inner__top-scrim.sc-ds-select-native,.ds-select__HTSRrd-custom__options-container__options__inner__bottom-scrim.sc-ds-select-native{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-select__HTSRrd-custom__options-container__options__inner__top-scrim--visible.sc-ds-select-native,.ds-select__HTSRrd-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select-native{display:block}.ds-select__HTSRrd-custom__options-container__options__inner__top-scrim.sc-ds-select-native{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__HTSRrd-custom__options-container__options__inner__top-scrim--dark.sc-ds-select-native{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__HTSRrd-custom__options-container__options__inner__bottom-scrim.sc-ds-select-native{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__HTSRrd-native.sc-ds-select-native:not(.ds-select__HTSRrd-native--invalid,.ds-select__HTSRrd-native--disabled).sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__HTSRrd-native.sc-ds-select-native:has(.ds-select__HTSRrd-native__select:active):not(.ds-select__HTSRrd-native--invalid,.ds-select__HTSRrd-native--disabled).sc-ds-select-native{background-color:var(--ds-bgColor-white-active)}.ds-select__HTSRrd-native.sc-ds-select-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__HTSRrd-native--disabled.sc-ds-select-native{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__HTSRrd-native--disabled.sc-ds-select-native .ds-select__HTSRrd-native__dropdown-icon.sc-ds-select-native{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__HTSRrd-native--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__HTSRrd-native--invalid.sc-ds-select-native:not(.ds-select__HTSRrd-native--invalid--disabled):has(.ds-select__HTSRrd-native__select:active){background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__HTSRrd-native--invalid.sc-ds-select-native:not(.ds-select__HTSRrd-native--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__HTSRrd-native__selected-text.sc-ds-select-native{flex:1;padding:0 var(--ds-spacing-xSmall);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-select__HTSRrd-native__select.sc-ds-select-native{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1;appearance:none;border:none;outline:none;padding:0 var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);background-color:transparent;color:inherit;flex:1}.ds-select__HTSRrd-native__select.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select__HTSRrd-native__select.sc-ds-select-native:disabled{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}";
 
 const DsSelectNative = proxyCustomElement(class DsSelectNative extends Mixin(ariaDeprecationFactory) {
     constructor(registerHost) {
@@ -39,6 +39,7 @@ const DsSelectNative = proxyCustomElement(class DsSelectNative extends Mixin(ari
     dsForm;
     dsDisabled = false;
     dsErrorText;
+    dsFullWidth = false;
     dsRequired = false;
     value = '';
     inputValidityId = `${this.dsId}-input-validity`;
@@ -103,15 +104,17 @@ const DsSelectNative = proxyCustomElement(class DsSelectNative extends Mixin(ari
         }
     }
     render() {
-        const nativeSelectClass = cx('ds-select-native');
+        const baseClass = cx('ds-select');
+        const nativeSelectClass = `${baseClass}-native`;
         const DsControlLabel = transformTagName('ds-control-label', 'ds-select-native', this.el);
         const { ['aria-controls']: attrAriaControls, ['aria-describedby']: attrAriaDescribedby, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedby = this.dsAriaDescribedby ?? attrAriaDescribedby;
         const ariaControls = this.dsAriaControls ?? attrAriaControls ?? `${this.dsId}-listbox`;
-        return (h("div", { key: 'eb7ed057c71be3caeab3adcd4c2fd4060b5d1a95' }, h(DsControlLabel, { key: '71b1dfa802aa89d1e680dd0a026fef2e67248d91', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, h("slot", { key: 'b08f83aebe600f5d18ff46347405ce449709d676', name: "label" })), h("div", { key: 'c24b314cb859076e15e93cc6d8446acae626bf4b', class: classNames(`${nativeSelectClass}`, {
+        return (h("div", { key: '97b9ba093dae79d88ef7f32e364e2367b261d47a' }, h(DsControlLabel, { key: '66c00fb0c3a4d5324b0d0de3319ccc78eaf9cb0c', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, h("slot", { key: '90178dae14fcb872eda86aa42a830eb41195e11b', name: "label" })), h("div", { key: 'f4f7ceca87f1d3231a7af4ad0310008e9bbee831', class: classNames(`${nativeSelectClass}`, {
+                [`${baseClass}--full-width`]: this.dsFullWidth,
                 [`${nativeSelectClass}--disabled`]: this.dsDisabled,
                 [`${nativeSelectClass}--invalid`]: !!this.dsErrorText,
-            }) }, h("div", { key: '5ee130c1d3988af100fc82ac8ba5c837b5a60f2d', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.value ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), h("select", { key: '22255c08f59a03577bb47b838f4226414c459806', ref: el => {
+            }) }, h("div", { key: '717286eef0f6aee9265973f288de9612bbe04928', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.value ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), h("select", { key: '73bcef7d0c22bca8d54e09240673a27b2712625b', ref: el => {
                 this.nativeSelectRef = el;
                 if (el)
                     el.value = this.value;
@@ -119,7 +122,7 @@ const DsSelectNative = proxyCustomElement(class DsSelectNative extends Mixin(ari
                 const target = event.target;
                 this.value = target.value;
                 this.dsChange.emit(target.value);
-            }, "aria-describedby": ariaDescribedby, "aria-controls": ariaControls, ...restAttributes }, h("option", { key: '13d852c731f3d7f69b0df8edcbb9d0356e79bd96', value: "", disabled: true, style: { display: this.dsRequired ? 'none' : undefined }, selected: !this.value }, this.dsPlaceholder), h("slot", { key: 'f7d8f52fae76cc131e5ff70b809e28d41e0905d4', name: "native" })), h(this.DsIconTag, { key: 'bd53936877ae2f729573875d3565c504b69a048c', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down" })), !!this.dsErrorText && h(this.DsInputValidityTag, { key: 'e7a2e9642570d31770f17a9417c9821ddaefb869', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+            }, "aria-describedby": ariaDescribedby, "aria-controls": ariaControls, ...restAttributes }, h("option", { key: '5da8faff3f0eacf98ed2461da6a268a69f7bccf6', value: "", disabled: true, style: { display: this.dsRequired ? 'none' : undefined }, selected: !this.value }, this.dsPlaceholder), h("slot", { key: 'f13d031c69105d2dccbbe55b85b985716b30e708', name: "native" })), h(this.DsIconTag, { key: '1b79d14dfc272941439eb79ea0ae14423d50670b', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down" })), !!this.dsErrorText && h(this.DsInputValidityTag, { key: '64b214c9d8c7813d11a3b67bef0f1086eaf16ee5', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get watchers() { return {
         "aria-describedby": ["ariaAttributeObserver"],
@@ -140,6 +143,7 @@ const DsSelectNative = proxyCustomElement(class DsSelectNative extends Mixin(ari
         "dsForm": [1, "ds-form"],
         "dsDisabled": [4, "ds-disabled"],
         "dsErrorText": [1, "ds-error-text"],
+        "dsFullWidth": [4, "ds-full-width"],
         "dsRequired": [4, "ds-required"],
         "value": [32]
     }, undefined, {

package/dist/components/ds-select.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, M as Mixin, c as createEvent, f as forceUpdate, h, a as Host } from './index2.js';
 import { c as classNames } from './index3.js';
-import { i as idGenerator, t as transformTagName, b as debounce, a as ifDefined, d as declareComponentDependencies } from './utils.js';
+import { i as idGenerator, t as transformTagName, c as componentOnReady, b as debounce, a as ifDefined, d as declareComponentDependencies } from './utils.js';
 import { j as selectAnOption, c as atLeastOneOption, f as thereAreOptionsToBrowse, l as loadingOptions, w as weCouldNotLoadOptions, b as tryAgainOrIfTheProblemPersists, r as removeSelection, h as selections } from './controlUtils.js';
 import { c as cx } from './cx.js';
 import { i as inheritAriaAttributes, a as inheritAttributes } from './attributes.js';
@@ -17,7 +17,7 @@ import { d as defineCustomElement$4 } from './ds-select-native2.js';
 import { d as defineCustomElement$3 } from './ds-spinner2.js';
 import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
 
-const dsSelectCss = ".sc-ds-select-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-select-h{width:20rem}}.sc-ds-select-h>div.sc-ds-select{display:flex;flex-direction:column;position:relative}.ds-select__DFAX9n-custom.sc-ds-select{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);cursor:pointer;box-sizing:border-box;height:2.75rem;width:100%}.ds-select__DFAX9n-custom.sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__DFAX9n-custom__dropdown-icon.sc-ds-select{cursor:pointer;align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-secondary);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-select__DFAX9n-custom-wrapper.sc-ds-select{position:relative}.ds-select__DFAX9n-custom.sc-ds-select .ds-options__DFAX9n.sc-ds-select{display:block}.ds-select__DFAX9n-custom-input-container.sc-ds-select{display:flex;position:relative}.ds-select__DFAX9n-custom-input-container.sc-ds-select:has(.ds-select__DFAX9n-custom__clear-button:hover) .ds-select__DFAX9n-custom.sc-ds-select{background-color:var(--ds-bgColor-white-hover) !important}.ds-select__DFAX9n-custom.sc-ds-select:not(.ds-select__DFAX9n-custom--open,.ds-select__DFAX9n-custom--invalid.sc-ds-select,.ds-select__DFAX9n-custom--disabled).sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__DFAX9n-custom.sc-ds-select:active:not(.ds-select__DFAX9n-custom--open,.ds-select__DFAX9n-custom--invalid.sc-ds-select,.ds-select__DFAX9n-custom--disabled).sc-ds-select{background-color:var(--ds-bgColor-white-active)}.ds-select__DFAX9n-custom--open.sc-ds-select,.ds-select__DFAX9n-custom.sc-ds-select: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__DFAX9n-custom--open.sc-ds-select:not(.ds-select__DFAX9n-custom--open--invalid,.ds-select__DFAX9n-custom.sc-ds-select:focus-visible--invalid),.ds-select__DFAX9n-custom.sc-ds-select:focus-visible:not(.ds-select__DFAX9n-custom--open--invalid,.ds-select__DFAX9n-custom.sc-ds-select:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__DFAX9n-custom--disabled.sc-ds-select{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__DFAX9n-custom--disabled.sc-ds-select .ds-select__DFAX9n-custom__dropdown-icon.sc-ds-select{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__DFAX9n-custom--invalid.sc-ds-select{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__DFAX9n-custom--invalid.sc-ds-select:not(.ds-select__DFAX9n-custom--invalid--open,.ds-select__DFAX9n-custom--invalid--disabled).sc-ds-select:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__DFAX9n-custom--invalid.sc-ds-select:not(.ds-select__DFAX9n-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__DFAX9n-custom__dropdown-icon--has-clear-button.sc-ds-select{margin-left:var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px))}.ds-select__DFAX9n-custom__selected-option.sc-ds-select{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall);flex:1;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall)}.ds-select__DFAX9n-custom--has-icon.sc-ds-select .ds-select__DFAX9n-custom__selected-option.sc-ds-select{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-select__DFAX9n-custom__selected-option__placeholder-icon.sc-ds-select{font-size:var(--ds-fontSize-16)}.ds-select__DFAX9n-custom__selected-option__text.sc-ds-select{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ds-textColor-default)}.ds-select__DFAX9n-custom__selected-option__text--none-selected.sc-ds-select{color:var(--ds-textColor-secondary)}.ds-select__DFAX9n-custom__selected-option__text--disabled.sc-ds-select{color:var(--ds-textColor-disabled-onLight)}.ds-select__DFAX9n-custom.sc-ds-select input.sc-ds-select{width:100%;height:100%;border:0;background:none;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-select__DFAX9n-custom.sc-ds-select input.sc-ds-select::placeholder{color:var(--ds-textColor-secondary)}.ds-select__DFAX9n-custom.sc-ds-select input.sc-ds-select:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-select__DFAX9n-custom.sc-ds-select input.sc-ds-select:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__DFAX9n-custom.sc-ds-select input.sc-ds-select:focus{outline:none}.ds-select__DFAX9n-custom__clear-button.sc-ds-select{position:absolute;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);cursor:pointer}.ds-select__DFAX9n-custom__badge-container.sc-ds-select{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__DFAX9n-custom__options-container.sc-ds-select{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white)}.ds-select__DFAX9n-custom__options-container--open.sc-ds-select{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__DFAX9n-custom__options-container__options.sc-ds-select{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__DFAX9n-custom__options-container__options__inner.sc-ds-select{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-select__DFAX9n-custom__options-container__options__inner__top-scrim.sc-ds-select,.ds-select__DFAX9n-custom__options-container__options__inner__bottom-scrim.sc-ds-select{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-select__DFAX9n-custom__options-container__options__inner__top-scrim--visible.sc-ds-select,.ds-select__DFAX9n-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select{display:block}.ds-select__DFAX9n-custom__options-container__options__inner__top-scrim.sc-ds-select{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__DFAX9n-custom__options-container__options__inner__top-scrim--dark.sc-ds-select{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__DFAX9n-custom__options-container__options__inner__bottom-scrim.sc-ds-select{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}";
+const dsSelectCss = ".sc-ds-select-h{display:inline-block;width:100%}@media (min-width: 30rem){:not(:has(.ds-select__HTSRrd--full-width)).sc-ds-select-h{width:20rem}}.sc-ds-select-h>div.sc-ds-select{display:flex;flex-direction:column;position:relative}.ds-select__HTSRrd-custom.sc-ds-select{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);cursor:pointer;box-sizing:border-box;height:2.75rem;width:100%}.ds-select__HTSRrd-custom__dropdown-icon.sc-ds-select{cursor:pointer;align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-secondary);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-select__HTSRrd-custom-wrapper.sc-ds-select{position:relative}.ds-select__HTSRrd-custom.sc-ds-select .ds-options__HTSRrd.sc-ds-select{display:block}.ds-select__HTSRrd-custom-input-container.sc-ds-select{display:flex;position:relative}.ds-select__HTSRrd-custom-input-container.sc-ds-select:has(.ds-select__HTSRrd-custom__clear-button:hover) .ds-select__HTSRrd-custom.sc-ds-select{background-color:var(--ds-bgColor-white-hover) !important}.ds-select__HTSRrd-custom.sc-ds-select:not(.ds-select__HTSRrd-custom--open,.ds-select__HTSRrd-custom--invalid.sc-ds-select,.ds-select__HTSRrd-custom--disabled).sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__HTSRrd-custom.sc-ds-select:active:not(.ds-select__HTSRrd-custom--open,.ds-select__HTSRrd-custom--invalid.sc-ds-select,.ds-select__HTSRrd-custom--disabled).sc-ds-select{background-color:var(--ds-bgColor-white-active)}.ds-select__HTSRrd-custom--open.sc-ds-select,.ds-select__HTSRrd-custom.sc-ds-select: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__HTSRrd-custom--open.sc-ds-select:not(.ds-select__HTSRrd-custom--open--invalid,.ds-select__HTSRrd-custom.sc-ds-select:focus-visible--invalid),.ds-select__HTSRrd-custom.sc-ds-select:focus-visible:not(.ds-select__HTSRrd-custom--open--invalid,.ds-select__HTSRrd-custom.sc-ds-select:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__HTSRrd-custom--disabled.sc-ds-select{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__HTSRrd-custom--disabled.sc-ds-select .ds-select__HTSRrd-custom__dropdown-icon.sc-ds-select{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__HTSRrd-custom--invalid.sc-ds-select{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__HTSRrd-custom--invalid.sc-ds-select:not(.ds-select__HTSRrd-custom--invalid--open,.ds-select__HTSRrd-custom--invalid--disabled).sc-ds-select:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__HTSRrd-custom--invalid.sc-ds-select:not(.ds-select__HTSRrd-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__HTSRrd-custom__dropdown-icon--has-clear-button.sc-ds-select{margin-left:var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px))}.ds-select__HTSRrd-custom__selected-option.sc-ds-select{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall);flex:1;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall)}.ds-select__HTSRrd-custom--has-icon.sc-ds-select .ds-select__HTSRrd-custom__selected-option.sc-ds-select{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-select__HTSRrd-custom__selected-option__placeholder-icon.sc-ds-select{font-size:var(--ds-fontSize-16)}.ds-select__HTSRrd-custom__selected-option__text.sc-ds-select{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ds-textColor-default)}.ds-select__HTSRrd-custom__selected-option__text--none-selected.sc-ds-select{color:var(--ds-textColor-secondary)}.ds-select__HTSRrd-custom__selected-option__text--disabled.sc-ds-select{color:var(--ds-textColor-disabled-onLight)}.ds-select__HTSRrd-custom.sc-ds-select input.sc-ds-select{width:100%;height:100%;border:0;background:none;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-select__HTSRrd-custom.sc-ds-select input.sc-ds-select::placeholder{color:var(--ds-textColor-secondary)}.ds-select__HTSRrd-custom.sc-ds-select input.sc-ds-select:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-select__HTSRrd-custom.sc-ds-select input.sc-ds-select:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__HTSRrd-custom.sc-ds-select input.sc-ds-select:focus{outline:none}.ds-select__HTSRrd-custom__clear-button.sc-ds-select{position:absolute;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);cursor:pointer}.ds-select__HTSRrd-custom__badge-container.sc-ds-select{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__HTSRrd-custom__options-container.sc-ds-select{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white)}.ds-select__HTSRrd-custom__options-container--open.sc-ds-select{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__HTSRrd-custom__options-container__options.sc-ds-select{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__HTSRrd-custom__options-container__options__inner.sc-ds-select{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-select__HTSRrd-custom__options-container__options__inner__top-scrim.sc-ds-select,.ds-select__HTSRrd-custom__options-container__options__inner__bottom-scrim.sc-ds-select{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-select__HTSRrd-custom__options-container__options__inner__top-scrim--visible.sc-ds-select,.ds-select__HTSRrd-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select{display:block}.ds-select__HTSRrd-custom__options-container__options__inner__top-scrim.sc-ds-select{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__HTSRrd-custom__options-container__options__inner__top-scrim--dark.sc-ds-select{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__HTSRrd-custom__options-container__options__inner__bottom-scrim.sc-ds-select{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}";
 
 const selectIdGenerator = idGenerator('ds-select');
 const defaultTextFns = {
@@ -63,6 +63,7 @@ const DsSelect$1 = proxyCustomElement(class DsSelect extends Mixin(multipleValue
     dsOptionsError = false;
     dsOptionsErrorTitle;
     dsOptionsErrorText;
+    dsFullWidth = false;
     dsRequired = false;
     activeOption = null;
     selectedOptions = [];
@@ -261,8 +262,8 @@ const DsSelect$1 = proxyCustomElement(class DsSelect extends Mixin(multipleValue
         }
     }
     getBadgeContainerWidthOffset = async () => {
-        await this.clearButtonRef?.componentOnReady?.();
-        await this.badgeRef?.componentOnReady?.();
+        await componentOnReady(this.clearButtonRef);
+        await componentOnReady(this.badgeRef);
         const clearButtonWidth = this.clearButtonRef?.getBoundingClientRect().width || 0;
         const badgeContainerWidth = this.badgeRef?.getBoundingClientRect().width || 0;
         this.badgeContainerOffset = clearButtonWidth && badgeContainerWidth ? clearButtonWidth + badgeContainerWidth : null;
@@ -391,7 +392,7 @@ const DsSelect$1 = proxyCustomElement(class DsSelect extends Mixin(multipleValue
     };
     renderNativeSelect() {
         const DsSelectNative = transformTagName('ds-select-native', 'ds-select', this.el);
-        return (h(DsSelectNative, { dsId: this.dsId, dsLabel: this.dsLabel, dsPlaceholder: this.texts.dsPlaceholder, dsIcon: this.dsIcon, dsName: this.dsName || this.dsId, dsDisabled: this.dsDisabled, dsErrorText: this.dsErrorText, dsRequired: this.dsRequired, dsValue: this.getValueItem(0) || '', onDsChange: (e) => {
+        return (h(DsSelectNative, { dsId: this.dsId, dsLabel: this.dsLabel, dsPlaceholder: this.texts.dsPlaceholder, dsIcon: this.dsIcon, dsName: this.dsName || this.dsId, dsDisabled: this.dsDisabled, dsErrorText: this.dsErrorText, dsRequired: this.dsRequired, dsFullWidth: this.dsFullWidth, dsValue: this.getValueItem(0) || '', onDsChange: (e) => {
                 this.value = this.toValue(e.detail);
             }, onDsValidity: (e) => {
                 this.dsValidity.emit(e.detail);
@@ -419,6 +420,7 @@ const DsSelect$1 = proxyCustomElement(class DsSelect extends Mixin(multipleValue
                 this.customSelectRef?.focus();
                 this.toggleDropdown();
             } }, h("slot", { name: "label" })), h("div", { class: `${customSelectClass}-wrapper` }, h("div", { class: `${customSelectClass}-input-container` }, h("div", { id: this.dsId, ref: el => (this.customSelectRef = el), class: classNames(`${customSelectClass}`, {
+                [`${baseClass}--full-width`]: this.dsFullWidth,
                 [`${customSelectClass}--open`]: this.isOpen,
                 [`${customSelectClass}--none-selected`]: noneSelected,
                 [`${customSelectClass}--disabled`]: this.dsDisabled,
@@ -467,7 +469,7 @@ const DsSelect$1 = proxyCustomElement(class DsSelect extends Mixin(multipleValue
     }
     render() {
         const baseClass = cx('ds-select');
-        return (h(Host, { key: '7c585847e96a32aa8cfa70e9927368ffdc1ff51b', ...ifDefined('name', this.isNative ? undefined : this.dsName) }, h("div", { key: '1c9b905cddc0fdd71a53d30920afa97f176b64a9', tabIndex: -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
+        return (h(Host, { key: '79ac153e47f7d1e967ce834c152ea6d5500b0311', ...ifDefined('name', this.isNative ? undefined : this.dsName) }, h("div", { key: '6cddaa1ce3301a7fb54243a996fb641e318de4b2', tabIndex: -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -500,6 +502,7 @@ const DsSelect$1 = proxyCustomElement(class DsSelect extends Mixin(multipleValue
         "dsOptionsError": [4, "ds-options-error"],
         "dsOptionsErrorTitle": [1, "ds-options-error-title"],
         "dsOptionsErrorText": [1, "ds-options-error-text"],
+        "dsFullWidth": [4, "ds-full-width"],
         "dsRequired": [4, "ds-required"],
         "value": [32],
         "activeOption": [32],

package/dist/components/ds-spinner2.js

@@ -5,7 +5,7 @@ import { t as transformTagName, d as declareComponentDependencies } from './util
 import { c as cx } from './cx.js';
 import { d as defineCustomElement$1 } from './ds-visually-hidden2.js';
 
-const dsSpinnerCss = "html{font-size:100%}body{font-size:1rem}.ds-font{}.ds-font-heading{font-family:var(--ds-fontFamily-heading)}.ds-font-body{font-family:var(--ds-fontFamily-body)}.ds-font{}.ds-font-regular{font-weight:var(--ds-fontWeight-regular)}.ds-font-semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-font-semibold-plus{font-weight:var(--ds-fontWeight-semiboldPlus)}.ds-font-bold{font-weight:var(--ds-fontWeight-bold)}.ds-tracking-xs{letter-spacing:var(--ds-letterSpacing-xTight)}.ds-tracking-sm{letter-spacing:var(--ds-letterSpacing-tight)}.ds-tracking-md{letter-spacing:var(--ds-letterSpacing-normal)}.ds-tracking-lg{letter-spacing:var(--ds-letterSpacing-wide)}.ds-tracking-xl{letter-spacing:var(--ds-letterSpacing-xWide)}.ds-leading-sm{line-height:var(--ds-lineHeight-small)}.ds-leading-md{line-height:var(--ds-lineHeight-medium)}.ds-leading-lg{line-height:var(--ds-lineHeight-large)}.ds-leading-xl{line-height:var(--ds-lineHeight-xLarge)}.ds-width-md{font-stretch:var(--ds-fontWidth-normal)}.ds-width-sm{font-stretch:var(--ds-fontWidth-condense)}.ds-number-proportional{font-variant-numeric:var(--ds-number-style)}.ds-paragraph-16{margin-bottom:var(--ds-marginBottom, 16px)}.ds-paragraph-20{margin-bottom:var(--ds-marginBottom, 20px)}.ds-list-spacing{gap:4px}.ds-text-color-default{color:var(--ds-textColor-default)}.ds-text{}.ds-text-regular-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular)}.ds-text{}.ds-text-semibold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-semibold)}.ds-text{}.ds-text-bold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-bold)}.ds-spinner__DFAX9n{display:inline-block}.ds-spinner__DFAX9n:has(.ds-spinner__DFAX9n__text){display:inline-flex;align-items:center;gap:calc(var(--spinner-size) / 2)}.ds-spinner__DFAX9n{}.ds-spinner__DFAX9n--small{padding:1.5px}.ds-spinner__DFAX9n--medium{padding:3px}.ds-spinner__DFAX9n--large{padding:3px}.ds-spinner__DFAX9n--xLarge{padding:5.5px}.ds-spinner__DFAX9n--2xLarge{padding:5.5px}.ds-spinner__DFAX9n--custom{padding:calc(var(--spinner-size) / 8)}.ds-spinner__DFAX9n{}.ds-spinner__DFAX9n--below{flex-direction:column;align-items:center}.ds-spinner__DFAX9n--right{flex-direction:row;align-items:center}.ds-spinner__DFAX9n__spinner{width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border-radius:50%;border:calc(var(--spinner-size, 24px) / 6) solid var(--ds-borderColor-disabled-onLight);position:relative;display:flex;align-items:center;justify-content:center}.ds-spinner__DFAX9n__text{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body)}.ds-spinner__DFAX9n__text--white{color:var(--ds-textColor-white)}.ds-spinner__DFAX9n__segment{display:block;position:absolute;width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border:calc(var(--spinner-size, 24px) / 6) solid var(--spinner-color, #005a94);border-radius:50%;animation:ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;border-color:var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color)}.ds-spinner__DFAX9n__segment--1{animation-delay:-0.3s}.ds-spinner__DFAX9n__segment--2{animation-delay:-0.2s}.ds-spinner__DFAX9n__segment--3{animation-delay:-0.1s}@keyframes ds-spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ds-spinner__DFAX9n__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__DFAX9n__segment--1{animation-delay:-0.6s}.ds-spinner__DFAX9n__segment--2{animation-delay:-0.4s}.ds-spinner__DFAX9n__segment--3{animation-delay:-0.2s}}";
+const dsSpinnerCss = "html{font-size:100%}body{font-size:1rem}.ds-font{}.ds-font-heading{font-family:var(--ds-fontFamily-heading)}.ds-font-body{font-family:var(--ds-fontFamily-body)}.ds-font{}.ds-font-regular{font-weight:var(--ds-fontWeight-regular)}.ds-font-semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-font-semibold-plus{font-weight:var(--ds-fontWeight-semiboldPlus)}.ds-font-bold{font-weight:var(--ds-fontWeight-bold)}.ds-tracking-xs{letter-spacing:var(--ds-letterSpacing-xTight)}.ds-tracking-sm{letter-spacing:var(--ds-letterSpacing-tight)}.ds-tracking-md{letter-spacing:var(--ds-letterSpacing-normal)}.ds-tracking-lg{letter-spacing:var(--ds-letterSpacing-wide)}.ds-tracking-xl{letter-spacing:var(--ds-letterSpacing-xWide)}.ds-leading-sm{line-height:var(--ds-lineHeight-small)}.ds-leading-md{line-height:var(--ds-lineHeight-medium)}.ds-leading-lg{line-height:var(--ds-lineHeight-large)}.ds-leading-xl{line-height:var(--ds-lineHeight-xLarge)}.ds-width-md{font-stretch:var(--ds-fontWidth-normal)}.ds-width-sm{font-stretch:var(--ds-fontWidth-condense)}.ds-number-proportional{font-variant-numeric:var(--ds-number-style)}.ds-paragraph-16{margin-bottom:var(--ds-marginBottom, 16px)}.ds-paragraph-20{margin-bottom:var(--ds-marginBottom, 20px)}.ds-list-spacing{gap:4px}.ds-text-color-default{color:var(--ds-textColor-default)}.ds-text{}.ds-text-regular-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular)}.ds-text{}.ds-text-semibold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-semibold)}.ds-text{}.ds-text-bold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-bold)}.ds-spinner__HTSRrd{display:inline-block}.ds-spinner__HTSRrd:has(.ds-spinner__HTSRrd__text){display:inline-flex;align-items:center;gap:calc(var(--spinner-size) / 2)}.ds-spinner__HTSRrd{}.ds-spinner__HTSRrd--small{padding:1.5px}.ds-spinner__HTSRrd--medium{padding:3px}.ds-spinner__HTSRrd--large{padding:3px}.ds-spinner__HTSRrd--xLarge{padding:5.5px}.ds-spinner__HTSRrd--2xLarge{padding:5.5px}.ds-spinner__HTSRrd--custom{padding:calc(var(--spinner-size) / 8)}.ds-spinner__HTSRrd{}.ds-spinner__HTSRrd--below{flex-direction:column;align-items:center}.ds-spinner__HTSRrd--right{flex-direction:row;align-items:center}.ds-spinner__HTSRrd__spinner{width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border-radius:50%;border:calc(var(--spinner-size, 24px) / 6) solid var(--ds-borderColor-disabled-onLight);position:relative;display:flex;align-items:center;justify-content:center}.ds-spinner__HTSRrd__text{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body)}.ds-spinner__HTSRrd__text--white{color:var(--ds-textColor-white)}.ds-spinner__HTSRrd__segment{display:block;position:absolute;width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border:calc(var(--spinner-size, 24px) / 6) solid var(--spinner-color, #005a94);border-radius:50%;animation:ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;border-color:var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color)}.ds-spinner__HTSRrd__segment--1{animation-delay:-0.3s}.ds-spinner__HTSRrd__segment--2{animation-delay:-0.2s}.ds-spinner__HTSRrd__segment--3{animation-delay:-0.1s}@keyframes ds-spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ds-spinner__HTSRrd__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__HTSRrd__segment--1{animation-delay:-0.6s}.ds-spinner__HTSRrd__segment--2{animation-delay:-0.4s}.ds-spinner__HTSRrd__segment--3{animation-delay:-0.2s}}";
 
 const SPINNER_SIZES = {
     'small': 10,
@@ -25,6 +25,7 @@ const SPINNER_COLORS = {
     blue: 'var(--ds-palette-mainBlue-70)',
     black: 'var(--ds-palette-black-95)',
     white: 'var(--ds-palette-white)',
+    danger: 'var(--ds-palette-red-70)',
 };
 const DsSpinner = proxyCustomElement(class DsSpinner extends H {
     constructor(registerHost) {
@@ -65,11 +66,11 @@ const DsSpinner = proxyCustomElement(class DsSpinner extends H {
         const segmentClasses = (index) => classNames(`${baseClass}__segment`, `${baseClass}__segment--${index}`);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
         const spinnerSizeValue = this.dsCustomSize ? `calc(${this.dsCustomSize} / 1.5833333333)` : `${sizeInPixels}px`;
-        return (h("div", { key: '8913c8c5401dffba3bb7abe43db3c1afd6775ee3', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+        return (h("div", { key: 'd78da25f71202bd5f5c5dc2d92e13c581e834d7f', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
                 '--spinner-size': spinnerSizeValue,
                 '--spinner-color': `${spinnerColorVariable}`,
                 '--spinner-border-color': this.dsColour == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
-            }, ...this.inheritedAttributes }, h("div", { key: 'e707f822461892f6ccc1bb6b417875ac306ae547', class: `${baseClass}__spinner` }, h("div", { key: '35db86067a9438c5f39798a8acbfa222dcddcfc7', class: segmentClasses(1) }), h("div", { key: '92be670780d43cee87ef8893dca076d9cf0959f2', class: segmentClasses(2) }), h("div", { key: 'dc6b5b27c285f28c0c20a18740b9e879c7226694', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'f92b2cc2f0e096119a36b92b91da4b15bc688866' }, h("span", { key: '5ca590701eb04d3beab6dd416510ff586bfff2b6' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: 'bac1e20291e903aa0c723118d14f307982bea009', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
+            }, ...this.inheritedAttributes }, h("div", { key: 'b2e3d79566f25b904d01ab91d593c78eaf8025d7', class: `${baseClass}__spinner` }, h("div", { key: 'a7b7fd1c0e9360eeb14f65cce4518603af7d6852', class: segmentClasses(1) }), h("div", { key: '8d674f11ab642a2e106933f9e7e77cb24c128d4a', class: segmentClasses(2) }), h("div", { key: '49590fb7f9072695c5a7f49abda7510fd78e7f5c', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: '6f93eb6b3c9516f41fee693ae65012164db26ee9' }, h("span", { key: '0fbc33095e1e691abc4d9230ef2804ff2f14c94b' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: '95f3a5de9dfe908d52f1dc7b6840d6a3d5667433', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
     }
     static get style() { return dsSpinnerCss; }
 }, [257, "ds-spinner", {

package/dist/components/ds-tag-group.js

@@ -5,7 +5,7 @@ import { i as inheritAriaAttributes, a as inheritAttributes } from './attributes
 import { d as defineCustomElement$3 } from './ds-assistive-text2.js';
 import { d as defineCustomElement$2 } from './ds-group-label2.js';
 
-const dsTagGroupCss = ".ds-tag-group__DFAX9n__tags.sc-ds-tag-group{display:inline-flex;flex-flow:row wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}";
+const dsTagGroupCss = ".ds-tag-group__HTSRrd__tags.sc-ds-tag-group{display:inline-flex;flex-flow:row wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}";
 
 const tagGroupIdGenerator = idGenerator('ds-tag-group');
 const DsTagGroup$1 = proxyCustomElement(class DsTagGroup extends H {
@@ -34,7 +34,7 @@ const DsTagGroup$1 = proxyCustomElement(class DsTagGroup extends H {
         const { ['aria-label']: attrAriaLabel, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId].filter(Boolean).join(' ');
         const ariaLabel = this.dsAriaLabel || attrAriaLabel || this.dsLabel;
-        return (h("div", { key: 'ca526c5ac71155054926bdb68b9e326e29bddf56', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: 'ca4dde5c79963b76b5c18835d5dbf1d14869debf', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: '6314740e852ad1e528036244217648260ffa3354', name: "label" }), h("slot", { key: 'cca7f56ae4e961ca36eacdf7b6f304497360bcd0', name: "assistiveText" })), h("div", { key: '4ebf0810f30588917820730bc02cada9a8632e5d', role: "list", class: `${baseClass}__tags` }, h("slot", { key: '12bb06986972f647f6ae8780664df68fe292f98d' }))));
+        return (h("div", { key: 'bc8fd8590b4e3f84e80cb468a68cfe019e7a1150', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: 'c126d0b13ee8347fa94c6d03ef45eec6107e1930', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: '07decc48acbd5c236017dd1958a17c16a725d0cc', name: "label" }), h("slot", { key: '6d411db48cc848fd851ab4927e5fb932612b2cf6', name: "assistiveText" })), h("div", { key: 'f6183c90fca865eeab8ad01fd67c1b628676c5ca', role: "list", class: `${baseClass}__tags` }, h("slot", { key: 'ce4eeebdb12e5c4ab179eb2e476387a028c5f787' }))));
     }
     static get style() { return dsTagGroupCss; }
 }, [262, "ds-tag-group", {

package/dist/components/ds-tag2.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$3 } from './ds-icon2.js';
 import { d as defineCustomElement$2 } from './ds-link2.js';
 import { d as defineCustomElement$1 } from './ds-visually-hidden2.js';
 
-const dsTagCss = ".ds-tag__DFAX9n: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-tag__DFAX9n: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-tag__DFAX9n{box-sizing:border-box;display:inline-flex;align-items:center;min-height:1.5rem;background-color:var(--ds-bgColor-neutral);padding:calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);gap:var(--ds-spacing-3xSmall)}.ds-tag__DFAX9n.ds-tag__DFAX9n--default{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-neutral)}.ds-tag__DFAX9n.ds-tag__DFAX9n--default:has(.ds-tag__DFAX9n__link:hover){background-color:var(--ds-bgColor-neutral-hover)}.ds-tag__DFAX9n.ds-tag__DFAX9n--default:has(.ds-tag__DFAX9n__link:active){background-color:var(--ds-bgColor-neutral-active)}.ds-tag__DFAX9n.ds-tag__DFAX9n--black{color:var(--ds-textColor-white);background-color:var(--ds-bgColor-black)}.ds-tag__DFAX9n.ds-tag__DFAX9n--black:has(.ds-tag__DFAX9n__link:hover){background-color:var(--ds-bgColor-black-hover)}.ds-tag__DFAX9n.ds-tag__DFAX9n--black:has(.ds-tag__DFAX9n__link:active){background-color:var(--ds-bgColor-black-active)}.ds-tag__DFAX9n.ds-tag__DFAX9n--white{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-white)}.ds-tag__DFAX9n.ds-tag__DFAX9n--white:has(.ds-tag__DFAX9n__link:hover){background-color:var(--ds-bgColor-white-hover)}.ds-tag__DFAX9n.ds-tag__DFAX9n--white:has(.ds-tag__DFAX9n__link:active){background-color:var(--ds-bgColor-white-active)}.ds-tag__DFAX9n.ds-tag__DFAX9n--info{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-info)}.ds-tag__DFAX9n.ds-tag__DFAX9n--info:has(.ds-tag__DFAX9n__link:hover){background-color:var(--ds-bgColor-info-hover)}.ds-tag__DFAX9n.ds-tag__DFAX9n--info:has(.ds-tag__DFAX9n__link:active){background-color:var(--ds-bgColor-info-active)}.ds-tag__DFAX9n.ds-tag__DFAX9n--danger{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-danger)}.ds-tag__DFAX9n.ds-tag__DFAX9n--danger:has(.ds-tag__DFAX9n__link:hover){background-color:var(--ds-bgColor-danger-hover)}.ds-tag__DFAX9n.ds-tag__DFAX9n--danger:has(.ds-tag__DFAX9n__link:active){background-color:var(--ds-bgColor-danger-active)}.ds-tag__DFAX9n.ds-tag__DFAX9n--attention{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-attention)}.ds-tag__DFAX9n.ds-tag__DFAX9n--attention:has(.ds-tag__DFAX9n__link:hover){background-color:var(--ds-bgColor-attention-hover)}.ds-tag__DFAX9n.ds-tag__DFAX9n--attention:has(.ds-tag__DFAX9n__link:active){background-color:var(--ds-bgColor-attention-active)}.ds-tag__DFAX9n.ds-tag__DFAX9n--success{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-success)}.ds-tag__DFAX9n.ds-tag__DFAX9n--success:has(.ds-tag__DFAX9n__link:hover){background-color:var(--ds-bgColor-success-hover)}.ds-tag__DFAX9n.ds-tag__DFAX9n--success:has(.ds-tag__DFAX9n__link:active){background-color:var(--ds-bgColor-success-active)}.ds-tag__DFAX9n__text{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-tag__DFAX9n__link{display:contents}.ds-tag__DFAX9n__link::part(link):focus-visible{box-shadow:none;outline:none;outline-offset:none}";
+const dsTagCss = ".ds-tag__HTSRrd: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-tag__HTSRrd: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-tag__HTSRrd{box-sizing:border-box;display:inline-flex;align-items:center;min-height:1.5rem;background-color:var(--ds-bgColor-neutral);padding:calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);gap:var(--ds-spacing-3xSmall)}.ds-tag__HTSRrd.ds-tag__HTSRrd--default{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-neutral)}.ds-tag__HTSRrd.ds-tag__HTSRrd--default:has(.ds-tag__HTSRrd__link:hover){background-color:var(--ds-bgColor-neutral-hover)}.ds-tag__HTSRrd.ds-tag__HTSRrd--default:has(.ds-tag__HTSRrd__link:active){background-color:var(--ds-bgColor-neutral-active)}.ds-tag__HTSRrd.ds-tag__HTSRrd--black{color:var(--ds-textColor-white);background-color:var(--ds-bgColor-black)}.ds-tag__HTSRrd.ds-tag__HTSRrd--black:has(.ds-tag__HTSRrd__link:hover){background-color:var(--ds-bgColor-black-hover)}.ds-tag__HTSRrd.ds-tag__HTSRrd--black:has(.ds-tag__HTSRrd__link:active){background-color:var(--ds-bgColor-black-active)}.ds-tag__HTSRrd.ds-tag__HTSRrd--white{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-white)}.ds-tag__HTSRrd.ds-tag__HTSRrd--white:has(.ds-tag__HTSRrd__link:hover){background-color:var(--ds-bgColor-white-hover)}.ds-tag__HTSRrd.ds-tag__HTSRrd--white:has(.ds-tag__HTSRrd__link:active){background-color:var(--ds-bgColor-white-active)}.ds-tag__HTSRrd.ds-tag__HTSRrd--info{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-info)}.ds-tag__HTSRrd.ds-tag__HTSRrd--info:has(.ds-tag__HTSRrd__link:hover){background-color:var(--ds-bgColor-info-hover)}.ds-tag__HTSRrd.ds-tag__HTSRrd--info:has(.ds-tag__HTSRrd__link:active){background-color:var(--ds-bgColor-info-active)}.ds-tag__HTSRrd.ds-tag__HTSRrd--danger{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-danger)}.ds-tag__HTSRrd.ds-tag__HTSRrd--danger:has(.ds-tag__HTSRrd__link:hover){background-color:var(--ds-bgColor-danger-hover)}.ds-tag__HTSRrd.ds-tag__HTSRrd--danger:has(.ds-tag__HTSRrd__link:active){background-color:var(--ds-bgColor-danger-active)}.ds-tag__HTSRrd.ds-tag__HTSRrd--attention{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-attention)}.ds-tag__HTSRrd.ds-tag__HTSRrd--attention:has(.ds-tag__HTSRrd__link:hover){background-color:var(--ds-bgColor-attention-hover)}.ds-tag__HTSRrd.ds-tag__HTSRrd--attention:has(.ds-tag__HTSRrd__link:active){background-color:var(--ds-bgColor-attention-active)}.ds-tag__HTSRrd.ds-tag__HTSRrd--success{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-success)}.ds-tag__HTSRrd.ds-tag__HTSRrd--success:has(.ds-tag__HTSRrd__link:hover){background-color:var(--ds-bgColor-success-hover)}.ds-tag__HTSRrd.ds-tag__HTSRrd--success:has(.ds-tag__HTSRrd__link:active){background-color:var(--ds-bgColor-success-active)}.ds-tag__HTSRrd__text{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-tag__HTSRrd__link{display:contents}.ds-tag__HTSRrd__link::part(link):focus-visible{box-shadow:none;outline:none;outline-offset:none}";
 
 const DsTag = proxyCustomElement(class DsTag extends H {
     constructor(registerHost) {
@@ -25,6 +25,7 @@ const DsTag = proxyCustomElement(class DsTag extends H {
     dsTarget;
     dsHref;
     dsColour = 'default';
+    dsRole;
     dsAriaHidden;
     componentWillLoad() {
         this.inheritedAttributes = {
@@ -40,8 +41,9 @@ const DsTag = proxyCustomElement(class DsTag extends H {
         const DsIcon = transformTagName('ds-icon', 'ds-tag', this.el);
         const DsLink = transformTagName('ds-link', 'ds-tag', this.el);
         const ariaHidden = this.dsAriaHidden !== undefined ? this.dsAriaHidden : this.dsHref ? false : true;
-        const restAttributes = omit(this.inheritedAttributes, ['aria-hidden']);
-        return (h("div", { key: '2036fd3502b7a7d035db204f94a2d2d72ae54dec', class: classes, ...restAttributes, "aria-hidden": ariaHidden }, h("slot", { key: 'b15093ac785e26444835eee3a0051e520f3f31e7', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: '89800d5086bf1b52dc4c5791985e5dbb98a614ec' }, this.dsHref ? (h(DsLink, { class: `${baseClass}__link`, dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (h("span", { class: `${baseClass}__text` }, this.dsText))), h("slot", { key: 'b13686f17d29f22d2ba343399b7711a71a2a65ac', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
+        const role = this.dsRole ?? this.inheritedAttributes.role;
+        const restAttributes = omit(this.inheritedAttributes, ['aria-hidden', 'role']);
+        return (h("div", { key: 'c3866cb7a61595782d3b805eeb2c4c9d4042c80c', class: classes, ...restAttributes, "aria-hidden": ariaHidden, role: role }, h("slot", { key: 'db69537f46a5cf7ef6279fedf18e56472230463b', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: 'f89f267cd490dc5889e235c705b74533eb25ac8d' }, this.dsHref ? (h(DsLink, { class: `${baseClass}__link`, dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (h("span", { class: `${baseClass}__text` }, this.dsText))), h("slot", { key: '08098e89678baedc1a2510cd0896d463acb89d90', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
     }
     static get style() { return dsTagCss; }
 }, [260, "ds-tag", {
@@ -52,6 +54,7 @@ const DsTag = proxyCustomElement(class DsTag extends H {
         "dsTarget": [1, "ds-target"],
         "dsHref": [1, "ds-href"],
         "dsColour": [1, "ds-colour"],
+        "dsRole": [1, "ds-role"],
         "dsAriaHidden": [4, "ds-aria-hidden"]
     }]);
 declareComponentDependencies([h("ds-icon", { dsName: "" }), h("ds-link", { dsText: "" })]);

package/dist/components/ds-text-area.js

@@ -12,7 +12,7 @@ import { d as defineCustomElement$4 } from './ds-icon2.js';
 import { d as defineCustomElement$3 } from './ds-input-validity2.js';
 import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
 
-const dsTextAreaCss = ".sc-ds-text-area-h *.sc-ds-text-area,.ds-no-style-leak.sc-ds-text-area *.sc-ds-text-area{all:unset;box-sizing:border-box;display:block}.sc-ds-text-area-h{display:inline-block}.sc-ds-text-area-h:has(.ds-text-area__DFAX9n__container--full-width){width:100%}.ds-text-area__DFAX9n__container.sc-ds-text-area: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-text-area__DFAX9n__container.sc-ds-text-area: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-text-area__DFAX9n__container.sc-ds-text-area{box-sizing:border-box;display:inline-flex;position:relative;align-items:flex-start;border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default);padding:0}.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid.sc-ds-text-area{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid.sc-ds-text-area:hover:not(.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid.ds-text-area__DFAX9n__container--active.sc-ds-text-area{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-text-area__DFAX9n__container--valid.sc-ds-text-area{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-text-area__DFAX9n__container--valid.sc-ds-text-area:hover:not(.ds-text-area__DFAX9n__container--valid:focus-within){background-color:var(--ds-bgColor-success-hover);border-color:var(--ds-borderColor-success)}.ds-text-area__DFAX9n__container--valid.ds-text-area__DFAX9n__container--active.sc-ds-text-area{background-color:var(--ds-bgColor-success-active);border-color:var(--ds-borderColor-success)}.ds-text-area__DFAX9n__container--readonly.sc-ds-text-area,.ds-text-area__DFAX9n__container--disabled.sc-ds-text-area{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-text-area__DFAX9n__container.sc-ds-text-area:focus-within:not(.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid,.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--valid.sc-ds-text-area,.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--readonly).sc-ds-text-area{border-color:var(--ds-borderColor-primary)}.ds-text-area__DFAX9n__container.sc-ds-text-area:hover:not(.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--disabled,.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--readonly.sc-ds-text-area,.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--active.sc-ds-text-area,.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid.sc-ds-text-area,.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--valid.sc-ds-text-area,.ds-text-area__DFAX9n__container.sc-ds-text-area:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-text-area__DFAX9n__container.active.sc-ds-text-area:not(.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--disabled,.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--readonly.sc-ds-text-area,.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--invalid.sc-ds-text-area,.ds-text-area__DFAX9n__container.ds-text-area__DFAX9n__container--valid).sc-ds-text-area{border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-active)}.ds-text-area__DFAX9n__container--full-width.sc-ds-text-area{width:100%}.ds-text-area__DFAX9n__external-button.sc-ds-text-area,.ds-text-area__DFAX9n.sc-ds-text-area-s>[slot=suffix],.ds-text-area__DFAX9n .sc-ds-text-area-s>[slot=suffix]{margin-inline-start:var(--ds-spacing-xSmall);align-self:flex-start}.ds-text-area__DFAX9n__validity-container.sc-ds-text-area{align-items:center;width:100%;font-size:var(--ds-fontSize-14)}.ds-text-area__DFAX9n__validity-container--has-character-limit.sc-ds-text-area{display:flex;gap:var(--ds-spacing-small);justify-content:space-between}.ds-text-area__DFAX9n__character-count.sc-ds-text-area{margin-top:var(--ds-spacing-2xSmall)}.ds-text-area__DFAX9n__character-count--over-limit.sc-ds-text-area{color:var(--ds-textColor-danger)}.ds-text-area__DFAX9n__character-count.sc-ds-text-area>small.sc-ds-text-area{display:inline-block}.ds-text-area__DFAX9n__textarea.sc-ds-text-area{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);width:288px;min-width:0;min-height:96px;box-sizing:border-box;background-color:unset;color:var(--ds-textColor-default);border:none;padding:var(--ds-spacing-2xSmall)}.ds-text-area__DFAX9n__textarea.sc-ds-text-area::placeholder{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-secondary)}.ds-text-area__DFAX9n__textarea.sc-ds-text-area:disabled{color:var(--ds-textColor-disabled-onLight);background-color:var(--ds-bgColor-disabled-onLight);cursor:not-allowed}.ds-text-area__DFAX9n__textarea.sc-ds-text-area:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-text-area__DFAX9n__textarea.sc-ds-text-area:focus{outline:none;border:none}.ds-text-area__DFAX9n__textarea--resize-both.sc-ds-text-area{resize:both}.ds-text-area__DFAX9n__textarea--resize-auto.sc-ds-text-area,.ds-text-area__DFAX9n__textarea--resize-none.sc-ds-text-area{resize:none}.ds-text-area__DFAX9n__textarea--resize-auto.sc-ds-text-area{overflow:hidden}.ds-text-area__DFAX9n__textarea--resize-vertical.sc-ds-text-area{resize:vertical}.ds-text-area__DFAX9n__textarea--resize-horizontal.sc-ds-text-area{resize:horizontal}.ds-text-area__DFAX9n__textarea--full-width.sc-ds-text-area{width:100%}";
+const dsTextAreaCss = ".sc-ds-text-area-h *.sc-ds-text-area,.ds-no-style-leak.sc-ds-text-area *.sc-ds-text-area{all:unset;box-sizing:border-box;display:block}.sc-ds-text-area-h{display:inline-block}.sc-ds-text-area-h:has(.ds-text-area__HTSRrd__container--full-width){width:100%}.ds-text-area__HTSRrd__container.sc-ds-text-area: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-text-area__HTSRrd__container.sc-ds-text-area: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-text-area__HTSRrd__container.sc-ds-text-area{box-sizing:border-box;display:inline-flex;position:relative;align-items:flex-start;border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default);padding:0}.ds-text-area__HTSRrd__container.ds-text-area__HTSRrd__container--invalid.sc-ds-text-area{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-text-area__HTSRrd__container.ds-text-area__HTSRrd__container--invalid.sc-ds-text-area:hover:not(.ds-text-area__HTSRrd__container.ds-text-area__HTSRrd__container--invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-text-area__HTSRrd__container.ds-text-area__HTSRrd__container--invalid.ds-text-area__HTSRrd__container--active.sc-ds-text-area{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-text-area__HTSRrd__container--valid.sc-ds-text-area{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-text-area__HTSRrd__container--valid.sc-ds-text-area:hover:not(.ds-text-area__HTSRrd__container--valid:focus-within){background-color:var(--ds-bgColor-success-hover);border-color:var(--ds-borderColor-success)}.ds-text-area__HTSRrd__container--valid.ds-text-area__HTSRrd__container--active.sc-ds-text-area{background-color:var(--ds-bgColor-success-active);border-color:var(--ds-borderColor-success)}.ds-text-area__HTSRrd__container--readonly.sc-ds-text-area,.ds-text-area__HTSRrd__container--disabled.sc-ds-text-area{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-text-area__HTSRrd__container.sc-ds-text-area:focus-within:not(.ds-text-area__HTSRrd__container.ds-text-area__HTSRrd__container--invalid,.ds-text-area__HTSRrd__container.ds-text-area__HTSRrd__container--valid.sc-ds-text-area,.ds-text-area__HTSRrd__container.ds-text-area__HTSRrd__container--readonly).sc-ds-text-area{border-color:var(--ds-borderColor-primary)}.ds-text-area__HTSRrd__container.sc-ds-text-area:hover:not(.ds-text-area__HTSRrd__container.ds-text-area__HTSRrd__container--disabled,.ds-text-area__HTSRrd__container.ds-text-area__HTSRrd__container--readonly.sc-ds-text-area,.ds-text-area__HTSRrd__container.ds-text-area__HTSRrd__container--active.sc-ds-text-area,.ds-text-area__HTSRrd__container.ds-text-area__HTSRrd__container--invalid.sc-ds-text-area,.ds-text-area__HTSRrd__container.ds-text-area__HTSRrd__container--valid.sc-ds-text-area,.ds-text-area__HTSRrd__container.sc-ds-text-area:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-text-area__HTSRrd__container.active.sc-ds-text-area:not(.ds-text-area__HTSRrd__container.ds-text-area__HTSRrd__container--disabled,.ds-text-area__HTSRrd__container.ds-text-area__HTSRrd__container--readonly.sc-ds-text-area,.ds-text-area__HTSRrd__container.ds-text-area__HTSRrd__container--invalid.sc-ds-text-area,.ds-text-area__HTSRrd__container.ds-text-area__HTSRrd__container--valid).sc-ds-text-area{border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-active)}.ds-text-area__HTSRrd__container--full-width.sc-ds-text-area{width:100%}.ds-text-area__HTSRrd__external-button.sc-ds-text-area,.ds-text-area__HTSRrd.sc-ds-text-area-s>[slot=suffix],.ds-text-area__HTSRrd .sc-ds-text-area-s>[slot=suffix]{margin-inline-start:var(--ds-spacing-xSmall);align-self:flex-start}.ds-text-area__HTSRrd__validity-container.sc-ds-text-area{align-items:center;width:100%;font-size:var(--ds-fontSize-14)}.ds-text-area__HTSRrd__validity-container--has-character-limit.sc-ds-text-area{display:flex;gap:var(--ds-spacing-small);justify-content:space-between}.ds-text-area__HTSRrd__character-count.sc-ds-text-area{margin-top:var(--ds-spacing-2xSmall)}.ds-text-area__HTSRrd__character-count--over-limit.sc-ds-text-area{color:var(--ds-textColor-danger)}.ds-text-area__HTSRrd__character-count.sc-ds-text-area>small.sc-ds-text-area{display:inline-block}.ds-text-area__HTSRrd__textarea.sc-ds-text-area{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);width:288px;min-width:0;min-height:96px;box-sizing:border-box;background-color:unset;color:var(--ds-textColor-default);border:none;padding:var(--ds-spacing-2xSmall)}.ds-text-area__HTSRrd__textarea.sc-ds-text-area::placeholder{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-secondary)}.ds-text-area__HTSRrd__textarea.sc-ds-text-area:disabled{color:var(--ds-textColor-disabled-onLight);background-color:var(--ds-bgColor-disabled-onLight);cursor:not-allowed}.ds-text-area__HTSRrd__textarea.sc-ds-text-area:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-text-area__HTSRrd__textarea.sc-ds-text-area:focus{outline:none;border:none}.ds-text-area__HTSRrd__textarea--resize-both.sc-ds-text-area{resize:both}.ds-text-area__HTSRrd__textarea--resize-auto.sc-ds-text-area,.ds-text-area__HTSRrd__textarea--resize-none.sc-ds-text-area{resize:none}.ds-text-area__HTSRrd__textarea--resize-auto.sc-ds-text-area{overflow:hidden}.ds-text-area__HTSRrd__textarea--resize-vertical.sc-ds-text-area{resize:vertical}.ds-text-area__HTSRrd__textarea--resize-horizontal.sc-ds-text-area{resize:horizontal}.ds-text-area__HTSRrd__textarea--full-width.sc-ds-text-area{width:100%}";
 
 const textareaIdGenerator = idGenerator('ds-text-area');
 const DsTextArea$1 = proxyCustomElement(class DsTextArea extends H {

package/dist/components/ds-text-input.js

@@ -13,7 +13,7 @@ import { d as defineCustomElement$4 } from './ds-input-validity2.js';
 import { d as defineCustomElement$3 } from './ds-spinner2.js';
 import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
 
-const dsTextInputCss = ".sc-ds-text-input-h *.sc-ds-text-input,.ds-no-style-leak.sc-ds-text-input *.sc-ds-text-input{all:unset;box-sizing:border-box;display:block}.sc-ds-text-input-h{display:block;width:288px}@media (min-width: 75rem){.sc-ds-text-input-h{width:320px}}.ds-text-input__DFAX9n__label-container.sc-ds-text-input{margin-block-end:var(--ds-spacing-2xSmall)}.ds-text-input__DFAX9n__label-container.sc-ds-text-input label.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-default)}.ds-text-input__DFAX9n__label-container.sc-ds-text-input small.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);display:block;margin-block-start:var(--ds-spacing-3xSmall);color:var(--ds-textColor-secondary)}.ds-text-input__DFAX9n__container.sc-ds-text-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-text-input__DFAX9n__container.sc-ds-text-input: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-text-input__DFAX9n__container.sc-ds-text-input{box-sizing:border-box;width:100%;display:inline-flex;position:relative;align-items:center;border-width:var(--ds-borderWidth-thin);border-style:solid;background-color:var(--ds-bgColor-white);border-color:var(--ds-borderColor-default);padding-inline:var(--ds-spacing-xSmall)}.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--invalid.sc-ds-text-input{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--invalid.sc-ds-text-input:hover:not(.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--invalid.ds-text-input__DFAX9n__container--active.sc-ds-text-input{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--valid.sc-ds-text-input{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--valid.sc-ds-text-input:hover:not(.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--valid:focus-within){background-color:var(--ds-bgColor-success-hover);border-color:var(--ds-borderColor-success)}.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--valid.sc-ds-text-input .ds-text-input__DFAX9n__container--active.sc-ds-text-input{background-color:var(--ds-bgColor-success-active);border-color:var(--ds-borderColor-success)}.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--readonly.sc-ds-text-input,.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--disabled.sc-ds-text-input{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-text-input__DFAX9n__container.sc-ds-text-input:has(span.ds-text-input__DFAX9n__prefix,.ds-text-input__DFAX9n__icon).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-text-input__DFAX9n__container.sc-ds-text-input:has(.ds-text-input__DFAX9n__button){padding-inline-end:unset}.ds-text-input__DFAX9n__container.sc-ds-text-input:has(input:active):not:has(input:disabled,input.sc-ds-text-input:read-only){border-color:var(--ds-borderColor-default)}.ds-text-input__DFAX9n__container.sc-ds-text-input:has(input:active){outline:none}.ds-text-input__DFAX9n__container.active.sc-ds-text-input:not(.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--disabled,.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--readonly.sc-ds-text-input,.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--invalid.sc-ds-text-input,.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--valid).sc-ds-text-input{border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-active)}.ds-text-input__DFAX9n__container.sc-ds-text-input:hover:not(.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--disabled,.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--readonly.sc-ds-text-input,.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--active.sc-ds-text-input,.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--invalid.sc-ds-text-input,.ds-text-input__DFAX9n__container.ds-text-input__DFAX9n__container--valid.sc-ds-text-input,.ds-text-input__DFAX9n__container.sc-ds-text-input:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-text-input__DFAX9n__container.sc-ds-text-input:focus-within:not(.ds-text-input__DFAX9n__container:focus-within.ds-text-input__DFAX9n__container--invalid,.ds-text-input__DFAX9n__container.sc-ds-text-input:focus-within.ds-text-input__DFAX9n__container--valid,.ds-text-input__DFAX9n__container.sc-ds-text-input:focus-within.ds-text-input__DFAX9n__container--readonly){border-color:var(--ds-borderColor-primary)}.ds-text-input__DFAX9n__container.sc-ds-text-input:focus-within *.sc-ds-text-input>.ds-text-input__DFAX9n__button.sc-ds-text-input>button.sc-ds-text-input:focus-visible{background-clip:padding-box;outline-offset:-5px;box-shadow:none;height:var(--ds-spacing-xLarge);background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-text-input__DFAX9n__container.sc-ds-text-input>input.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);width:100%;box-sizing:border-box;background-color:unset;flex-grow:1;height:var(--ds-spacing-xLarge);line-height:var(--ds-fontSize-24);color:var(--ds-textColor-default);border:none;padding-block:var(--ds-spacing-4xSmall)}.ds-text-input__DFAX9n__container.sc-ds-text-input>input.sc-ds-text-input::placeholder{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-secondary)}.ds-text-input__DFAX9n__container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-textColor-disabled-onLight)}.ds-text-input__DFAX9n__container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-text-input__DFAX9n__container.sc-ds-text-input>input.sc-ds-text-input:focus{outline:none;border:none}.ds-text-input__DFAX9n__container.sc-ds-text-input>input[type=number].sc-ds-text-input{appearance:textfield}.ds-text-input__DFAX9n__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-decoration,.ds-text-input__DFAX9n__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-cancel-button,.ds-text-input__DFAX9n__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-button,.ds-text-input__DFAX9n__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-decoration,.ds-text-input__DFAX9n__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-inner-spin-button,.ds-text-input__DFAX9n__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-outer-spin-button{appearance:none;margin:0}.ds-text-input__DFAX9n__container.sc-ds-text-input:has(span.ds-text-input__DFAX9n__prefix,.ds-text-input__DFAX9n__icon).sc-ds-text-input>input.sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-text-input__DFAX9n__container.sc-ds-text-input span.ds-text-input__DFAX9n__prefix.sc-ds-text-input,.ds-text-input__DFAX9n__container.sc-ds-text-input span.ds-text-input__DFAX9n__suffix.sc-ds-text-input{font-family:var(--ds-fontFamily-body);color:var(--ds-textColor-link-standalone)}.ds-text-input__DFAX9n__container.sc-ds-text-input .ds-text-input__DFAX9n__icon.sc-ds-text-input,.ds-text-input__DFAX9n__container.sc-ds-text-input-s>[slot=prefix],.ds-text-input__DFAX9n__container .sc-ds-text-input-s>[slot=prefix]{height:1.5rem;color:var(--ds-textColor-default)}.ds-text-input__DFAX9n__container.sc-ds-text-input .ds-text-input__DFAX9n__button.sc-ds-text-input{margin-top:calc(var(--ds-spacing-3xSmall) * -1);margin-right:calc(var(--ds-spacing-4xSmall) * -1);max-height:40px}";
+const dsTextInputCss = ".sc-ds-text-input-h *.sc-ds-text-input,.ds-no-style-leak.sc-ds-text-input *.sc-ds-text-input{all:unset;box-sizing:border-box;display:block}.sc-ds-text-input-h{display:block;width:288px}@media (min-width: 75rem){.sc-ds-text-input-h{width:320px}}.ds-text-input__HTSRrd__label-container.sc-ds-text-input{margin-block-end:var(--ds-spacing-2xSmall)}.ds-text-input__HTSRrd__label-container.sc-ds-text-input label.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-default)}.ds-text-input__HTSRrd__label-container.sc-ds-text-input small.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);display:block;margin-block-start:var(--ds-spacing-3xSmall);color:var(--ds-textColor-secondary)}.ds-text-input__HTSRrd__container.sc-ds-text-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-text-input__HTSRrd__container.sc-ds-text-input: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-text-input__HTSRrd__container.sc-ds-text-input{box-sizing:border-box;width:100%;display:inline-flex;position:relative;align-items:center;border-width:var(--ds-borderWidth-thin);border-style:solid;background-color:var(--ds-bgColor-white);border-color:var(--ds-borderColor-default);padding-inline:var(--ds-spacing-xSmall)}.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--invalid.sc-ds-text-input{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--invalid.sc-ds-text-input:hover:not(.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--invalid.ds-text-input__HTSRrd__container--active.sc-ds-text-input{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--valid.sc-ds-text-input{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--valid.sc-ds-text-input:hover:not(.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--valid:focus-within){background-color:var(--ds-bgColor-success-hover);border-color:var(--ds-borderColor-success)}.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--valid.sc-ds-text-input .ds-text-input__HTSRrd__container--active.sc-ds-text-input{background-color:var(--ds-bgColor-success-active);border-color:var(--ds-borderColor-success)}.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--readonly.sc-ds-text-input,.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--disabled.sc-ds-text-input{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-text-input__HTSRrd__container.sc-ds-text-input:has(span.ds-text-input__HTSRrd__prefix,.ds-text-input__HTSRrd__icon).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-text-input__HTSRrd__container.sc-ds-text-input:has(.ds-text-input__HTSRrd__button){padding-inline-end:unset}.ds-text-input__HTSRrd__container.sc-ds-text-input:has(input:active):not:has(input:disabled,input.sc-ds-text-input:read-only){border-color:var(--ds-borderColor-default)}.ds-text-input__HTSRrd__container.sc-ds-text-input:has(input:active){outline:none}.ds-text-input__HTSRrd__container.active.sc-ds-text-input:not(.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--disabled,.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--readonly.sc-ds-text-input,.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--invalid.sc-ds-text-input,.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--valid).sc-ds-text-input{border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-active)}.ds-text-input__HTSRrd__container.sc-ds-text-input:hover:not(.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--disabled,.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--readonly.sc-ds-text-input,.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--active.sc-ds-text-input,.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--invalid.sc-ds-text-input,.ds-text-input__HTSRrd__container.ds-text-input__HTSRrd__container--valid.sc-ds-text-input,.ds-text-input__HTSRrd__container.sc-ds-text-input:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-text-input__HTSRrd__container.sc-ds-text-input:focus-within:not(.ds-text-input__HTSRrd__container:focus-within.ds-text-input__HTSRrd__container--invalid,.ds-text-input__HTSRrd__container.sc-ds-text-input:focus-within.ds-text-input__HTSRrd__container--valid,.ds-text-input__HTSRrd__container.sc-ds-text-input:focus-within.ds-text-input__HTSRrd__container--readonly){border-color:var(--ds-borderColor-primary)}.ds-text-input__HTSRrd__container.sc-ds-text-input:focus-within *.sc-ds-text-input>.ds-text-input__HTSRrd__button.sc-ds-text-input>button.sc-ds-text-input:focus-visible{background-clip:padding-box;outline-offset:-5px;box-shadow:none;height:var(--ds-spacing-xLarge);background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-text-input__HTSRrd__container.sc-ds-text-input>input.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);width:100%;box-sizing:border-box;background-color:unset;flex-grow:1;height:var(--ds-spacing-xLarge);line-height:var(--ds-fontSize-24);color:var(--ds-textColor-default);border:none;padding-block:var(--ds-spacing-4xSmall)}.ds-text-input__HTSRrd__container.sc-ds-text-input>input.sc-ds-text-input::placeholder{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-secondary)}.ds-text-input__HTSRrd__container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-textColor-disabled-onLight)}.ds-text-input__HTSRrd__container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-text-input__HTSRrd__container.sc-ds-text-input>input.sc-ds-text-input:focus{outline:none;border:none}.ds-text-input__HTSRrd__container.sc-ds-text-input>input[type=number].sc-ds-text-input{appearance:textfield}.ds-text-input__HTSRrd__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-decoration,.ds-text-input__HTSRrd__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-cancel-button,.ds-text-input__HTSRrd__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-button,.ds-text-input__HTSRrd__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-decoration,.ds-text-input__HTSRrd__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-inner-spin-button,.ds-text-input__HTSRrd__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-outer-spin-button{appearance:none;margin:0}.ds-text-input__HTSRrd__container.sc-ds-text-input:has(span.ds-text-input__HTSRrd__prefix,.ds-text-input__HTSRrd__icon).sc-ds-text-input>input.sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-text-input__HTSRrd__container.sc-ds-text-input span.ds-text-input__HTSRrd__prefix.sc-ds-text-input,.ds-text-input__HTSRrd__container.sc-ds-text-input span.ds-text-input__HTSRrd__suffix.sc-ds-text-input{font-family:var(--ds-fontFamily-body);color:var(--ds-textColor-link-standalone)}.ds-text-input__HTSRrd__container.sc-ds-text-input .ds-text-input__HTSRrd__icon.sc-ds-text-input,.ds-text-input__HTSRrd__container.sc-ds-text-input-s>[slot=prefix],.ds-text-input__HTSRrd__container .sc-ds-text-input-s>[slot=prefix]{height:1.5rem;color:var(--ds-textColor-default)}.ds-text-input__HTSRrd__container.sc-ds-text-input .ds-text-input__HTSRrd__button.sc-ds-text-input{margin-top:calc(var(--ds-spacing-3xSmall) * -1);margin-right:calc(var(--ds-spacing-4xSmall) * -1);max-height:40px}";
 
 const INPUT_TYPE_ICONS_MAP = {
     search: 'search',

package/dist/components/ds-versioned-css-variables.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index2.js';
 
-const dsVersionedCssVariablesCss = ".sc-ds-versioned-css-variables:root,.sc-ds-versioned-css-variables-h{--ds-borderWidth-none:0px;--ds-borderWidth-hairline:1px;--ds-borderWidth-thin:2px;--ds-borderWidth-thick:4px;--ds-borderWidth-xThick:8px;--ds-borderRadius-none:0px;--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-smallPlus:45rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem;--ds-spacing-4xSmall:0.125rem;--ds-spacing-3xSmall:0.25rem;--ds-spacing-2xSmall:0.5rem;--ds-spacing-xSmall:0.75rem;--ds-spacing-small:1rem;--ds-spacing-medium:1.5rem;--ds-spacing-large:2rem;--ds-spacing-xLarge:2.5rem;--ds-spacing-2xLarge:3rem;--ds-spacing-3xLarge:3.5rem;--ds-spacing-4xLarge:4rem;--ds-spacing-5xLarge:4.5rem;--ds-spacing-layout-2xSmall:1rem;--ds-spacing-layout-xSmall:1.5rem;--ds-spacing-layout-small:2rem;--ds-spacing-layout-medium:3rem;--ds-spacing-layout-large:4rem;--ds-spacing-layout-xLarge:6rem;--ds-spacing-layout-2xLarge:8rem;--ds-overlay-black-00:rgb(0 0 0 / 0%);--ds-overlay-black-05:rgb(0 0 0 / 5%);--ds-overlay-black-10:rgb(0 0 0 / 10%);--ds-overlay-black-15:rgb(0 0 0 / 15%);--ds-overlay-black-30:rgb(0 0 0 / 30%);--ds-overlay-black-40:rgb(0 0 0 / 40%);--ds-overlay-black-50:rgb(0 0 0 / 50%);--ds-overlay-black-70:rgb(0 0 0 / 70%);--ds-overlay-black-80:rgb(0 0 0 / 80%);--ds-overlay-white-00:rgb(255 255 255 / 0%);--ds-overlay-white-05:rgb(255 255 255 / 5%);--ds-overlay-white-10:rgb(255 255 255 / 10%);--ds-overlay-white-15:rgb(255 255 255 / 15%);--ds-overlay-white-30:rgb(255 255 255 / 30%);--ds-overlay-white-40:rgb(255 255 255 / 40%);--ds-overlay-white-50:rgb(255 255 255 / 50%);--ds-overlay-white-70:rgb(255 255 255 / 70%);--ds-overlay-white-80:rgb(255 255 255 / 80%);--ds-palette-black:#000;--ds-palette-white:#fff;--ds-palette-black-03:#f7f7f7;--ds-palette-black-05:#f2f2f2;--ds-palette-black-10:#e6e6e6;--ds-palette-black-20:#ccc;--ds-palette-black-30:#b3b3b3;--ds-palette-black-40:#999;--ds-palette-black-50:#808080;--ds-palette-black-60:#666;--ds-palette-black-70:#4d4d4d;--ds-palette-black-80:#333;--ds-palette-black-90:#1a1a1a;--ds-palette-black-95:#0c0c0c;--ds-palette-blue-05:#e5f8ff;--ds-palette-blue-10:#c2eeff;--ds-palette-blue-20:#8adeff;--ds-palette-blue-30:#5cd1ff;--ds-palette-blue-40:#1abeff;--ds-palette-blue-50:#009ad6;--ds-palette-blue-60:#0084b8;--ds-palette-blue-70:#005b80;--ds-palette-blue-80:#053c52;--ds-palette-blue-90:#032330;--ds-palette-green-05:#dffbe1;--ds-palette-green-10:#bef4c1;--ds-palette-green-20:#85e08a;--ds-palette-green-30:#66cc6b;--ds-palette-green-40:#43b149;--ds-palette-green-50:#279b2d;--ds-palette-green-60:#257e29;--ds-palette-green-70:#216325;--ds-palette-green-80:#183f19;--ds-palette-green-90:#0f2410;--ds-palette-mainBlue-05:#e5f5ff;--ds-palette-mainBlue-10:#cdebff;--ds-palette-mainBlue-20:#99d7ff;--ds-palette-mainBlue-30:#70c7ff;--ds-palette-mainBlue-40:#3db3ff;--ds-palette-mainBlue-50:#009bff;--ds-palette-mainBlue-60:#007fd1;--ds-palette-mainBlue-70:#005a94;--ds-palette-mainBlue-80:#003152;--ds-palette-mainBlue-90:#001929;--ds-palette-red-05:#ffeceb;--ds-palette-red-10:#ffd8d6;--ds-palette-red-20:#fdb7b4;--ds-palette-red-30:#f87c77;--ds-palette-red-40:#f0514c;--ds-palette-red-50:#d71f19;--ds-palette-red-60:#bd2828;--ds-palette-red-70:#8b2623;--ds-palette-red-80:#602220;--ds-palette-red-90:#321c1b;--ds-palette-yellow-05:#fff1db;--ds-palette-yellow-10:#ffe7c2;--ds-palette-yellow-20:#ffd799;--ds-palette-yellow-30:#fbc05f;--ds-palette-yellow-40:#eea22b;--ds-palette-yellow-50:#ce8103;--ds-palette-yellow-60:#b26d00;--ds-palette-yellow-70:#7a4b00;--ds-palette-yellow-80:#4e3104;--ds-palette-yellow-90:#282115;--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-overlay-black-00);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-05);--ds-bgColor-white-active:var(--ds-palette-black-10);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-05);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-10);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-15);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-30);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-50);--ds-borderColor-attention:var(--ds-palette-yellow-50);--ds-iconColor-default:var(--ds-palette-black-95);--ds-iconColor-default-hover:var(--ds-palette-black-80);--ds-iconColor-default-active:var(--ds-palette-black-70);--ds-iconColor-neutral:var(--ds-palette-black-50);--ds-iconColor-neutral-hover:var(--ds-palette-black-60);--ds-iconColor-neutral-active:var(--ds-palette-black-70);--ds-iconColor-white:var(--ds-palette-white);--ds-iconColor-white-hover:var(--ds-palette-black-10);--ds-iconColor-white-active:var(--ds-palette-black-20);--ds-iconColor-primary:var(--ds-palette-mainBlue-70);--ds-iconColor-primary-active:var(--ds-palette-mainBlue-80);--ds-iconColor-primary-hover:var(--ds-palette-mainBlue-90);--ds-iconColor-info:var(--ds-palette-blue-60);--ds-iconColor-info-hover:var(--ds-palette-blue-70);--ds-iconColor-info-active:var(--ds-palette-blue-80);--ds-iconColor-danger:var(--ds-palette-red-50);--ds-iconColor-danger-hover:var(--ds-palette-red-60);--ds-iconColor-danger-active:var(--ds-palette-red-70);--ds-iconColor-success:var(--ds-palette-green-50);--ds-iconColor-success-hover:var(--ds-palette-green-60);--ds-iconColor-success-active:var(--ds-palette-green-70);--ds-iconColor-attention:var(--ds-palette-yellow-60);--ds-iconColor-attention-hover:var(--ds-palette-yellow-70);--ds-iconColor-attention-active:var(--ds-palette-yellow-80);--ds-fontFamily-heading:\"Open Sans\", sans-serif;--ds-fontFamily-body:\"Open Sans\", sans-serif;--ds-fontSize-12:12px;--ds-fontSize-14:14px;--ds-fontSize-16:16px;--ds-fontSize-18:18px;--ds-fontSize-20:20px;--ds-fontSize-22:22px;--ds-fontSize-24:24px;--ds-fontSize-26:26px;--ds-fontSize-30:30px;--ds-fontSize-32:32px;--ds-fontSize-36:36px;--ds-fontSize-40:40px;--ds-fontSize-48:48px;--ds-fontSize-56:56px;--ds-fontSize-64:64px;--ds-fontWeight-regular:400;--ds-fontWeight-semibold:600;--ds-fontWeight-semiboldPlus:650;--ds-fontWeight-bold:700;--ds-letterSpacing-xTight:var(--ds-letterSpacing, -2px);--ds-letterSpacing-tight:var(--ds-letterSpacing, -1.4px);--ds-letterSpacing-normal:var(--ds-letterSpacing, -0.4px);--ds-letterSpacing-wide:var(--ds-letterSpacing, 0px);--ds-letterSpacing-xWide:var(--ds-letterSpacing, 0.4px);--ds-lineHeight-small:var(--ds-lineHeight, 1);--ds-lineHeight-medium:var(--ds-lineHeight, 1.2);--ds-lineHeight-large:var(--ds-lineHeight, 1.5);--ds-lineHeight-xLarge:var(--ds-lineHeight, 1.75);--ds-fontWidth-normal:100%;--ds-fontWidth-condense:90%;--ds-number-style:proportional-figures}@supports (font-variation-settings: normal){.sc-ds-versioned-css-variables:root,.sc-ds-versioned-css-variables-h{--ds-fontFamily-heading:\"Open Sans Variable\", sans-serif;--ds-fontFamily-body:\"Open Sans Variable\", sans-serif}}.sc-ds-versioned-css-variables-h{--ds-borderWidth-none:0px;--ds-borderWidth-hairline:1px;--ds-borderWidth-thin:2px;--ds-borderWidth-thick:4px;--ds-borderWidth-xThick:8px;--ds-borderRadius-none:0px;--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-smallPlus:45rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem;--ds-spacing-4xSmall:0.125rem;--ds-spacing-3xSmall:0.25rem;--ds-spacing-2xSmall:0.5rem;--ds-spacing-xSmall:0.75rem;--ds-spacing-small:1rem;--ds-spacing-medium:1.5rem;--ds-spacing-large:2rem;--ds-spacing-xLarge:2.5rem;--ds-spacing-2xLarge:3rem;--ds-spacing-3xLarge:3.5rem;--ds-spacing-4xLarge:4rem;--ds-spacing-5xLarge:4.5rem;--ds-spacing-layout-2xSmall:1rem;--ds-spacing-layout-xSmall:1.5rem;--ds-spacing-layout-small:2rem;--ds-spacing-layout-medium:3rem;--ds-spacing-layout-large:4rem;--ds-spacing-layout-xLarge:6rem;--ds-spacing-layout-2xLarge:8rem;--ds-overlay-black-00:rgb(0 0 0 / 0%);--ds-overlay-black-05:rgb(0 0 0 / 5%);--ds-overlay-black-10:rgb(0 0 0 / 10%);--ds-overlay-black-15:rgb(0 0 0 / 15%);--ds-overlay-black-30:rgb(0 0 0 / 30%);--ds-overlay-black-40:rgb(0 0 0 / 40%);--ds-overlay-black-50:rgb(0 0 0 / 50%);--ds-overlay-black-70:rgb(0 0 0 / 70%);--ds-overlay-black-80:rgb(0 0 0 / 80%);--ds-overlay-white-00:rgb(255 255 255 / 0%);--ds-overlay-white-05:rgb(255 255 255 / 5%);--ds-overlay-white-10:rgb(255 255 255 / 10%);--ds-overlay-white-15:rgb(255 255 255 / 15%);--ds-overlay-white-30:rgb(255 255 255 / 30%);--ds-overlay-white-40:rgb(255 255 255 / 40%);--ds-overlay-white-50:rgb(255 255 255 / 50%);--ds-overlay-white-70:rgb(255 255 255 / 70%);--ds-overlay-white-80:rgb(255 255 255 / 80%);--ds-palette-black:#000;--ds-palette-white:#fff;--ds-palette-black-03:#f7f7f7;--ds-palette-black-05:#f2f2f2;--ds-palette-black-10:#e6e6e6;--ds-palette-black-20:#ccc;--ds-palette-black-30:#b3b3b3;--ds-palette-black-40:#999;--ds-palette-black-50:#808080;--ds-palette-black-60:#666;--ds-palette-black-70:#4d4d4d;--ds-palette-black-80:#333;--ds-palette-black-90:#1a1a1a;--ds-palette-black-95:#0c0c0c;--ds-palette-blue-05:#e5f8ff;--ds-palette-blue-10:#c2eeff;--ds-palette-blue-20:#8adeff;--ds-palette-blue-30:#5cd1ff;--ds-palette-blue-40:#1abeff;--ds-palette-blue-50:#009ad6;--ds-palette-blue-60:#0084b8;--ds-palette-blue-70:#005b80;--ds-palette-blue-80:#053c52;--ds-palette-blue-90:#032330;--ds-palette-green-05:#dffbe1;--ds-palette-green-10:#bef4c1;--ds-palette-green-20:#85e08a;--ds-palette-green-30:#66cc6b;--ds-palette-green-40:#43b149;--ds-palette-green-50:#279b2d;--ds-palette-green-60:#257e29;--ds-palette-green-70:#216325;--ds-palette-green-80:#183f19;--ds-palette-green-90:#0f2410;--ds-palette-mainBlue-05:#e5f5ff;--ds-palette-mainBlue-10:#cdebff;--ds-palette-mainBlue-20:#99d7ff;--ds-palette-mainBlue-30:#70c7ff;--ds-palette-mainBlue-40:#3db3ff;--ds-palette-mainBlue-50:#009bff;--ds-palette-mainBlue-60:#007fd1;--ds-palette-mainBlue-70:#005a94;--ds-palette-mainBlue-80:#003152;--ds-palette-mainBlue-90:#001929;--ds-palette-red-05:#ffeceb;--ds-palette-red-10:#ffd8d6;--ds-palette-red-20:#fdb7b4;--ds-palette-red-30:#f87c77;--ds-palette-red-40:#f0514c;--ds-palette-red-50:#d71f19;--ds-palette-red-60:#bd2828;--ds-palette-red-70:#8b2623;--ds-palette-red-80:#602220;--ds-palette-red-90:#321c1b;--ds-palette-yellow-05:#fff1db;--ds-palette-yellow-10:#ffe7c2;--ds-palette-yellow-20:#ffd799;--ds-palette-yellow-30:#fbc05f;--ds-palette-yellow-40:#eea22b;--ds-palette-yellow-50:#ce8103;--ds-palette-yellow-60:#b26d00;--ds-palette-yellow-70:#7a4b00;--ds-palette-yellow-80:#4e3104;--ds-palette-yellow-90:#282115;--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-overlay-black-00);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-05);--ds-bgColor-white-active:var(--ds-palette-black-10);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-05);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-10);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-15);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-30);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-50);--ds-borderColor-attention:var(--ds-palette-yellow-50);--ds-iconColor-default:var(--ds-palette-black-95);--ds-iconColor-default-hover:var(--ds-palette-black-80);--ds-iconColor-default-active:var(--ds-palette-black-70);--ds-iconColor-neutral:var(--ds-palette-black-50);--ds-iconColor-neutral-hover:var(--ds-palette-black-60);--ds-iconColor-neutral-active:var(--ds-palette-black-70);--ds-iconColor-white:var(--ds-palette-white);--ds-iconColor-white-hover:var(--ds-palette-black-10);--ds-iconColor-white-active:var(--ds-palette-black-20);--ds-iconColor-primary:var(--ds-palette-mainBlue-70);--ds-iconColor-primary-active:var(--ds-palette-mainBlue-80);--ds-iconColor-primary-hover:var(--ds-palette-mainBlue-90);--ds-iconColor-info:var(--ds-palette-blue-60);--ds-iconColor-info-hover:var(--ds-palette-blue-70);--ds-iconColor-info-active:var(--ds-palette-blue-80);--ds-iconColor-danger:var(--ds-palette-red-50);--ds-iconColor-danger-hover:var(--ds-palette-red-60);--ds-iconColor-danger-active:var(--ds-palette-red-70);--ds-iconColor-success:var(--ds-palette-green-50);--ds-iconColor-success-hover:var(--ds-palette-green-60);--ds-iconColor-success-active:var(--ds-palette-green-70);--ds-iconColor-attention:var(--ds-palette-yellow-60);--ds-iconColor-attention-hover:var(--ds-palette-yellow-70);--ds-iconColor-attention-active:var(--ds-palette-yellow-80);--ds-fontFamily-heading:\"Open Sans\", sans-serif;--ds-fontFamily-body:\"Open Sans\", sans-serif;--ds-fontSize-12:12px;--ds-fontSize-14:14px;--ds-fontSize-16:16px;--ds-fontSize-18:18px;--ds-fontSize-20:20px;--ds-fontSize-22:22px;--ds-fontSize-24:24px;--ds-fontSize-26:26px;--ds-fontSize-30:30px;--ds-fontSize-32:32px;--ds-fontSize-36:36px;--ds-fontSize-40:40px;--ds-fontSize-48:48px;--ds-fontSize-56:56px;--ds-fontSize-64:64px;--ds-fontWeight-regular:400;--ds-fontWeight-semibold:600;--ds-fontWeight-semiboldPlus:650;--ds-fontWeight-bold:700;--ds-letterSpacing-xTight:var(--ds-letterSpacing, -2px);--ds-letterSpacing-tight:var(--ds-letterSpacing, -1.4px);--ds-letterSpacing-normal:var(--ds-letterSpacing, -0.4px);--ds-letterSpacing-wide:var(--ds-letterSpacing, 0px);--ds-letterSpacing-xWide:var(--ds-letterSpacing, 0.4px);--ds-lineHeight-small:var(--ds-lineHeight, 1);--ds-lineHeight-medium:var(--ds-lineHeight, 1.2);--ds-lineHeight-large:var(--ds-lineHeight, 1.5);--ds-lineHeight-xLarge:var(--ds-lineHeight, 1.75);--ds-fontWidth-normal:100%;--ds-fontWidth-condense:90%;--ds-number-style:proportional-figures;display:contents}@supports (font-variation-settings: normal){.sc-ds-versioned-css-variables-h{--ds-fontFamily-heading:\"Open Sans Variable\", sans-serif;--ds-fontFamily-body:\"Open Sans Variable\", sans-serif}}";
+const dsVersionedCssVariablesCss = ".sc-ds-versioned-css-variables:root,.sc-ds-versioned-css-variables-h{--ds-borderWidth-none:0px;--ds-borderWidth-hairline:1px;--ds-borderWidth-thin:2px;--ds-borderWidth-thick:4px;--ds-borderWidth-xThick:8px;--ds-borderRadius-none:0px;--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-smallPlus:45rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem;--ds-spacing-4xSmall:0.125rem;--ds-spacing-3xSmall:0.25rem;--ds-spacing-2xSmall:0.5rem;--ds-spacing-xSmall:0.75rem;--ds-spacing-small:1rem;--ds-spacing-medium:1.5rem;--ds-spacing-large:2rem;--ds-spacing-xLarge:2.5rem;--ds-spacing-2xLarge:3rem;--ds-spacing-3xLarge:3.5rem;--ds-spacing-4xLarge:4rem;--ds-spacing-5xLarge:4.5rem;--ds-spacing-layout-2xSmall:1rem;--ds-spacing-layout-xSmall:1.5rem;--ds-spacing-layout-small:2rem;--ds-spacing-layout-medium:3rem;--ds-spacing-layout-large:4rem;--ds-spacing-layout-xLarge:6rem;--ds-spacing-layout-2xLarge:8rem;--ds-overlay-black-00:rgb(0 0 0 / 0%);--ds-overlay-black-05:rgb(0 0 0 / 5%);--ds-overlay-black-10:rgb(0 0 0 / 10%);--ds-overlay-black-15:rgb(0 0 0 / 15%);--ds-overlay-black-30:rgb(0 0 0 / 30%);--ds-overlay-black-40:rgb(0 0 0 / 40%);--ds-overlay-black-50:rgb(0 0 0 / 50%);--ds-overlay-black-70:rgb(0 0 0 / 70%);--ds-overlay-black-80:rgb(0 0 0 / 80%);--ds-overlay-white-00:rgb(255 255 255 / 0%);--ds-overlay-white-05:rgb(255 255 255 / 5%);--ds-overlay-white-10:rgb(255 255 255 / 10%);--ds-overlay-white-15:rgb(255 255 255 / 15%);--ds-overlay-white-30:rgb(255 255 255 / 30%);--ds-overlay-white-40:rgb(255 255 255 / 40%);--ds-overlay-white-50:rgb(255 255 255 / 50%);--ds-overlay-white-70:rgb(255 255 255 / 70%);--ds-overlay-white-80:rgb(255 255 255 / 80%);--ds-palette-black:#000;--ds-palette-white:#fff;--ds-palette-black-03:#f7f7f7;--ds-palette-black-05:#f2f2f2;--ds-palette-black-10:#e6e6e6;--ds-palette-black-20:#ccc;--ds-palette-black-30:#b3b3b3;--ds-palette-black-40:#999;--ds-palette-black-50:#808080;--ds-palette-black-60:#666;--ds-palette-black-70:#4d4d4d;--ds-palette-black-80:#333;--ds-palette-black-90:#1a1a1a;--ds-palette-black-95:#0c0c0c;--ds-palette-blue-05:#e5f8ff;--ds-palette-blue-10:#c2eeff;--ds-palette-blue-20:#8adeff;--ds-palette-blue-30:#5cd1ff;--ds-palette-blue-40:#1abeff;--ds-palette-blue-50:#009ad6;--ds-palette-blue-60:#007cad;--ds-palette-blue-70:#005b80;--ds-palette-blue-80:#053c52;--ds-palette-blue-90:#032330;--ds-palette-green-05:#dffbe1;--ds-palette-green-10:#bef4c1;--ds-palette-green-20:#85e08a;--ds-palette-green-30:#66cc6b;--ds-palette-green-40:#43b149;--ds-palette-green-50:#279b2d;--ds-palette-green-60:#257e29;--ds-palette-green-70:#216325;--ds-palette-green-80:#183f19;--ds-palette-green-90:#0f2410;--ds-palette-mainBlue-05:#e5f5ff;--ds-palette-mainBlue-10:#cdebff;--ds-palette-mainBlue-20:#99d7ff;--ds-palette-mainBlue-30:#70c7ff;--ds-palette-mainBlue-40:#3db3ff;--ds-palette-mainBlue-50:#009bff;--ds-palette-mainBlue-60:#007fd1;--ds-palette-mainBlue-70:#005a94;--ds-palette-mainBlue-80:#003152;--ds-palette-mainBlue-90:#001929;--ds-palette-red-05:#ffeceb;--ds-palette-red-10:#ffd8d6;--ds-palette-red-20:#fdb7b4;--ds-palette-red-30:#f87c77;--ds-palette-red-40:#f0514c;--ds-palette-red-50:#e13d37;--ds-palette-red-60:#bd2828;--ds-palette-red-70:#8b2623;--ds-palette-red-80:#602220;--ds-palette-red-90:#321c1b;--ds-palette-yellow-05:#fff1db;--ds-palette-yellow-10:#ffe7c2;--ds-palette-yellow-20:#ffd799;--ds-palette-yellow-30:#fbc05f;--ds-palette-yellow-40:#eea22b;--ds-palette-yellow-50:#ce8103;--ds-palette-yellow-60:#b26d00;--ds-palette-yellow-70:#7a4b00;--ds-palette-yellow-80:#4e3104;--ds-palette-yellow-90:#282115;--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-overlay-black-00);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-05);--ds-bgColor-white-active:var(--ds-palette-black-10);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-05);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-10);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-15);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-30);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-bgColor-neutral-bold:var(--ds-palette-black-60);--ds-bgColor-neutral-bold-hover:var(--ds-palette-black-70);--ds-bgColor-neutral-bold-active:var(--ds-palette-black-80);--ds-bgColor-info-bold:var(--ds-palette-blue-60);--ds-bgColor-info-bold-hover:var(--ds-palette-blue-70);--ds-bgColor-info-bold-active:var(--ds-palette-blue-80);--ds-bgColor-attention-bold:var(--ds-palette-yellow-40);--ds-bgColor-attention-bold-hover:var(--ds-palette-yellow-50);--ds-bgColor-attention-bold-active:var(--ds-palette-yellow-60);--ds-bgColor-danger-bold:var(--ds-palette-red-60);--ds-bgColor-danger-bold-hover:var(--ds-palette-red-70);--ds-bgColor-danger-bold-active:var(--ds-palette-red-80);--ds-bgColor-success-bold:var(--ds-palette-green-60);--ds-bgColor-success-bold-hover:var(--ds-palette-green-70);--ds-bgColor-success-bold-active:var(--ds-palette-green-80);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-60);--ds-borderColor-success:var(--ds-palette-green-60);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-60);--ds-borderColor-attention:var(--ds-palette-yellow-60);--ds-iconColor-default:var(--ds-palette-black-95);--ds-iconColor-default-hover:var(--ds-palette-black-80);--ds-iconColor-default-active:var(--ds-palette-black-70);--ds-iconColor-neutral:var(--ds-palette-black-50);--ds-iconColor-neutral-hover:var(--ds-palette-black-60);--ds-iconColor-neutral-active:var(--ds-palette-black-70);--ds-iconColor-white:var(--ds-palette-white);--ds-iconColor-white-hover:var(--ds-palette-black-05);--ds-iconColor-white-active:var(--ds-palette-black-10);--ds-iconColor-primary:var(--ds-palette-mainBlue-70);--ds-iconColor-primary-active:var(--ds-palette-mainBlue-80);--ds-iconColor-primary-hover:var(--ds-palette-mainBlue-90);--ds-iconColor-info:var(--ds-palette-blue-60);--ds-iconColor-info-hover:var(--ds-palette-blue-70);--ds-iconColor-info-active:var(--ds-palette-blue-80);--ds-iconColor-danger:var(--ds-palette-red-60);--ds-iconColor-danger-hover:var(--ds-palette-red-70);--ds-iconColor-danger-active:var(--ds-palette-red-80);--ds-iconColor-success:var(--ds-palette-green-60);--ds-iconColor-success-hover:var(--ds-palette-green-70);--ds-iconColor-success-active:var(--ds-palette-green-80);--ds-iconColor-attention:var(--ds-palette-yellow-60);--ds-iconColor-attention-hover:var(--ds-palette-yellow-70);--ds-iconColor-attention-active:var(--ds-palette-yellow-80);--ds-fontFamily-heading:\"Open Sans\", sans-serif;--ds-fontFamily-body:\"Open Sans\", sans-serif;--ds-fontSize-12:12px;--ds-fontSize-14:14px;--ds-fontSize-16:16px;--ds-fontSize-18:18px;--ds-fontSize-20:20px;--ds-fontSize-22:22px;--ds-fontSize-24:24px;--ds-fontSize-26:26px;--ds-fontSize-30:30px;--ds-fontSize-32:32px;--ds-fontSize-36:36px;--ds-fontSize-40:40px;--ds-fontSize-48:48px;--ds-fontSize-56:56px;--ds-fontSize-64:64px;--ds-fontWeight-regular:400;--ds-fontWeight-semibold:600;--ds-fontWeight-semiboldPlus:650;--ds-fontWeight-bold:700;--ds-letterSpacing-xTight:var(--ds-letterSpacing, -2px);--ds-letterSpacing-tight:var(--ds-letterSpacing, -1.4px);--ds-letterSpacing-normal:var(--ds-letterSpacing, -0.4px);--ds-letterSpacing-wide:var(--ds-letterSpacing, 0px);--ds-letterSpacing-xWide:var(--ds-letterSpacing, 0.4px);--ds-lineHeight-small:var(--ds-lineHeight, 1);--ds-lineHeight-medium:var(--ds-lineHeight, 1.2);--ds-lineHeight-large:var(--ds-lineHeight, 1.5);--ds-lineHeight-xLarge:var(--ds-lineHeight, 1.75);--ds-fontWidth-normal:100%;--ds-fontWidth-condense:90%;--ds-number-style:proportional-figures}@supports (font-variation-settings: normal){.sc-ds-versioned-css-variables:root,.sc-ds-versioned-css-variables-h{--ds-fontFamily-heading:\"Open Sans Variable\", sans-serif;--ds-fontFamily-body:\"Open Sans Variable\", sans-serif}}.sc-ds-versioned-css-variables-h{--ds-borderWidth-none:0px;--ds-borderWidth-hairline:1px;--ds-borderWidth-thin:2px;--ds-borderWidth-thick:4px;--ds-borderWidth-xThick:8px;--ds-borderRadius-none:0px;--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-smallPlus:45rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem;--ds-spacing-4xSmall:0.125rem;--ds-spacing-3xSmall:0.25rem;--ds-spacing-2xSmall:0.5rem;--ds-spacing-xSmall:0.75rem;--ds-spacing-small:1rem;--ds-spacing-medium:1.5rem;--ds-spacing-large:2rem;--ds-spacing-xLarge:2.5rem;--ds-spacing-2xLarge:3rem;--ds-spacing-3xLarge:3.5rem;--ds-spacing-4xLarge:4rem;--ds-spacing-5xLarge:4.5rem;--ds-spacing-layout-2xSmall:1rem;--ds-spacing-layout-xSmall:1.5rem;--ds-spacing-layout-small:2rem;--ds-spacing-layout-medium:3rem;--ds-spacing-layout-large:4rem;--ds-spacing-layout-xLarge:6rem;--ds-spacing-layout-2xLarge:8rem;--ds-overlay-black-00:rgb(0 0 0 / 0%);--ds-overlay-black-05:rgb(0 0 0 / 5%);--ds-overlay-black-10:rgb(0 0 0 / 10%);--ds-overlay-black-15:rgb(0 0 0 / 15%);--ds-overlay-black-30:rgb(0 0 0 / 30%);--ds-overlay-black-40:rgb(0 0 0 / 40%);--ds-overlay-black-50:rgb(0 0 0 / 50%);--ds-overlay-black-70:rgb(0 0 0 / 70%);--ds-overlay-black-80:rgb(0 0 0 / 80%);--ds-overlay-white-00:rgb(255 255 255 / 0%);--ds-overlay-white-05:rgb(255 255 255 / 5%);--ds-overlay-white-10:rgb(255 255 255 / 10%);--ds-overlay-white-15:rgb(255 255 255 / 15%);--ds-overlay-white-30:rgb(255 255 255 / 30%);--ds-overlay-white-40:rgb(255 255 255 / 40%);--ds-overlay-white-50:rgb(255 255 255 / 50%);--ds-overlay-white-70:rgb(255 255 255 / 70%);--ds-overlay-white-80:rgb(255 255 255 / 80%);--ds-palette-black:#000;--ds-palette-white:#fff;--ds-palette-black-03:#f7f7f7;--ds-palette-black-05:#f2f2f2;--ds-palette-black-10:#e6e6e6;--ds-palette-black-20:#ccc;--ds-palette-black-30:#b3b3b3;--ds-palette-black-40:#999;--ds-palette-black-50:#808080;--ds-palette-black-60:#666;--ds-palette-black-70:#4d4d4d;--ds-palette-black-80:#333;--ds-palette-black-90:#1a1a1a;--ds-palette-black-95:#0c0c0c;--ds-palette-blue-05:#e5f8ff;--ds-palette-blue-10:#c2eeff;--ds-palette-blue-20:#8adeff;--ds-palette-blue-30:#5cd1ff;--ds-palette-blue-40:#1abeff;--ds-palette-blue-50:#009ad6;--ds-palette-blue-60:#007cad;--ds-palette-blue-70:#005b80;--ds-palette-blue-80:#053c52;--ds-palette-blue-90:#032330;--ds-palette-green-05:#dffbe1;--ds-palette-green-10:#bef4c1;--ds-palette-green-20:#85e08a;--ds-palette-green-30:#66cc6b;--ds-palette-green-40:#43b149;--ds-palette-green-50:#279b2d;--ds-palette-green-60:#257e29;--ds-palette-green-70:#216325;--ds-palette-green-80:#183f19;--ds-palette-green-90:#0f2410;--ds-palette-mainBlue-05:#e5f5ff;--ds-palette-mainBlue-10:#cdebff;--ds-palette-mainBlue-20:#99d7ff;--ds-palette-mainBlue-30:#70c7ff;--ds-palette-mainBlue-40:#3db3ff;--ds-palette-mainBlue-50:#009bff;--ds-palette-mainBlue-60:#007fd1;--ds-palette-mainBlue-70:#005a94;--ds-palette-mainBlue-80:#003152;--ds-palette-mainBlue-90:#001929;--ds-palette-red-05:#ffeceb;--ds-palette-red-10:#ffd8d6;--ds-palette-red-20:#fdb7b4;--ds-palette-red-30:#f87c77;--ds-palette-red-40:#f0514c;--ds-palette-red-50:#e13d37;--ds-palette-red-60:#bd2828;--ds-palette-red-70:#8b2623;--ds-palette-red-80:#602220;--ds-palette-red-90:#321c1b;--ds-palette-yellow-05:#fff1db;--ds-palette-yellow-10:#ffe7c2;--ds-palette-yellow-20:#ffd799;--ds-palette-yellow-30:#fbc05f;--ds-palette-yellow-40:#eea22b;--ds-palette-yellow-50:#ce8103;--ds-palette-yellow-60:#b26d00;--ds-palette-yellow-70:#7a4b00;--ds-palette-yellow-80:#4e3104;--ds-palette-yellow-90:#282115;--ds-textColor-default:var(--ds-palette-black-95);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-70);--ds-textColor-success:var(--ds-palette-green-70);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-textColor-link:var(--ds-palette-mainBlue-70);--ds-textColor-link-hover:var(--ds-palette-mainBlue-80);--ds-textColor-link-active:var(--ds-palette-mainBlue-90);--ds-textColor-link-visited:#551a8b;--ds-textColor-link-standalone:var(--ds-palette-black-70);--ds-textColor-link-standalone-hover:var(--ds-palette-black-80);--ds-textColor-link-standalone-active:var(--ds-palette-black-95);--ds-textColor-link-standalone-focus:var(--ds-palette-black-70);--ds-textColor-info:var(--ds-palette-blue-70);--ds-textColor-attention:var(--ds-palette-yellow-70);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-overlay-black-00);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-05);--ds-bgColor-white-active:var(--ds-palette-black-10);--ds-bgColor-black:var(--ds-palette-black-95);--ds-bgColor-black-hover:var(--ds-palette-black-80);--ds-bgColor-black-active:var(--ds-palette-black-70);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-05);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-10);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-15);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-30);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-bgColor-info:var(--ds-palette-blue-05);--ds-bgColor-info-hover:var(--ds-palette-blue-10);--ds-bgColor-info-active:var(--ds-palette-blue-20);--ds-bgColor-neutral:var(--ds-palette-black-05);--ds-bgColor-neutral-hover:var(--ds-palette-black-10);--ds-bgColor-neutral-active:var(--ds-palette-black-20);--ds-bgColor-neutralLight:var(--ds-palette-black-03);--ds-bgColor-neutralLight-hover:var(--ds-palette-black-05);--ds-bgColor-neutralLight-active:var(--ds-palette-black-10);--ds-bgColor-attention:var(--ds-palette-yellow-05);--ds-bgColor-attention-hover:var(--ds-palette-yellow-10);--ds-bgColor-attention-active:var(--ds-palette-yellow-20);--ds-bgColor-neutral-bold:var(--ds-palette-black-60);--ds-bgColor-neutral-bold-hover:var(--ds-palette-black-70);--ds-bgColor-neutral-bold-active:var(--ds-palette-black-80);--ds-bgColor-info-bold:var(--ds-palette-blue-60);--ds-bgColor-info-bold-hover:var(--ds-palette-blue-70);--ds-bgColor-info-bold-active:var(--ds-palette-blue-80);--ds-bgColor-attention-bold:var(--ds-palette-yellow-40);--ds-bgColor-attention-bold-hover:var(--ds-palette-yellow-50);--ds-bgColor-attention-bold-active:var(--ds-palette-yellow-60);--ds-bgColor-danger-bold:var(--ds-palette-red-60);--ds-bgColor-danger-bold-hover:var(--ds-palette-red-70);--ds-bgColor-danger-bold-active:var(--ds-palette-red-80);--ds-bgColor-success-bold:var(--ds-palette-green-60);--ds-bgColor-success-bold-hover:var(--ds-palette-green-70);--ds-bgColor-success-bold-active:var(--ds-palette-green-80);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black-95);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-60);--ds-borderColor-success:var(--ds-palette-green-60);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20);--ds-borderColor-info:var(--ds-palette-blue-60);--ds-borderColor-attention:var(--ds-palette-yellow-60);--ds-iconColor-default:var(--ds-palette-black-95);--ds-iconColor-default-hover:var(--ds-palette-black-80);--ds-iconColor-default-active:var(--ds-palette-black-70);--ds-iconColor-neutral:var(--ds-palette-black-50);--ds-iconColor-neutral-hover:var(--ds-palette-black-60);--ds-iconColor-neutral-active:var(--ds-palette-black-70);--ds-iconColor-white:var(--ds-palette-white);--ds-iconColor-white-hover:var(--ds-palette-black-05);--ds-iconColor-white-active:var(--ds-palette-black-10);--ds-iconColor-primary:var(--ds-palette-mainBlue-70);--ds-iconColor-primary-active:var(--ds-palette-mainBlue-80);--ds-iconColor-primary-hover:var(--ds-palette-mainBlue-90);--ds-iconColor-info:var(--ds-palette-blue-60);--ds-iconColor-info-hover:var(--ds-palette-blue-70);--ds-iconColor-info-active:var(--ds-palette-blue-80);--ds-iconColor-danger:var(--ds-palette-red-60);--ds-iconColor-danger-hover:var(--ds-palette-red-70);--ds-iconColor-danger-active:var(--ds-palette-red-80);--ds-iconColor-success:var(--ds-palette-green-60);--ds-iconColor-success-hover:var(--ds-palette-green-70);--ds-iconColor-success-active:var(--ds-palette-green-80);--ds-iconColor-attention:var(--ds-palette-yellow-60);--ds-iconColor-attention-hover:var(--ds-palette-yellow-70);--ds-iconColor-attention-active:var(--ds-palette-yellow-80);--ds-fontFamily-heading:\"Open Sans\", sans-serif;--ds-fontFamily-body:\"Open Sans\", sans-serif;--ds-fontSize-12:12px;--ds-fontSize-14:14px;--ds-fontSize-16:16px;--ds-fontSize-18:18px;--ds-fontSize-20:20px;--ds-fontSize-22:22px;--ds-fontSize-24:24px;--ds-fontSize-26:26px;--ds-fontSize-30:30px;--ds-fontSize-32:32px;--ds-fontSize-36:36px;--ds-fontSize-40:40px;--ds-fontSize-48:48px;--ds-fontSize-56:56px;--ds-fontSize-64:64px;--ds-fontWeight-regular:400;--ds-fontWeight-semibold:600;--ds-fontWeight-semiboldPlus:650;--ds-fontWeight-bold:700;--ds-letterSpacing-xTight:var(--ds-letterSpacing, -2px);--ds-letterSpacing-tight:var(--ds-letterSpacing, -1.4px);--ds-letterSpacing-normal:var(--ds-letterSpacing, -0.4px);--ds-letterSpacing-wide:var(--ds-letterSpacing, 0px);--ds-letterSpacing-xWide:var(--ds-letterSpacing, 0.4px);--ds-lineHeight-small:var(--ds-lineHeight, 1);--ds-lineHeight-medium:var(--ds-lineHeight, 1.2);--ds-lineHeight-large:var(--ds-lineHeight, 1.5);--ds-lineHeight-xLarge:var(--ds-lineHeight, 1.75);--ds-fontWidth-normal:100%;--ds-fontWidth-condense:90%;--ds-number-style:proportional-figures;display:contents}@supports (font-variation-settings: normal){.sc-ds-versioned-css-variables-h{--ds-fontFamily-heading:\"Open Sans Variable\", sans-serif;--ds-fontFamily-body:\"Open Sans Variable\", sans-serif}}";
 
 const DsVersionedCssVariables$1 = proxyCustomElement(class DsVersionedCssVariables extends H {
     constructor(registerHost) {
@@ -10,7 +10,7 @@ const DsVersionedCssVariables$1 = proxyCustomElement(class DsVersionedCssVariabl
         }
     }
     render() {
-        return (h(Host, { key: '4e427c854860f073703da46ca90cee89d56ad810' }, h("slot", { key: '2006ffe8bd945af2c2691bf3b55f34cd219ceb5c' })));
+        return (h(Host, { key: 'ddc3a7a54c35624a26f58882aacaf0c6b7a6cc1a' }, h("slot", { key: '53e35aaf7ed521c4b817b1bf7da3bc37121a6f5f' })));
     }
     static get style() { return dsVersionedCssVariablesCss; }
 }, [262, "ds-versioned-css-variables"]);

package/dist/components/ds-visually-hidden2.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h } from './index2.js';
 import { c as cx } from './cx.js';
 
-const dsVisuallyHiddenCss = ":host{position:absolute}.ds-visually-hidden__DFAX9n{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
+const dsVisuallyHiddenCss = ":host{position:absolute}.ds-visually-hidden__HTSRrd{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
 
 const DsVisuallyHidden = proxyCustomElement(class DsVisuallyHidden extends H {
     constructor(registerHost) {
@@ -14,7 +14,7 @@ const DsVisuallyHidden = proxyCustomElement(class DsVisuallyHidden extends H {
     dsTag = 'div';
     render() {
         const baseClass = cx('ds-visually-hidden');
-        return (h(this.dsTag, { key: 'a33a03602b2fa925a85018b580474864213b0447', class: baseClass }, h("slot", { key: 'd3c0185b5f0181925dbd65eec7df85b9bae9232e' })));
+        return (h(this.dsTag, { key: 'ff27e954569f4b987b13f02f64be333055d31015', class: baseClass }, h("slot", { key: '05ed432e72cbf6771343807b0fd2cb81c0087e59' })));
     }
     static get style() { return dsVisuallyHiddenCss; }
 }, [257, "ds-visually-hidden", {