npm - @uh-design-system/component-library - Versions diffs - 0.7.1 → 0.7.2-rc.0 - Mend

@uh-design-system/component-library 0.7.1 → 0.7.2-rc.0

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

Files changed (1472) hide show

package/dist/component-library/ds-text-input.entry.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{h as t,r as s,c as i,a as e,F as n}from"./index-CIXO9B7A.js";import{c as a}from"./index-BfTCfPZ1.js";import{g as d,a as r,v as o}from"./controlUtils-DQRQCahL.js";import{d as l,i as c,t as u}from"./utils-hnAo1pVs.js";import{b as p,i as h}from"./attributes-BD_lNRxn.js";import"./index--uGgWE-E.js";const b={search:"search"},x={search:({clearButtonVisible:t})=>t?"cancel_fill":"",password:({passwordInputVisible:t})=>t?"visibility_off_fill":"visibility_fill"},f=c("ds-input"),v=class{constructor(t){s(this,t),this.dsChange=i(this,"dsChange"),this.dsInput=i(this,"dsInput"),this.dsClear=i(this,"dsClear"),this.dsSubmitInvalid=i(this,"dsSubmitInvalid"),this.dsValidity=i(this,"dsValidity")}inheritedAttributes={};suffixButtonElement;inputElement;assistiveTextId;visuallyHiddenAssistiveTextId;errorTextId;successTextId;hasPrefixSlot=!1;hasSuffixSlot=!1;get el(){return e(this)}dsChange;dsInput;dsClear;dsSubmitInvalid;dsValidity;dsLabel;dsPlaceholder;dsId=f.next().value;dsName=this.dsId;dsDisabled;dsOptional;dsRequired;dsReadonly;dsValue;dsMin;dsMax;dsMaxLength;dsPattern;dsAutocomplete;dsOptionalText;dsErrorText;dsSuccessText;dsAssistiveText;dsActionButtonAriaLabel;dsHiddenAssistiveText;dsPrefixText;dsSuffixText;dsIcon="";dsType="text";dsAriaLabel;dsAriaLabelledby;dsAriaDescribedby;hasFocus=!1;clearButtonVisible=!1;passwordInputVisible=!1;inputActive=!1;wasInvalidOnBlur=!1;setIds=()=>{this.assistiveTextId=`${this.dsId}-assistive-text`,this.visuallyHiddenAssistiveTextId=`${this.dsId}-visually-hidden-assistive-text`,this.errorTextId=`${this.dsId}-error-text`,this.successTextId=`${this.dsId}-success-text`};async togglePasswordVisibility(){return this.passwordInputVisible=!this.passwordInputVisible}async clearInput(t){this.dsValue="",this.inputElement.focus(),this.clearButtonVisible=!1,this.dsClear.emit({event:t,value:this.dsValue})}async dsFocus(){this.inputElement.focus()}async dsCheckValidity(){return this.inputElement?.checkValidity()}valueObserver(t){this.dsChange.emit({value:t})}getLabelText=()=>this.dsRequired?d(this.dsLabel):this.dsOptional?r(this.dsLabel,this.dsOptionalText):this.dsLabel;componentWillLoad(){this.inheritedAttributes={...h(this,this.el,["id"]),...p(this.el,["aria-label","aria-labelledby","aria-describedby","aria-invalid"])},this.setIds(),this.hasPrefixSlot=!!this.el.querySelector('[slot="prefix"]'),this.hasSuffixSlot=!!this.el.querySelector('[slot="suffix"]'),this.clearButtonVisible="search"===this.dsType&&!!this.dsValue}formResetCallback(){this.dsErrorText=""}handleInvalid=t=>{t.preventDefault();const s=this.inputElement?.validity;for(const t in s)if(s[t]){this.dsSubmitInvalid.emit({flag:t,message:o(t,{type:this.dsType})});break}};handleInput=t=>{const s=t.target;if(this.dsValue=s.value,this.clearButtonVisible=!!s.value,this.dsInput.emit({event:t,value:this.dsValue}),this.dsErrorText\|\|this.wasInvalidOnBlur){const t=this.inputElement?.validity;for(const s in t)if(t[s]){this.dsValidity.emit({flag:s,message:o(s,{type:this.dsType})});break}}};handleFocus=()=>{this.hasFocus=!0};handleBlur=()=>{this.hasFocus=!1;const t=this.inputElement?.validity;for(const s in t)if(t[s]){this.wasInvalidOnBlur="valid"!==s,this.dsValidity.emit({flag:s,message:o(s,{type:this.dsType})});break}};onActionButtonClicked=t=>{switch(t.stopPropagation(),this.dsType){case"password":return this.togglePasswordVisibility();case"search":return void this.clearInput(t);default:return}};renderPrefixContent(){if(this.hasPrefixSlot)return t("slot",{name:"prefix"});if(this.dsPrefixText)return t("slot",{name:"prefix"},t("span",{class:"prefix"},this.dsPrefixText));const s=this.dsIcon\|\|b[this.dsType],i=u("ds-icon","ds-text-input",this.el);return s?t("slot",{name:"prefix"},t(i,{class:"ds-text-input__icon",dsName:s})):null}renderSuffixContent(){if(this.hasSuffixSlot)return t("slot",{name:"suffix"});if(this.dsSuffixText)return t("slot",{name:"suffix"},t("span",{class:"suffix"},this.dsSuffixText));const s=x[this.dsType]?.(this)??"",i="password"===this.dsType?this.passwordInputVisible:void 0,e=u("ds-button","ds-text-input",this.el);return s?t("slot",{name:"suffix"},t(e,{ref:t=>this.suffixButtonElement=t,dsVariant:"supplementary",dsColour:"black",class:"ds-text-input__button",dsDisabled:!1,dsIcon:s,onClick:this.onActionButtonClicked,"aria-pressed":i,"aria-label":this.dsActionButtonAriaLabel})):null}handleInputContainerClick(t){t.target!==this.suffixButtonElement&&this.inputElement.focus()}render(){const s="password"===this.dsType&&this.passwordInputVisible?"text":this.dsType,i=u("ds-visually-hidden","ds-text-input",this.el),e=u("ds-input-validity","ds-text-input",this.el);return t(n,{key:"d5fbe44bbbff42b75a215b87a69d8574a2911018"},t("div",{key:"94c0dd7e71ede20e760796deb76edde382a0f10b",class:"ds-input__label-container"},t("slot",{key:"e86e263cd9af65e1fa3b86c237a5ef39d4f20e7f",name:"label"},t("label",{key:"3936b750b6f318a1b7344c4cc3ebcb852fc51066",htmlFor:this.dsId},this.getLabelText())),t("slot",{key:"d2da2e30b78a34a45b8b7f46966ab972e4e0b025",name:"assistiveText"},t("small",{key:"d52b4154dd59e8f27e6cc825cbe62c1d8f0f3319",id:this.assistiveTextId},this.dsAssistiveText),t(i,{key:"fea45e29a5e2d61946cc623688ddd02f842d5dff",id:this.visuallyHiddenAssistiveTextId,"ds-tag":"span"},this.dsHiddenAssistiveText))),t("div",{key:"5ee839a7c0e09ba29f0d188504f31c93fe95b993",onMouseDown:()=>this.inputActive=!0,onMouseUp:()=>this.inputActive=!1,onClick:t=>this.handleInputContainerClick(t),class:a("ds-input__container",{disabled:this.dsDisabled,readonly:this.dsReadonly,valid:!!this.dsSuccessText,invalid:!!this.dsErrorText,focus:this.hasFocus,active:!!this.inputActive})},this.renderPrefixContent(),t("input",{key:"a9bf53d9a819db9cad6c80535abb3b101d3e36ed",ref:t=>this.inputElement=t,id:this.dsId,name:this.dsName,"aria-label":this.dsAriaLabel,"aria-labelledby":this.dsAriaLabelledby,"aria-describedby":this.dsAriaDescribedby\|\|a({[this.assistiveTextId]:!!this.dsAssistiveText,[this.visuallyHiddenAssistiveTextId]:!!this.dsHiddenAssistiveText,[this.errorTextId]:!!this.dsErrorText,[this.successTextId]:!!this.dsSuccessText}),"aria-invalid":this.dsErrorText?"true":"false",disabled:this.dsDisabled,required:this.dsRequired,readonly:this.dsReadonly,value:this.dsValue,type:s,min:this.dsMin,max:this.dsMax,maxlength:this.dsMaxLength,pattern:this.dsPattern,placeholder:this.dsPlaceholder,autocomplete:this.dsAutocomplete,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur,onInvalid:this.handleInvalid,...this.inheritedAttributes}),this.renderSuffixContent()),t("slot",{key:"1ad212e77fa8fd66c414860bf767054322a3f3bf",name:"validity"},t(e,{key:"980a25cc784a37a0ba5f32e029f744a94db8502f",id:this.errorTextId,dsText:this.dsErrorText,dsType:"error",dsValidityRole:"alert"}),t(e,{key:"0a006fdb9962543ecb77790a56655669e251e7e1",id:this.successTextId,dsText:this.dsSuccessText,dsType:"success",dsValidityRole:"status"})))}static get formAssociated(){return!0}static get watchers(){return{dsValue:["valueObserver"]}}};l([t("ds-icon",null),t("ds-button",null),t("ds-visually-hidden",null),t("ds-input-validity",null)]),v.style=".sc-ds-text-input:root,.sc-ds-text-input-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.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-input__label-container.sc-ds-text-input{margin-block-end:var(--ds-spacing-2xSmall)}.ds-input__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-palette-black-95)}.ds-input__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-palette-black-70)}.ds-input__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;border-color:var(--ds-palette-black-50);padding-inline:var(--ds-spacing-xSmall)}.ds-input__container.sc-ds-text-input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-input__container.sc-ds-text-input:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-input__container.invalid.sc-ds-text-input{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}.ds-input__container.invalid.sc-ds-text-input:hover:not(.ds-input__container.invalid:focus-within){background-color:var(--ds-palette-red-10);border-color:var(--ds-palette-red-50)}.ds-input__container.invalid.active.sc-ds-text-input{background-color:var(--ds-palette-red-20);border-color:var(--ds-palette-red-50)}.ds-input__container.valid.sc-ds-text-input{background-color:var(--ds-palette-green-05);border-color:var(--ds-palette-green-50)}.ds-input__container.valid.sc-ds-text-input:hover:not(.ds-input__container.valid:focus-within){background-color:var(--ds-palette-green-10);border-color:var(--ds-palette-green-50)}.ds-input__container.valid.active.sc-ds-text-input{background-color:var(--ds-palette-green-20);border-color:var(--ds-palette-green-50)}.ds-input__container.readonly.sc-ds-text-input,.ds-input__container.disabled.sc-ds-text-input{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15)}.ds-input__container.sc-ds-text-input:has(span.prefix,.ds-text-input__icon).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input__container.sc-ds-text-input:has(.ds-text-input__button){padding-inline-end:unset}.ds-input__container.sc-ds-text-input:has(input:active){outline:none}.ds-input__container.sc-ds-text-input:has(input:active):not:has(input:disabled,input.sc-ds-text-input:read-only){border-color:var(--ds-palette-black-50)}.ds-input__container.active.sc-ds-text-input:not(.ds-input__container.disabled,.ds-input__container.readonly.sc-ds-text-input,.ds-input__container.invalid.sc-ds-text-input,.ds-input__container.valid).sc-ds-text-input{border-color:var(--ds-palette-black-50);background-color:var(--ds-palette-black-20)}.ds-input__container.sc-ds-text-input:hover:not(.ds-input__container.disabled,.ds-input__container.readonly.sc-ds-text-input,.ds-input__container.active.sc-ds-text-input,.ds-input__container.invalid.sc-ds-text-input,.ds-input__container.valid.sc-ds-text-input,.ds-input__container.sc-ds-text-input:focus-within){border-color:var(--ds-palette-black-50);background-color:var(--ds-palette-black-10)}.ds-input__container.sc-ds-text-input:focus-within:not(.ds-input__container:focus-within.invalid,.ds-input__container.sc-ds-text-input:focus-within.valid,.ds-input__container.sc-ds-text-input:focus-within.readonly){border-color:var(--ds-palette-mainBlue-70)}.ds-input__container.sc-ds-text-input:focus-within .sc-ds-text-input>.ds-text-input__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-overlay-black-10)}.ds-input__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-palette-black-95);border:none;padding-block:var(--ds-spacing-4xSmall)}.ds-input__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-palette-black-70)}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-palette-black-40)}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-palette-black-40)}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input:focus{outline:none;border:none}.ds-input__container.sc-ds-text-input>input[type=number].sc-ds-text-input{appearance:textfield}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-decoration,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-cancel-button,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-button,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-decoration,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-inner-spin-button,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-outer-spin-button{appearance:none;margin:0}.ds-input__container.sc-ds-text-input:has(span.prefix,.ds-text-input__icon).sc-ds-text-input>input.sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input__container.sc-ds-text-input span.prefix.sc-ds-text-input,.ds-input__container.sc-ds-text-input span.suffix.sc-ds-text-input{color:var(--ds-palette-black-70)}.ds-input__container.sc-ds-text-input .ds-text-input__icon.sc-ds-text-input,.ds-input__container.sc-ds-text-input-s>[slot=prefix],.ds-input__container .sc-ds-text-input-s>[slot=prefix]{height:1.5rem;color:var(--ds-palette-black-95)}.ds-input__container.sc-ds-text-input .ds-text-input__button.sc-ds-text-input{margin-top:calc(var(--ds-spacing-3xSmall) -1);margin-right:calc(var(--ds-spacing-4xSmall) * -1);max-height:40px}";export{v as ds_text_input}
1	+ import{h as t,r as s,c as i,a as e,F as n}from"./index-CIXO9B7A.js";import{c as a}from"./index-BfTCfPZ1.js";import{g as d,a as r,v as o}from"./controlUtils-u8PbNIET.js";import{d as l,i as c,t as u}from"./utils-hnAo1pVs.js";import{b as p,i as h}from"./attributes-BD_lNRxn.js";import"./index--uGgWE-E.js";const b={search:"search"},x={search:({clearButtonVisible:t})=>t?"cancel_fill":"",password:({passwordInputVisible:t})=>t?"visibility_off_fill":"visibility_fill"},f=c("ds-input"),v=class{constructor(t){s(this,t),this.dsChange=i(this,"dsChange"),this.dsInput=i(this,"dsInput"),this.dsClear=i(this,"dsClear"),this.dsSubmitInvalid=i(this,"dsSubmitInvalid"),this.dsValidity=i(this,"dsValidity")}inheritedAttributes={};suffixButtonElement;inputElement;assistiveTextId;visuallyHiddenAssistiveTextId;errorTextId;successTextId;hasPrefixSlot=!1;hasSuffixSlot=!1;get el(){return e(this)}dsChange;dsInput;dsClear;dsSubmitInvalid;dsValidity;dsLabel;dsPlaceholder;dsId=f.next().value;dsName=this.dsId;dsDisabled;dsOptional;dsRequired;dsReadonly;dsValue;dsMin;dsMax;dsMaxLength;dsPattern;dsAutocomplete;dsOptionalText;dsErrorText;dsSuccessText;dsAssistiveText;dsActionButtonAriaLabel;dsHiddenAssistiveText;dsPrefixText;dsSuffixText;dsIcon="";dsType="text";dsAriaLabel;dsAriaLabelledby;dsAriaDescribedby;hasFocus=!1;clearButtonVisible=!1;passwordInputVisible=!1;inputActive=!1;wasInvalidOnBlur=!1;setIds=()=>{this.assistiveTextId=`${this.dsId}-assistive-text`,this.visuallyHiddenAssistiveTextId=`${this.dsId}-visually-hidden-assistive-text`,this.errorTextId=`${this.dsId}-error-text`,this.successTextId=`${this.dsId}-success-text`};async togglePasswordVisibility(){return this.passwordInputVisible=!this.passwordInputVisible}async clearInput(t){this.dsValue="",this.inputElement.focus(),this.clearButtonVisible=!1,this.dsClear.emit({event:t,value:this.dsValue})}async dsFocus(){this.inputElement.focus()}async dsCheckValidity(){return this.inputElement?.checkValidity()}valueObserver(t){this.dsChange.emit({value:t})}getLabelText=()=>this.dsRequired?d(this.dsLabel):this.dsOptional?r(this.dsLabel,this.dsOptionalText):this.dsLabel;componentWillLoad(){this.inheritedAttributes={...h(this,this.el,["id"]),...p(this.el,["aria-label","aria-labelledby","aria-describedby","aria-invalid"])},this.setIds(),this.hasPrefixSlot=!!this.el.querySelector('[slot="prefix"]'),this.hasSuffixSlot=!!this.el.querySelector('[slot="suffix"]'),this.clearButtonVisible="search"===this.dsType&&!!this.dsValue}formResetCallback(){this.dsErrorText=""}handleInvalid=t=>{t.preventDefault();const s=this.inputElement?.validity;for(const t in s)if(s[t]){this.dsSubmitInvalid.emit({flag:t,message:o(t,{type:this.dsType})});break}};handleInput=t=>{const s=t.target;if(this.dsValue=s.value,this.clearButtonVisible=!!s.value,this.dsInput.emit({event:t,value:this.dsValue}),this.dsErrorText\|\|this.wasInvalidOnBlur){const t=this.inputElement?.validity;for(const s in t)if(t[s]){this.dsValidity.emit({flag:s,message:o(s,{type:this.dsType})});break}}};handleFocus=()=>{this.hasFocus=!0};handleBlur=()=>{this.hasFocus=!1;const t=this.inputElement?.validity;for(const s in t)if(t[s]){this.wasInvalidOnBlur="valid"!==s,this.dsValidity.emit({flag:s,message:o(s,{type:this.dsType})});break}};onActionButtonClicked=t=>{switch(t.stopPropagation(),this.dsType){case"password":return this.togglePasswordVisibility();case"search":return void this.clearInput(t);default:return}};renderPrefixContent(){if(this.hasPrefixSlot)return t("slot",{name:"prefix"});if(this.dsPrefixText)return t("slot",{name:"prefix"},t("span",{class:"prefix"},this.dsPrefixText));const s=this.dsIcon\|\|b[this.dsType],i=u("ds-icon","ds-text-input",this.el);return s?t("slot",{name:"prefix"},t(i,{class:"ds-text-input__icon",dsName:s})):null}renderSuffixContent(){if(this.hasSuffixSlot)return t("slot",{name:"suffix"});if(this.dsSuffixText)return t("slot",{name:"suffix"},t("span",{class:"suffix"},this.dsSuffixText));const s=x[this.dsType]?.(this)??"",i="password"===this.dsType?this.passwordInputVisible:void 0,e=u("ds-button","ds-text-input",this.el);return s?t("slot",{name:"suffix"},t(e,{ref:t=>this.suffixButtonElement=t,dsVariant:"supplementary",dsColour:"black",class:"ds-text-input__button",dsDisabled:!1,dsIcon:s,onClick:this.onActionButtonClicked,"aria-pressed":i,"aria-label":this.dsActionButtonAriaLabel})):null}handleInputContainerClick(t){t.target!==this.suffixButtonElement&&this.inputElement.focus()}render(){const s="password"===this.dsType&&this.passwordInputVisible?"text":this.dsType,i=u("ds-visually-hidden","ds-text-input",this.el),e=u("ds-input-validity","ds-text-input",this.el);return t(n,{key:"d5fbe44bbbff42b75a215b87a69d8574a2911018"},t("div",{key:"94c0dd7e71ede20e760796deb76edde382a0f10b",class:"ds-input__label-container"},t("slot",{key:"e86e263cd9af65e1fa3b86c237a5ef39d4f20e7f",name:"label"},t("label",{key:"3936b750b6f318a1b7344c4cc3ebcb852fc51066",htmlFor:this.dsId},this.getLabelText())),t("slot",{key:"d2da2e30b78a34a45b8b7f46966ab972e4e0b025",name:"assistiveText"},t("small",{key:"d52b4154dd59e8f27e6cc825cbe62c1d8f0f3319",id:this.assistiveTextId},this.dsAssistiveText),t(i,{key:"fea45e29a5e2d61946cc623688ddd02f842d5dff",id:this.visuallyHiddenAssistiveTextId,"ds-tag":"span"},this.dsHiddenAssistiveText))),t("div",{key:"5ee839a7c0e09ba29f0d188504f31c93fe95b993",onMouseDown:()=>this.inputActive=!0,onMouseUp:()=>this.inputActive=!1,onClick:t=>this.handleInputContainerClick(t),class:a("ds-input__container",{disabled:this.dsDisabled,readonly:this.dsReadonly,valid:!!this.dsSuccessText,invalid:!!this.dsErrorText,focus:this.hasFocus,active:!!this.inputActive})},this.renderPrefixContent(),t("input",{key:"a9bf53d9a819db9cad6c80535abb3b101d3e36ed",ref:t=>this.inputElement=t,id:this.dsId,name:this.dsName,"aria-label":this.dsAriaLabel,"aria-labelledby":this.dsAriaLabelledby,"aria-describedby":this.dsAriaDescribedby\|\|a({[this.assistiveTextId]:!!this.dsAssistiveText,[this.visuallyHiddenAssistiveTextId]:!!this.dsHiddenAssistiveText,[this.errorTextId]:!!this.dsErrorText,[this.successTextId]:!!this.dsSuccessText}),"aria-invalid":this.dsErrorText?"true":"false",disabled:this.dsDisabled,required:this.dsRequired,readonly:this.dsReadonly,value:this.dsValue,type:s,min:this.dsMin,max:this.dsMax,maxlength:this.dsMaxLength,pattern:this.dsPattern,placeholder:this.dsPlaceholder,autocomplete:this.dsAutocomplete,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur,onInvalid:this.handleInvalid,...this.inheritedAttributes}),this.renderSuffixContent()),t("slot",{key:"1ad212e77fa8fd66c414860bf767054322a3f3bf",name:"validity"},t(e,{key:"980a25cc784a37a0ba5f32e029f744a94db8502f",id:this.errorTextId,dsText:this.dsErrorText,dsType:"error",dsValidityRole:"alert"}),t(e,{key:"0a006fdb9962543ecb77790a56655669e251e7e1",id:this.successTextId,dsText:this.dsSuccessText,dsType:"success",dsValidityRole:"status"})))}static get formAssociated(){return!0}static get watchers(){return{dsValue:["valueObserver"]}}};l([t("ds-icon",null),t("ds-button",null),t("ds-visually-hidden",null),t("ds-input-validity",null)]),v.style=".sc-ds-text-input:root,.sc-ds-text-input-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.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-input__label-container.sc-ds-text-input{margin-block-end:var(--ds-spacing-2xSmall)}.ds-input__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-palette-black-95)}.ds-input__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-palette-black-70)}.ds-input__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;border-color:var(--ds-palette-black-50);padding-inline:var(--ds-spacing-xSmall)}.ds-input__container.sc-ds-text-input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-input__container.sc-ds-text-input:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-input__container.invalid.sc-ds-text-input{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}.ds-input__container.invalid.sc-ds-text-input:hover:not(.ds-input__container.invalid:focus-within){background-color:var(--ds-palette-red-10);border-color:var(--ds-palette-red-50)}.ds-input__container.invalid.active.sc-ds-text-input{background-color:var(--ds-palette-red-20);border-color:var(--ds-palette-red-50)}.ds-input__container.valid.sc-ds-text-input{background-color:var(--ds-palette-green-05);border-color:var(--ds-palette-green-50)}.ds-input__container.valid.sc-ds-text-input:hover:not(.ds-input__container.valid:focus-within){background-color:var(--ds-palette-green-10);border-color:var(--ds-palette-green-50)}.ds-input__container.valid.active.sc-ds-text-input{background-color:var(--ds-palette-green-20);border-color:var(--ds-palette-green-50)}.ds-input__container.readonly.sc-ds-text-input,.ds-input__container.disabled.sc-ds-text-input{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15)}.ds-input__container.sc-ds-text-input:has(span.prefix,.ds-text-input__icon).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input__container.sc-ds-text-input:has(.ds-text-input__button){padding-inline-end:unset}.ds-input__container.sc-ds-text-input:has(input:active){outline:none}.ds-input__container.sc-ds-text-input:has(input:active):not:has(input:disabled,input.sc-ds-text-input:read-only){border-color:var(--ds-palette-black-50)}.ds-input__container.active.sc-ds-text-input:not(.ds-input__container.disabled,.ds-input__container.readonly.sc-ds-text-input,.ds-input__container.invalid.sc-ds-text-input,.ds-input__container.valid).sc-ds-text-input{border-color:var(--ds-palette-black-50);background-color:var(--ds-palette-black-20)}.ds-input__container.sc-ds-text-input:hover:not(.ds-input__container.disabled,.ds-input__container.readonly.sc-ds-text-input,.ds-input__container.active.sc-ds-text-input,.ds-input__container.invalid.sc-ds-text-input,.ds-input__container.valid.sc-ds-text-input,.ds-input__container.sc-ds-text-input:focus-within){border-color:var(--ds-palette-black-50);background-color:var(--ds-palette-black-10)}.ds-input__container.sc-ds-text-input:focus-within:not(.ds-input__container:focus-within.invalid,.ds-input__container.sc-ds-text-input:focus-within.valid,.ds-input__container.sc-ds-text-input:focus-within.readonly){border-color:var(--ds-palette-mainBlue-70)}.ds-input__container.sc-ds-text-input:focus-within .sc-ds-text-input>.ds-text-input__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-overlay-black-10)}.ds-input__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-palette-black-95);border:none;padding-block:var(--ds-spacing-4xSmall)}.ds-input__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-palette-black-70)}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-palette-black-40)}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-palette-black-40)}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input:focus{outline:none;border:none}.ds-input__container.sc-ds-text-input>input[type=number].sc-ds-text-input{appearance:textfield}.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-decoration,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-cancel-button,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-button,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-decoration,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-inner-spin-button,.ds-input__container.sc-ds-text-input>input.sc-ds-text-input::-webkit-outer-spin-button{appearance:none;margin:0}.ds-input__container.sc-ds-text-input:has(span.prefix,.ds-text-input__icon).sc-ds-text-input>input.sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input__container.sc-ds-text-input span.prefix.sc-ds-text-input,.ds-input__container.sc-ds-text-input span.suffix.sc-ds-text-input{color:var(--ds-palette-black-70)}.ds-input__container.sc-ds-text-input .ds-text-input__icon.sc-ds-text-input,.ds-input__container.sc-ds-text-input-s>[slot=prefix],.ds-input__container .sc-ds-text-input-s>[slot=prefix]{height:1.5rem;color:var(--ds-palette-black-95)}.ds-input__container.sc-ds-text-input .ds-text-input__button.sc-ds-text-input{margin-top:calc(var(--ds-spacing-3xSmall) -1);margin-right:calc(var(--ds-spacing-4xSmall) * -1);max-height:40px}";export{v as ds_text_input}

package/dist/component-library/ds-visually-hidden.entry.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{r as e,h as s}from"./index-CIXO9B7A.js";const i=class{constructor(s){e(this,s)}dsTag="div";render(){return s(this.dsTag,{key:"~~4294edab8fcf553ad50c2e0f268df30e9338382f~~",class:"ds-visually-hidden"},s("slot",{key:"~~33181a1b5924f4e58b71a1795ebcc42e72b66971~~"}))}};i.style=".ds-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";export{i as ds_visually_hidden}
1	+ import{r as e,h as d}from"./index-CIXO9B7A.js";const s=class{constructor(d){e(this,d)}dsTag="div";render(){return d(this.dsTag,{key:"12110ddea5e3ca5632d213e91c86adff4f9b279f",class:"ds-visually-hidden"},d("slot",{key:"6e1f3a1cc4327d4b0b67b1104926e51ed21d505e"}))}};s.style=".ds-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";export{s as ds_visually_hidden}

package/dist/components/controlUtils.js CHANGED Viewed

@@ -173,15 +173,90 @@ const allOptions = () => {
             return 'Select all options.';
     }
 };
-const removeSelection = () => {
+const removeSelection = (capitalizeFirstLetter = false) => {
+    let text = '';
     switch (getLanguage()) {
         case 'fi':
-            return 'poista valinta';
+            text = 'poista valinta';
+            break;
+        case 'sv':
+            text = 'ta bort val';
+            break;
+        default:
+            text = 'remove selection';
+            break;
+    }
+    return capitalizeFirstLetter ? text[0].toUpperCase() + text.substring(1) : text;
+};
+const weCouldNotLoadOptions = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Emme voineet ladata vaihtoehtoja.';
+        case 'sv':
+            return 'Vi kunde inte ladda alternativen.';
+        default:
+            return 'We could not load options.';
+    }
+};
+const tryAgainOrIfTheProblemPersists = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Yritä uudelleen tai jos ongelma jatkuu, ota yhteyttä ylläpitoon.';
+        case 'sv':
+            return 'Försök igen eller om problemet kvarstår, kontakta supporten.';
+        default:
+            return 'Try again or if the problem persists, contact support.';
+    }
+};
+const loadingOptions = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Ladataan vaihtoehtoja...';
+        case 'sv':
+            return 'Laddar alternativ...';
+        default:
+            return 'Loading options...';
+    }
+};
+const searchOrSelectAnOption = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Kirjoita tai valitse...';
+        case 'sv':
+            return 'Sök eller välj...';
+        default:
+            return 'Search or select...';
+    }
+};
+const noResultsFound = (searchTerm) => {
+    switch (getLanguage()) {
+        case 'fi':
+            return searchTerm ? `Ei tuloksia haulle "${searchTerm}".` : `Ei tuloksia.`;
+        case 'sv':
+            return searchTerm ? `Inga resultat för sökningen "${searchTerm}".` : `Inga resultat.`;
+        default:
+            return searchTerm ? `No results found for "${searchTerm}".` : `No results found.`;
+    }
+};
+const tryADifferentSearchTerm = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Kokeile toista hakusanaa.';
+        case 'sv':
+            return 'Prova ett annat sökord.';
+        default:
+            return 'Try a different search term.';
+    }
+};
+const thereAreOptionsToBrowse = () => {
+    switch (getLanguage()) {
+        case 'fi':
+            return 'Vaihtoehtoja on selattavissa.';
         case 'sv':
-            return 'ta bort val';
+            return 'Det finns alternativ att bläddra i.';
         default:
-            return 'remove selection';
+            return 'There are options to browse.';
     }
 };
-export { getOptionalText as a, atLeastOneOption as b, allOptions as c, getRequiredText as g, removeSelection as r, validityMessage as v };
+export { getOptionalText as a, tryADifferentSearchTerm as b, thereAreOptionsToBrowse as c, atLeastOneOption as d, allOptions as e, getRequiredText as g, loadingOptions as l, noResultsFound as n, removeSelection as r, searchOrSelectAnOption as s, tryAgainOrIfTheProblemPersists as t, validityMessage as v, weCouldNotLoadOptions as w };

package/dist/components/ds-checkbox-group.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from '
 import { c as classNames } from './index3.js';
 import { a as inheritAriaAttributes } from './attributes.js';
 import { i as idGenerator, t as transformTagName, d as declareComponentDependencies } from './utils.js';
-import { g as getRequiredText, a as getOptionalText, b as atLeastOneOption, c as allOptions } from './controlUtils.js';
+import { g as getRequiredText, a as getOptionalText, d as atLeastOneOption, e as allOptions } from './controlUtils.js';
 import { d as defineCustomElement$4 } from './ds-checkbox2.js';
 import { d as defineCustomElement$3 } from './ds-icon2.js';
 import { d as defineCustomElement$2 } from './ds-input-validity2.js';

package/dist/components/ds-chip-group.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index2.js';
 import { i as idGenerator } from './utils.js';
-const dsChipGroupCss = ".ds-chip-group__label{padding-inline:0;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-chip-group__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.ds-chip-group__chips{display:inline-flex;flex-direction:row;flex-wrap: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 dsChipGroupCss = ".ds-chip-group__label{padding-inline:0;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-palette-black-95)}.ds-chip-group__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.ds-chip-group__chips{display:inline-flex;flex-direction:row;flex-wrap: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 chipGroupIdGenerator = idGenerator('ds-chip-group');
 const DsChipGroup$1 = proxyCustomElement(class DsChipGroup extends H {

package/dist/components/ds-combobox.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface DsCombobox extends Components.DsCombobox, HTMLElement {}
+export const DsCombobox: {
+    prototype: DsCombobox;
+    new (): DsCombobox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-combobox.js ADDED Viewed

@@ -0,0 +1,423 @@
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './index2.js';
+import { c as classNames } from './index3.js';
+import { i as idGenerator, t as transformTagName, d as declareComponentDependencies } from './utils.js';
+import { s as searchOrSelectAnOption, r as removeSelection, n as noResultsFound } from './controlUtils.js';
+import { d as defineCustomElement$7 } from './ds-button2.js';
+import { d as defineCustomElement$6 } from './ds-icon2.js';
+import { d as defineCustomElement$5 } from './ds-input-validity2.js';
+import { d as defineCustomElement$4 } from './ds-options-message2.js';
+import { d as defineCustomElement$3 } from './ds-spinner2.js';
+import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
+const dsComboboxCss = ".sc-ds-combobox:root,.sc-ds-combobox-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-combobox-header__label.sc-ds-combobox{padding-inline:0;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-palette-black-95)}.ds-combobox-header__assistive-text.sc-ds-combobox{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.sc-ds-combobox-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-combobox-h{width:20rem}}.sc-ds-combobox-h>div.sc-ds-combobox{display:flex;flex-direction:column;position:relative}.ds-combobox-header.sc-ds-combobox{display:inline-flex;flex-direction:column;gap:var(--ds-spacing-3xSmall);margin-bottom:var(--ds-spacing-2xSmall);align-items:flex-start}.ds-combobox__input-container.sc-ds-combobox{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-palette-black-50);background-color:var(--ds-palette-white);color:var(--ds-palette-black-70);cursor:default;box-sizing:border-box;height:2.75rem;width:100%}.ds-combobox__input-container--disabled.sc-ds-combobox{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40);cursor:not-allowed}.ds-combobox__input-container--disabled.sc-ds-combobox .ds-combobox__input-container__toggle-button.sc-ds-combobox{cursor:not-allowed}.ds-combobox__input-container--invalid.sc-ds-combobox{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}.ds-combobox__input-container--invalid.sc-ds-combobox:not(.ds-combobox__input-container--open):not(.ds-combobox__input-container--disabled):hover{background-color:var(--ds-palette-red-10)}.ds-combobox__input-container--invalid.sc-ds-combobox:not(.ds-combobox__input-container--open):not(.ds-combobox__input-container--disabled):active{background-color:var(--ds-palette-red-20)}.ds-combobox__input-container.sc-ds-combobox:not(.ds-combobox__input-container--open):not(.ds-combobox__input-container:has(>.ds-combobox__input-container__clear-button>button:focus)):not(.ds-combobox__input-container--invalid):not(.ds-combobox__input-container--disabled):hover{background-color:var(--ds-palette-black-10)}.ds-combobox__input-container.sc-ds-combobox:active:not(.ds-combobox__input-container--invalid):not(.ds-combobox__input-container--disabled){background-color:var(--ds-palette-black-20)}.ds-combobox__input-container.sc-ds-combobox:has(>.ds-combobox__input-container__input:focus),.ds-combobox__input-container.sc-ds-combobox:has(>.ds-combobox__input-container__clear-button>button:focus){box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-combobox__input-container__input.sc-ds-combobox{width:100%;height:100%;border:0;background:none;color:inherit;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-combobox__input-container__input.sc-ds-combobox:disabled{cursor:not-allowed}.ds-combobox__input-container__input.sc-ds-combobox:disabled::placeholder{color:var(--ds-palette-black-40)}.ds-combobox__input-container__input.sc-ds-combobox:focus{outline:none}.ds-combobox__input-container__icon.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall)}.ds-combobox__input-container__icon.sc-ds-combobox+.ds-combobox__input-container__input.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-combobox__input-container__clear-button.sc-ds-combobox,.ds-combobox__input-container__toggle-button.sc-ds-combobox{cursor:pointer}.ds-combobox__input-container__toggle-button.sc-ds-combobox{color:inherit;display:flex;align-items:center;justify-content:center;height:100%}.ds-combobox__input-container__toggle-button__icon.sc-ds-combobox{align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-overlay-black-15);color:var(--ds-palette-black-70);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall);color:inherit}.ds-combobox__options-container.sc-ds-combobox{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20);background-color:var(--ds-palette-white)}.ds-combobox__options-container--open.sc-ds-combobox{display:block;box-shadow:0rem var(--ds-spacing-4xSmall) var(--ds-spacing-3xSmall) calc(-1 * var(--ds-spacing-4xSmall)) var(--ds-overlay-black-15), 0rem var(--ds-spacing-3xSmall) calc(var(--ds-spacing-xSmall) / 2) calc(-0.5 * var(--ds-spacing-4xSmall)) var(--ds-overlay-black-15)}.ds-combobox__options-container__options.sc-ds-combobox{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-combobox__options-container__options__inner.sc-ds-combobox{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-combobox__options-container__options__inner__top-scrim.sc-ds-combobox,.ds-combobox__options-container__options__inner__bottom-scrim.sc-ds-combobox{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-combobox__options-container__options__inner__top-scrim--visible.sc-ds-combobox,.ds-combobox__options-container__options__inner__bottom-scrim--visible.sc-ds-combobox{display:block}.ds-combobox__options-container__options__inner__top-scrim.sc-ds-combobox{top:0;background:linear-gradient(to bottom, var(--ds-palette-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-combobox__options-container__options__inner__top-scrim--dark.sc-ds-combobox{background:none;height:calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));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-combobox__options-container__options__inner__bottom-scrim.sc-ds-combobox{bottom:0;background:linear-gradient(to top, var(--ds-palette-white) 0%, var(--ds-overlay-white-00) 100%)}";
+const comboboxIdGenerator = idGenerator('ds-combobox');
+const DsCombobox$1 = proxyCustomElement(class DsCombobox extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.dsFilterChange = createEvent(this, "dsFilterChange");
+        this.dsChange = createEvent(this, "dsChange");
+    }
+    get el() { return this; }
+    inputRef;
+    clearButtonRef;
+    optionsListRef;
+    optionsListInnerRef;
+    labelId;
+    assistiveTextId;
+    inputId;
+    buttonId;
+    optionsId;
+    inputValidityId;
+    GROUP_ITERATION_STOP = 1000;
+    dsFilterChange;
+    dsChange;
+    dsId = comboboxIdGenerator.next().value;
+    dsLabel;
+    dsAssistiveText;
+    dsIcon;
+    dsPlaceholder;
+    dsPlaceholderHidden = false;
+    dsDisabled = false;
+    dsAriaLabel;
+    dsClearable = true;
+    dsErrorText;
+    dsFilteringStrategy = 'dynamic';
+    dsLoading = false;
+    dsOptionsError = false;
+    dsNoResults;
+    isOpen = false;
+    activeOption = null;
+    selectedOption = null;
+    inputValue = '';
+    hasTopScrim = false;
+    hasBottomScrim = false;
+    hasTopScrimDark = false;
+    noResults = false;
+    selectedOptionObserver(newValue, oldValue) {
+        if (oldValue) {
+            oldValue.dsSelected = false;
+        }
+        if (newValue) {
+            newValue.dsSelected = true;
+        }
+        this.dsChange.emit(newValue?.dsValue || null);
+    }
+    inputValueObserver(newValue) {
+        this.dsFilterChange.emit(newValue);
+    }
+    isOpenObserver(newValue) {
+        if (!newValue) {
+            this.setInputValue(this.selectedOption);
+            this.getAllGroups().forEach(group => {
+                group.dsHidden = false;
+            });
+            this.getAllOptions().forEach(option => {
+                option.dsHidden = false;
+            });
+        }
+    }
+    onDsOptionClick(event) {
+        this.setSelectedOption(event.detail);
+        this.isOpen = false;
+        setTimeout(() => {
+            this.inputRef?.select();
+        }, 0);
+    }
+    onFocusOut(e) {
+        const nextFocused = e && 'relatedTarget' in e ? e.relatedTarget : null;
+        if (this.isOpen && (!nextFocused || !this.el.contains(nextFocused))) {
+            this.isOpen = false;
+            this.noResults = false;
+        }
+    }
+    componentWillLoad() {
+        this.labelId = `${this.dsId}-label`;
+        this.assistiveTextId = `${this.dsId}-assistive-text`;
+        this.inputId = `${this.dsId}-input`;
+        this.buttonId = `${this.dsId}-button`;
+        this.optionsId = `${this.dsId}-options`;
+        this.inputValidityId = `${this.dsId}-input-validity`;
+        const groups = this.getAllGroups();
+        groups.forEach(group => {
+            group.dsMouseDownPreventDefault = true;
+        });
+        this.hasTopScrimDark = groups.length > 0;
+        this.getAllOptions().forEach(option => {
+            option.dsFocusOnActiveChange = false;
+            option.dsMouseDownPreventDefault = true;
+        });
+    }
+    componentDidLoad() {
+        this.updateScrimClasses();
+    }
+    componentDidUpdate() {
+        this.updateScrimClasses();
+    }
+    setSelectedOption = (option) => {
+        if (option) {
+            option.dsActive = false;
+        }
+        this.selectedOption = option;
+        this.activeOption = null;
+        this.setInputValue(option);
+    };
+    setActiveOption = (option) => {
+        if (!option)
+            return;
+        if (this.activeOption) {
+            this.activeOption.dsActive = false;
+        }
+        option.dsActive = true;
+        this.activeOption = option;
+        this.activeOption.scrollIntoView({ behavior: 'instant', block: 'center' });
+    };
+    setInputValue = async (option) => {
+        if (typeof option === 'string') {
+            this.inputValue = option;
+            return;
+        }
+        this.inputValue = (await option?.dsGetLabel()) || '';
+    };
+    getAllGroups = () => Array.from(this.el.querySelectorAll(transformTagName('ds-option-group', 'ds-combobox', this.el)));
+    getAllOptions = () => Array.from(this.el.querySelectorAll(transformTagName('ds-option', 'ds-combobox', this.el)));
+    isSelectableOption = (option) => !option.dsDisabled && !option.dsHidden;
+    getSelectableOptions = () => this.getAllOptions().filter(this.isSelectableOption);
+    elementIs = (tagName) => (element) => element.tagName.toLowerCase() === transformTagName(tagName, 'ds-combobox', this.el);
+    elementIsOption = this.elementIs('ds-option');
+    elementIsGroup = this.elementIs('ds-option-group');
+    getOption = (selector, wrapFn) => async (option = this.activeOption) => {
+        const elementSibling = option?.[selector];
+        if (!elementSibling || !this.elementIsOption(elementSibling)) {
+            const group = await option?.dsGetGroup();
+            if (group && this.elementIsGroup(group)) {
+                let groupSibling = group[selector];
+                let count = 0;
+                while (groupSibling && count++ < this.GROUP_ITERATION_STOP) {
+                    if (this.elementIsGroup(groupSibling) && !groupSibling.dsHidden) {
+                        break;
+                    }
+                    groupSibling = groupSibling[selector];
+                }
+                if (groupSibling && this.elementIsGroup(groupSibling) && !groupSibling.dsHidden) {
+                    const options = Array.from(groupSibling.querySelectorAll(transformTagName('ds-option', 'ds-combobox', this.el))).filter(this.isSelectableOption);
+                    if (options?.length) {
+                        return selector === 'nextElementSibling' ? options[0] : options[options.length - 1];
+                    }
+                }
+            }
+            return await wrapFn();
+        }
+        if (!this.isSelectableOption(elementSibling)) {
+            return await this.getOption(selector, wrapFn)(elementSibling);
+        }
+        return elementSibling;
+    };
+    getFirstOption = async () => {
+        return this.getSelectableOptions()?.[0] || null;
+    };
+    getLastOption = async () => {
+        const options = this.getSelectableOptions();
+        return options?.[options.length - 1] || null;
+    };
+    getNextOption = this.getOption('nextElementSibling', this.getFirstOption);
+    getPreviousOption = this.getOption('previousElementSibling', this.getLastOption);
+    onNavigationKeyDown = (getOptionFn) => async (event, option) => {
+        event.preventDefault();
+        if (!this.isOpen) {
+            this.isOpen = true;
+        }
+        this.setActiveOption(await getOptionFn(option));
+    };
+    handleKeyDown = (event) => {
+        switch (event.key) {
+            case 'Enter': {
+                event.preventDefault();
+                if (this.activeOption && !this.activeOption.dsDisabled && !this.activeOption.dsHidden) {
+                    this.setSelectedOption(this.activeOption);
+                    this.isOpen = false;
+                    setTimeout(() => {
+                        this.inputRef?.select();
+                    }, 0);
+                }
+                break;
+            }
+            case 'Down':
+            case 'ArrowDown': {
+                this.onNavigationKeyDown(this.getNextOption)(event, this.activeOption);
+                break;
+            }
+            case 'Up':
+            case 'ArrowUp': {
+                this.onNavigationKeyDown(this.getPreviousOption)(event, this.activeOption);
+                break;
+            }
+            case 'Home': {
+                this.onNavigationKeyDown(this.getFirstOption)(event);
+                break;
+            }
+            case 'End': {
+                this.onNavigationKeyDown(this.getLastOption)(event);
+                break;
+            }
+            case 'Tab': {
+                this.isOpen = false;
+                if ((this.activeOption && !this.activeOption.dsDisabled && !this.activeOption.dsHidden) || this.selectedOption) {
+                    if (this.activeOption) {
+                        this.setSelectedOption(this.activeOption);
+                    }
+                    if (!event.shiftKey && this.dsClearable) {
+                        setTimeout(() => {
+                            this.clearButtonRef?.dsFocus();
+                        }, 0);
+                    }
+                }
+                break;
+            }
+            case 'Esc':
+            case 'Escape': {
+                this.inputRef?.blur();
+                break;
+            }
+            default: {
+                this.isOpen = true;
+                break;
+            }
+        }
+    };
+    updateGroupVisibility = async (option) => {
+        const group = await option.dsGetGroup();
+        if (group) {
+            group.dsHidden = !(await group.dsHasVisibleOptions());
+        }
+    };
+    handleInput = (event) => {
+        this.setInputValue(event.target.value);
+        if (this.dsFilteringStrategy === 'static') {
+            return;
+        }
+        let hiddenOptionsCount = 0;
+        const allOptions = this.getAllOptions();
+        allOptions.forEach(option => {
+            option.dsHidden = !option.textContent?.toLowerCase().includes(this.inputValue.toLowerCase());
+            if (option.dsHidden) {
+                hiddenOptionsCount++;
+            }
+            this.updateGroupVisibility(option);
+        });
+        this.noResults = hiddenOptionsCount === allOptions.length;
+    };
+    openCombobox = () => {
+        this.isOpen = true;
+        setTimeout(() => {
+            this.inputRef?.select();
+        }, 0);
+    };
+    handleFocus = () => {
+        if (this.dsDisabled)
+            return;
+        this.openCombobox();
+    };
+    handleToggleButtonClick = (event) => {
+        event.stopPropagation();
+        if (this.dsDisabled)
+            return;
+        if (this.isOpen) {
+            this.inputRef?.blur();
+            this.isOpen = false;
+            return;
+        }
+        this.openCombobox();
+    };
+    handleClearButtonClick = (event) => {
+        event.stopPropagation();
+        this.setInputValue('');
+        this.setSelectedOption(null);
+        setTimeout(() => {
+            this.inputRef?.select();
+        }, 0);
+    };
+    updateScrimClasses = () => {
+        const wrapper = this.optionsListRef;
+        const scrollEl = this.optionsListInnerRef;
+        if (!wrapper || !scrollEl)
+            return;
+        this.hasTopScrim = scrollEl.scrollTop !== 0;
+        this.hasBottomScrim = Math.ceil(scrollEl.scrollTop + scrollEl.clientHeight) < scrollEl.scrollHeight;
+    };
+    handleScroll = () => {
+        this.updateScrimClasses();
+    };
+    render() {
+        const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !!this.dsErrorText && this.inputValidityId].filter(Boolean).join(' ');
+        const DsIcon = transformTagName('ds-icon', 'ds-combobox', this.el);
+        const DsButton = transformTagName('ds-button', 'ds-combobox', this.el);
+        const DsOptionsMessage = transformTagName('ds-options-message', 'ds-combobox', this.el);
+        const DsInputValidity = transformTagName('ds-input-validity', 'ds-combobox', this.el);
+        const baseClass = 'ds-combobox';
+        const headerClass = `${baseClass}-header`;
+        const inputContainerClass = `${baseClass}__input-container`;
+        const optionsContainerClass = `${baseClass}__options-container`;
+        return (h(Fragment, { key: '8916d9afb3be79808c357a668b20e23cb31c623a' }, (this.dsLabel || this.dsAssistiveText) && (h("div", { key: '65a4494fa15a8e5026a7c4fd286842a826db4a3f', class: headerClass }, this.dsLabel && (h("label", { key: '264850a7cac05f208cfb22b6a37ade1fa0194c91', id: this.labelId, class: `${headerClass}__label`, htmlFor: this.inputId }, this.dsLabel)), this.dsAssistiveText && (h("small", { key: '2d010d71d3fd2d2e4bd1398b5198e35446f3e88e', class: `${headerClass}__assistive-text`, id: this.assistiveTextId }, this.dsAssistiveText)))), h("div", { key: '44cdeb371609ba414bf9df9892c2b278018ad5ad', class: classNames(baseClass, {
+                [`${baseClass}--open`]: this.isOpen,
+            }) }, h("div", { key: 'e74f0981e53dab6fd3d34e0c0d5da0871cc38ab9', class: classNames(inputContainerClass, {
+                [`${inputContainerClass}--disabled`]: this.dsDisabled,
+                [`${inputContainerClass}--invalid`]: !!this.dsErrorText,
+                [`${inputContainerClass}--open`]: this.isOpen,
+            }), onClick: () => {
+                if (this.dsDisabled)
+                    return;
+                this.openCombobox();
+            } }, this.dsIcon && h(DsIcon, { key: '7a0f2512a614dcedb9efadf2302a96e715a23869', class: `${inputContainerClass}__icon`, dsName: this.dsIcon }), h("input", { key: 'b907d654b48732788d09dde89e3876c05e4b2490', id: this.inputId, class: `${inputContainerClass}__input`, ref: el => (this.inputRef = el), type: "text", role: "combobox", "aria-autocomplete": "list", "aria-activedescendant": this.activeOption?.dsId || '', "aria-label": !this.dsLabel ? this.dsAriaLabel : undefined, "aria-expanded": String(this.isOpen), "aria-controls": this.optionsId, "aria-describedby": ariaDescribedBy, placeholder: this.dsPlaceholderHidden ? undefined : this.dsPlaceholder || searchOrSelectAnOption(), disabled: this.dsDisabled, onKeyDown: this.handleKeyDown, onInput: this.handleInput, onFocus: this.handleFocus, value: this.inputValue }), this.dsClearable && this.selectedOption && !this.dsDisabled && (h(DsButton, { key: '12988f1f26597e09d32e0a747242bc4cb34f5cc4', ref: el => (this.clearButtonRef = el), class: `${inputContainerClass}__clear-button`, dsVariant: "supplementary", dsIcon: "cancel_fill", dsColour: "black", onClick: this.handleClearButtonClick, "aria-label": removeSelection(true) })), h("div", { key: '3093ac0659ff38e55b0dc8848edf82ade9f6e033', id: this.buttonId, class: `${inputContainerClass}__toggle-button`, role: "button", tabindex: -1, "aria-label": !this.dsLabel ? this.dsAriaLabel : undefined, "aria-labelledby": this.dsLabel && this.labelId, "aria-expanded": String(this.isOpen), "aria-controls": this.optionsId, onClick: this.handleToggleButtonClick }, h(DsIcon, { key: '3505aebedd49a4240bc8ca5dbab1e6de01853a70', class: `${inputContainerClass}__toggle-button__icon`, dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }))), h("div", { key: '9c8e84f47d66479e3c2987d13eca01c9c71c9784', class: classNames(optionsContainerClass, {
+                [`${optionsContainerClass}--open`]: this.isOpen,
+            }) }, h("div", { key: '50132ed72650a586595e994c1947e43ec5294d98', ref: el => (this.optionsListRef = el), id: this.optionsId, class: classNames(`${optionsContainerClass}__options`), role: "listbox", "aria-label": !this.dsLabel ? this.dsAriaLabel : undefined, "aria-labelledby": this.dsLabel && this.labelId }, h("div", { key: 'c6b7d61be01aa913246003d5f8be0f688bd446fc', ref: el => (this.optionsListInnerRef = el), class: `${optionsContainerClass}__options__inner`, onScroll: this.handleScroll }, h("div", { key: 'ff6c9c62155c0fa29524fdd72257ca127590b121', class: classNames(`${optionsContainerClass}__options__inner__top-scrim`, {
+                [`${optionsContainerClass}__options__inner__top-scrim--dark`]: this.hasTopScrimDark,
+                [`${optionsContainerClass}__options__inner__top-scrim--visible`]: this.hasTopScrim,
+            }), "aria-hidden": "true" }), h(DsOptionsMessage, { key: '819df9db4c208e0758c3b239950ecf87ca0263a6', dsLoading: this.dsLoading, dsError: this.dsOptionsError, dsNoResults: this.dsNoResults || this.noResults, dsNoResultsTitle: this.dsNoResults || this.noResults ? noResultsFound(this.inputValue) : undefined }), h("slot", { key: '7f5e4b7082429e1d27eaf6ecde90cb07dd67d41e' }), h("div", { key: '882836a1a9644f0c7b7f5fe7a97a7809afec170e', class: classNames(`${optionsContainerClass}__options__inner__bottom-scrim`, {
+                [`${optionsContainerClass}__options__inner__bottom-scrim--visible`]: this.hasBottomScrim,
+            }), "aria-hidden": "true" }))))), !!this.dsErrorText && h(DsInputValidity, { key: 'bb10e6890e8a48145f8fcb53031d9db822dcbab0', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+    }
+    static get watchers() { return {
+        "selectedOption": ["selectedOptionObserver"],
+        "inputValue": ["inputValueObserver"],
+        "isOpen": ["isOpenObserver"]
+    }; }
+    static get style() { return dsComboboxCss; }
+}, [6, "ds-combobox", {
+        "dsId": [1, "ds-id"],
+        "dsLabel": [1, "ds-label"],
+        "dsAssistiveText": [1, "ds-assistive-text"],
+        "dsIcon": [1, "ds-icon"],
+        "dsPlaceholder": [1, "ds-placeholder"],
+        "dsPlaceholderHidden": [4, "ds-placeholder-hidden"],
+        "dsDisabled": [4, "ds-disabled"],
+        "dsAriaLabel": [1, "ds-aria-label"],
+        "dsClearable": [4, "ds-clearable"],
+        "dsErrorText": [1, "ds-error-text"],
+        "dsFilteringStrategy": [1, "ds-filtering-strategy"],
+        "dsLoading": [4, "ds-loading"],
+        "dsOptionsError": [4, "ds-options-error"],
+        "dsNoResults": [4, "ds-no-results"],
+        "isOpen": [32],
+        "activeOption": [32],
+        "selectedOption": [32],
+        "inputValue": [32],
+        "hasTopScrim": [32],
+        "hasBottomScrim": [32],
+        "hasTopScrimDark": [32],
+        "noResults": [32]
+    }, [[0, "dsOptionClick", "onDsOptionClick"], [0, "focusout", "onFocusOut"]], {
+        "selectedOption": ["selectedOptionObserver"],
+        "inputValue": ["inputValueObserver"],
+        "isOpen": ["isOpenObserver"]
+    }]);
+declareComponentDependencies([h("ds-icon", null), h("ds-button", null), h("ds-options-message", null), h("ds-input-validity", null)]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-combobox", "ds-button", "ds-icon", "ds-input-validity", "ds-options-message", "ds-spinner", "ds-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-combobox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsCombobox$1);
+            }
+            break;
+        case "ds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ds-input-validity":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ds-options-message":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ds-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ds-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+const DsCombobox = DsCombobox$1;
+const defineCustomElement = defineCustomElement$1;
+export { DsCombobox, defineCustomElement };