@uh-design-system/component-library 0.5.0 → 0.5.2

package/dist/component-library/ds-checkbox-group.entry.js

@@ -1 +1 @@
-import{r as e,c as t,a as s,h as i,F as h}from"./index-434995e1.js";import{c as d}from"./index-72ac5051.js";import{i as c}from"./attributes-7d09be1b.js";import{i as a}from"./utils-5daa5bc0.js";const o=a("ds-checkbox-group"),n=class{constructor(s){e(this,s),this.dsCheckboxGroupChange=t(this,"dsCheckboxGroupChange",7),this.dsCheckboxGroupIndeterminateChildChange=t(this,"dsCheckboxGroupIndeterminateChildChange",7)}fieldsetId=o.next().value;checkboxId=`${this.fieldsetId}-checkbox`;errorTextId=`${this.fieldsetId}-error`;assistiveTextId=`${this.fieldsetId}-assistive-text`;nestedId=`${this.fieldsetId}-nested`;inheritedAttributes={};get el(){return s(this)}dsCheckboxGroupChange;dsCheckboxGroupIndeterminateChildChange;legend;assistiveText;direction="vertical";errorText="";text="";checked=!1;disabled=!1;childElementsCount=0;checkedChildElementCount=0;isIndeterminate=!1;indeterminateChildCheckboxCount=0;elementIs=e=>t=>t.localName===e;elementIsCheckbox=this.elementIs("ds-checkbox");elementIsCheckboxGroup=this.elementIs("ds-checkbox-group");getAriaDescribedBy=()=>[Boolean(this.assistiveText)&&this.assistiveTextId,Boolean(this.errorText)&&this.errorTextId].filter(Boolean).join(" ");getChildElements=()=>{const e=this.el.shadowRoot.querySelector("slot");return e?.assignedElements()||[]};getChildCheckboxElements=()=>this.getChildElements().filter(this.elementIsCheckbox);updateChildElements=e=>{this.getChildElements().forEach(e)};updateChildCheckboxes=e=>{this.getChildCheckboxElements().forEach(e)};updateChildElementsChecked=e=>{this.checkedChildElementCount=e?this.childElementsCount:0,this.updateChildElements((t=>{t.checked=e,this.elementIsCheckboxGroup(t)&&(async()=>{await t.setChecked(e)})()}))};async setChecked(e){this.updateChildElementsChecked(e)}watchCheckboxDisabledChange(e){this.updateChildElements((t=>{t.disabled=e}))}watchCheckedChange(e){this.updateChildElementsChecked(e)}watchIndeterminateChange(e){this.dsCheckboxGroupIndeterminateChildChange.emit({id:this.fieldsetId,indeterminate:e})}listenIndeterminateChildChange(e){this.indeterminateChildCheckboxCount=e.detail.indeterminate?this.indeterminateChildCheckboxCount+1:this.indeterminateChildCheckboxCount-1}watchCheckedChildElementCountChange(e,t){this.isIndeterminate=this.checkedChildElementCount!==this.childElementsCount&&this.checkedChildElementCount<this.childElementsCount&&this.checkedChildElementCount>0,e===this.childElementsCount&&e>t?this.dsCheckboxGroupChange.emit({id:this.fieldsetId,checked:!0}):t===this.childElementsCount&&e<t&&this.dsCheckboxGroupChange.emit({id:this.fieldsetId,checked:!1})}updateCheckedChildElementCount=e=>{this.checkedChildElementCount=e.detail.checked?this.checkedChildElementCount===this.childElementsCount?this.checkedChildElementCount:this.checkedChildElementCount+1:0===this.checkedChildElementCount?0:this.checkedChildElementCount-1};listenCheckboxChange(e){e.detail.id!==this.checkboxId?this.getChildCheckboxElements().includes(e.target)&&this.updateCheckedChildElementCount(e):this.updateChildElementsChecked(e.detail.checked)}listenCheckboxGroupChange(e){this.getChildElements().includes(e.target)&&this.updateCheckedChildElementCount(e)}setChildElementCount=()=>{this.childElementsCount=this.getChildElements().length};componentWillLoad(){this.inheritedAttributes=c(this.el,["aria-labelledby"])}componentDidLoad(){this.setChildElementCount(),this.updateChildCheckboxes((e=>{e.setAttribute("data-errors-disabled","true")}))}componentDidUpdate(){this.setChildElementCount()}render(){const e=d("ds-checkbox-group",{"ds-checkbox-group--horizontal":"horizontal"===this.direction}),t=d("ds-checkbox-group__legend"),s=d("ds-checkbox-group__assistive-text"),c=d("ds-checkbox-group__error",{"ds-checkbox-group__error--visible":Boolean(this.errorText)}),a=d("ds-checkbox-group","ds-checkbox-group--inset"),o=d("ds-checkbox-group__checkboxes"),n=this.getAriaDescribedBy();return i("fieldset",{key:"1029763130b4d2d138679c9f84ec72c0231fcc83",id:this.fieldsetId,class:e,"aria-describedby":n,...this.inheritedAttributes},this.legend&&i("legend",{key:"a9be37aab510d5e402841c8bbda64190548bc1ea",class:t},this.legend),this.assistiveText&&i("small",{key:"0ae42c2b46e52dad0570ad120180e662db43f2fa",class:s,id:this.assistiveTextId},this.assistiveText),this.text?i(h,null,i("ds-checkbox",{id:this.checkboxId,text:this.text,checked:this.checkedChildElementCount===this.childElementsCount,disabled:this.disabled,indeterminate:this.indeterminateChildCheckboxCount>0||this.isIndeterminate}),i("fieldset",{id:this.nestedId,"aria-labelledby":this.checkboxId,class:a},i("slot",null))):i("div",{class:o},i("slot",null)),i("div",{key:"3ea5bb7991a99c676cb50a24d1a679b6f68c96bf",class:c},i("ds-input-validity",{key:"8d5ca5e80b2a5f985e09bf7039538a5a13278e8e",id:this.errorTextId,text:this.errorText,type:"error"})))}static get watchers(){return{disabled:["watchCheckboxDisabledChange"],checked:["watchCheckedChange"],isIndeterminate:["watchIndeterminateChange"],checkedChildElementCount:["watchCheckedChildElementCountChange"]}}};n.style=".ds-checkbox-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__legend{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-checkbox-group__assistive-text{font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}.ds-checkbox-group__error{display:flex}.ds-checkbox-group__error--visible{padding-top:var(--ds-spacing-3xSmall)}.ds-checkbox-group>.ds-checkbox-group__checkboxes{display:inline-flex;flex-direction:column}.ds-checkbox-group--inset{margin-left:var(--ds-spacing-large)}.ds-checkbox-group--horizontal>.ds-checkbox-group__checkboxes{flex-direction:row;gap:var(--ds-spacing-small);flex-wrap:wrap}";export{n as ds_checkbox_group}
+import{r as e,c as t,a as s,h as i,F as h}from"./index-434995e1.js";import{c as d}from"./index-72ac5051.js";import{i as c,c as a}from"./utils-cfc536bc.js";const o=a("ds-checkbox-group"),n=class{constructor(s){e(this,s),this.dsCheckboxGroupChange=t(this,"dsCheckboxGroupChange",7),this.dsCheckboxGroupIndeterminateChildChange=t(this,"dsCheckboxGroupIndeterminateChildChange",7)}fieldsetId=o.next().value;checkboxId=`${this.fieldsetId}-checkbox`;errorTextId=`${this.fieldsetId}-error`;assistiveTextId=`${this.fieldsetId}-assistive-text`;nestedId=`${this.fieldsetId}-nested`;inheritedAttributes={};get el(){return s(this)}dsCheckboxGroupChange;dsCheckboxGroupIndeterminateChildChange;legend;assistiveText;direction="vertical";errorText="";text="";checked=!1;disabled=!1;childElementsCount=0;checkedChildElementCount=0;isIndeterminate=!1;indeterminateChildCheckboxCount=0;elementIs=e=>t=>t.localName===e;elementIsCheckbox=this.elementIs("ds-checkbox");elementIsCheckboxGroup=this.elementIs("ds-checkbox-group");getAriaDescribedBy=()=>[Boolean(this.assistiveText)&&this.assistiveTextId,Boolean(this.errorText)&&this.errorTextId].filter(Boolean).join(" ");getChildElements=()=>{const e=this.el.shadowRoot.querySelector("slot");return e?.assignedElements()||[]};getChildCheckboxElements=()=>this.getChildElements().filter(this.elementIsCheckbox);updateChildElements=e=>{this.getChildElements().forEach(e)};updateChildCheckboxes=e=>{this.getChildCheckboxElements().forEach(e)};updateChildElementsChecked=e=>{this.checkedChildElementCount=e?this.childElementsCount:0,this.updateChildElements((t=>{t.checked=e,this.elementIsCheckboxGroup(t)&&(async()=>{await t.setChecked(e)})()}))};async setChecked(e){this.updateChildElementsChecked(e)}watchCheckboxDisabledChange(e){this.updateChildElements((t=>{t.disabled=e}))}watchCheckedChange(e){this.updateChildElementsChecked(e)}watchIndeterminateChange(e){this.dsCheckboxGroupIndeterminateChildChange.emit({id:this.fieldsetId,indeterminate:e})}listenIndeterminateChildChange(e){this.indeterminateChildCheckboxCount=e.detail.indeterminate?this.indeterminateChildCheckboxCount+1:this.indeterminateChildCheckboxCount-1}watchCheckedChildElementCountChange(e,t){this.isIndeterminate=this.checkedChildElementCount!==this.childElementsCount&&this.checkedChildElementCount<this.childElementsCount&&this.checkedChildElementCount>0,e===this.childElementsCount&&e>t?this.dsCheckboxGroupChange.emit({id:this.fieldsetId,checked:!0}):t===this.childElementsCount&&e<t&&this.dsCheckboxGroupChange.emit({id:this.fieldsetId,checked:!1})}updateCheckedChildElementCount=e=>{this.checkedChildElementCount=e.detail.checked?this.checkedChildElementCount===this.childElementsCount?this.checkedChildElementCount:this.checkedChildElementCount+1:0===this.checkedChildElementCount?0:this.checkedChildElementCount-1};listenCheckboxChange(e){e.detail.id!==this.checkboxId?this.getChildCheckboxElements().includes(e.target)&&this.updateCheckedChildElementCount(e):this.updateChildElementsChecked(e.detail.checked)}listenCheckboxGroupChange(e){this.getChildElements().includes(e.target)&&this.updateCheckedChildElementCount(e)}setChildElementCount=()=>{this.childElementsCount=this.getChildElements().length};componentWillLoad(){this.inheritedAttributes=c(this.el,["aria-labelledby"])}componentDidLoad(){this.setChildElementCount(),this.updateChildCheckboxes((e=>{e.setAttribute("data-errors-disabled","true")}))}componentDidUpdate(){this.setChildElementCount()}render(){const e=d("ds-checkbox-group",{"ds-checkbox-group--horizontal":"horizontal"===this.direction}),t=d("ds-checkbox-group__legend"),s=d("ds-checkbox-group__assistive-text"),c=d("ds-checkbox-group__error",{"ds-checkbox-group__error--visible":Boolean(this.errorText)}),a=d("ds-checkbox-group","ds-checkbox-group--inset"),o=d("ds-checkbox-group__checkboxes"),n=this.getAriaDescribedBy();return i("fieldset",{key:"1029763130b4d2d138679c9f84ec72c0231fcc83",id:this.fieldsetId,class:e,"aria-describedby":n,...this.inheritedAttributes},this.legend&&i("legend",{key:"a9be37aab510d5e402841c8bbda64190548bc1ea",class:t},this.legend),this.assistiveText&&i("small",{key:"0ae42c2b46e52dad0570ad120180e662db43f2fa",class:s,id:this.assistiveTextId},this.assistiveText),this.text?i(h,null,i("ds-checkbox",{id:this.checkboxId,text:this.text,checked:this.checkedChildElementCount===this.childElementsCount,disabled:this.disabled,indeterminate:this.indeterminateChildCheckboxCount>0||this.isIndeterminate}),i("fieldset",{id:this.nestedId,"aria-labelledby":this.checkboxId,class:a},i("slot",null))):i("div",{class:o},i("slot",null)),i("div",{key:"3ea5bb7991a99c676cb50a24d1a679b6f68c96bf",class:c},i("ds-input-validity",{key:"8d5ca5e80b2a5f985e09bf7039538a5a13278e8e",id:this.errorTextId,text:this.errorText,type:"error"})))}static get watchers(){return{disabled:["watchCheckboxDisabledChange"],checked:["watchCheckedChange"],isIndeterminate:["watchIndeterminateChange"],checkedChildElementCount:["watchCheckedChildElementCountChange"]}}};n.style=".ds-checkbox-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__legend{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-checkbox-group__assistive-text{font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}.ds-checkbox-group__error{display:flex}.ds-checkbox-group__error--visible{padding-top:var(--ds-spacing-3xSmall)}.ds-checkbox-group>.ds-checkbox-group__checkboxes{display:inline-flex;flex-direction:column}.ds-checkbox-group--inset{margin-left:var(--ds-spacing-large)}.ds-checkbox-group--horizontal>.ds-checkbox-group__checkboxes{flex-direction:row;gap:var(--ds-spacing-small);flex-wrap:wrap}";export{n as ds_checkbox_group}

package/dist/component-library/ds-checkbox.entry.js

@@ -1 +1 @@
-import{r as e,c as i,a as t,h as s,F as o}from"./index-434995e1.js";import{c as r}from"./index-72ac5051.js";import{i as d}from"./attributes-7d09be1b.js";import{g as a,a as h}from"./controlUtils-9ca4087b.js";import{i as n}from"./store-b8d17c10.js";import{g as c,i as l}from"./utils-5daa5bc0.js";const b=l("ds-checkbox"),g=class{constructor(t){e(this,t),this.dsCheckboxInput=i(this,"dsCheckboxInput",7),t.$hostElement$["s-ei"]?this.internals=t.$hostElement$["s-ei"]:(this.internals=t.$hostElement$.attachInternals(),t.$hostElement$["s-ei"]=this.internals)}inputElem;labelId;inputValidityId;assistiveTextId;inheritedAttributes={};initialChecked;labelClicked=!1;get el(){return t(this)}internals;dsCheckboxInput;identifier=b.next().value;checked=!1;legend;assistiveText;text;indeterminate=!1;disabled=!1;errorText="";errorsDisabled=!1;required=!1;optional=!1;optionalText;ariaLabel;value=this.checked.toString();validationMessage;setIds=()=>{this.labelId=`${this.identifier}-label`,this.inputValidityId=`${this.identifier}-validity`,this.assistiveTextId=`${this.identifier}-assistive-text`};getValidationMessage=()=>this.errorsDisabled?"":this.errorText||this.internals?.validationMessage||this.inputElem?.validationMessage;getLegendText=()=>this.required?a(this.legend):this.optional?h(this.legend,this.optionalText):this.legend;getCheckboxText=()=>this.legend?this.text:this.required?a(this.text):this.optional?h(this.text,this.optionalText):this.text;getAriaDescribedBy=()=>[Boolean(this.assistiveText)&&this.assistiveTextId,Boolean(this.getValidationMessage())&&this.inputValidityId].filter(Boolean).join(" ");restoreInitialState=()=>{this.checked=this.initialChecked,this.value=this.checked.toString(),this.internals?.setValidity({}),this.internals?.setFormValue(this.value)};setInitialState=()=>{this.initialChecked=this.checked,this.value=this.checked.toString(),this.internals?.setFormValue(this.value)};formResetCallback(){this.restoreInitialState()}componentWillLoad(){this.setInitialState(),this.setIds(),this.inheritedAttributes=d(this.el,["aria-label","aria-describedby","aria-hidden","aria-invalid"]),(n("server")||this.errorText)&&(this.validationMessage=this.getValidationMessage())}handleInput=e=>{const i=e.target;this.checked=i.checked,this.value=i.checked.toString(),this.internals?.setFormValue(this.value),this.dsCheckboxInput.emit({id:this.identifier,checked:i.checked}),n("client")&&this.validationMessage&&(this.validationMessage=this.getValidationMessage())};handleKeyUp=e=>{"Enter"===e.key&&this.inputElem.dispatchEvent(new Event("input"))};handleBlur=()=>{n("client")&&!this.labelClicked&&(this.validationMessage=this.getValidationMessage()),this.labelClicked=!1};handleMouseDown=()=>{this.labelClicked=!0};handleMouseUp=()=>{this.labelClicked=!1};renderCheckbox(){const e=r("ds-checkbox",{"ds-checkbox--disabled":this.disabled,"ds-checkbox--no-margin":Boolean(!this.text)}),i=r("ds-checkbox__input",{"ds-checkbox__input--invalid":Boolean(this.errorText)}),t=r("ds-checkbox-error",{"ds-checkbox-error--visible":Boolean(this.validationMessage)}),d=this.getAriaDescribedBy();return s(o,null,s("div",null,s("label",{id:this.labelId,class:e,onMouseDown:this.handleMouseDown,onMouseUp:this.handleMouseUp},s("input",{ref:e=>this.inputElem=e,type:"checkbox",class:i,checked:this.checked,indeterminate:this.indeterminate,onInput:this.handleInput,onKeyUp:this.handleKeyUp,onBlur:this.handleBlur,value:this.value,disabled:this.disabled,required:this.required,id:this.identifier,"aria-describedby":d,"aria-label":c(this.getCheckboxText(),this.ariaLabel),"aria-invalid":!!this.errorText||void 0,...this.inheritedAttributes}),this.getCheckboxText())),!this.errorsDisabled&&s("div",{class:t},s("ds-input-validity",{id:this.inputValidityId,text:this.validationMessage,type:"error",role:"alert"})))}renderFieldset(){const e=r("ds-checkbox-fieldset"),i=r("ds-checkbox-fieldset__legend"),t=r("ds-checkbox-fieldset__assistive-text");return s("fieldset",{class:e},s("legend",{class:i},this.getLegendText()),this.assistiveText&&s("small",{class:t,id:this.assistiveTextId},this.assistiveText),this.renderCheckbox())}render(){return this.legend?this.renderFieldset():this.renderCheckbox()}static get formAssociated(){return!0}};g.style=".ds-checkbox-fieldset{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox-fieldset__legend{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-checkbox-fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}.ds-checkbox{display:inline-flex;align-self:flex-start;align-items:center;flex-direction:row;flex-wrap:nowrap;text-wrap:wrap;position:relative;cursor:pointer;user-select:none;width:auto;padding:var(--ds-spacing-xSmall)}.ds-checkbox--no-margin .ds-checkbox__input{margin-right:0}.ds-checkbox--disabled{color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__span--optional{color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-checkbox:has(.ds-checkbox__input:disabled){cursor:not-allowed}.ds-checkbox__input{cursor:pointer;-webkit-appearance:none;appearance:none;background-color:var(--ds-bgColor-white);margin:0;display:grid;place-content:center;height:24px;width:24px;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-palette-black-50);}.ds-checkbox__input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-checkbox__input:hover,.ds-checkbox__input:active{border-color:var(--ds-borderColor-default)}.ds-checkbox__input:hover{background-color:var(--ds-bgColor-white-hover)}.ds-checkbox__input:active{background-color:var(--ds-bgColor-white-active)}.ds-checkbox__input:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}@media (forced-colors: active){.ds-checkbox__input:disabled{border-color:GrayText}}.ds-checkbox__input:checked,.ds-checkbox__input:indeterminate{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__input:checked:hover,.ds-checkbox__input:indeterminate:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-checkbox__input:checked:active,.ds-checkbox__input:indeterminate:active{background-color:var(--ds-bgColor-primary-active)}.ds-checkbox__input:checked:disabled,.ds-checkbox__input:indeterminate:disabled{background-color:var(--ds-bgColor-disabled-onLight)}.ds-checkbox__input:user-invalid,.ds-checkbox__input--invalid,.ds-checkbox__input--invalid:checked,.ds-checkbox__input--invalid:indeterminate{border-color:var(--ds-borderColor-danger)}.ds-checkbox__input:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__input::before{content:\"\";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__input:checked::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:checked:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>\")}.ds-checkbox__input:indeterminate::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:indeterminate:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>\")}.ds-checkbox-error{display:flex}.ds-checkbox-error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-xSmall)}";export{g as ds_checkbox}
+import{r as e,c as i,a as t,h as s,F as o}from"./index-434995e1.js";import{c as r}from"./index-72ac5051.js";import{i as d,b as a,g as h,c as n}from"./utils-cfc536bc.js";import{g as c,a as l}from"./controlUtils-9ca4087b.js";import{i as b}from"./store-b8d17c10.js";const g=n("ds-checkbox"),p=class{constructor(t){e(this,t),this.dsCheckboxInput=i(this,"dsCheckboxInput",7),t.$hostElement$["s-ei"]?this.internals=t.$hostElement$["s-ei"]:(this.internals=t.$hostElement$.attachInternals(),t.$hostElement$["s-ei"]=this.internals)}inputElem;labelId;inputValidityId;assistiveTextId;inheritedAttributes={};initialChecked;labelClicked=!1;get el(){return t(this)}internals;dsCheckboxInput;identifier=g.next().value;checked=!1;legend;assistiveText;text;indeterminate=!1;disabled=!1;errorText="";errorsDisabled=!1;required=!1;optional=!1;optionalText;ariaLabel;value=this.checked.toString();validationMessage;setIds=()=>{this.labelId=`${this.identifier}-label`,this.inputValidityId=`${this.identifier}-validity`,this.assistiveTextId=`${this.identifier}-assistive-text`};getValidationMessage=()=>this.errorsDisabled?"":this.errorText||this.internals?.validationMessage||this.inputElem?.validationMessage;getLegendText=()=>this.required?c(this.legend):this.optional?l(this.legend,this.optionalText):this.legend;getCheckboxText=()=>this.legend?this.text:this.required?c(this.text):this.optional?l(this.text,this.optionalText):this.text;getAriaDescribedBy=()=>[Boolean(this.assistiveText)&&this.assistiveTextId,Boolean(this.getValidationMessage())&&this.inputValidityId].filter(Boolean).join(" ");restoreInitialState=()=>{this.checked=this.initialChecked,this.value=this.checked.toString(),this.internals?.setValidity({}),this.internals?.setFormValue(this.value)};setInitialState=()=>{this.initialChecked=this.checked,this.value=this.checked.toString(),this.internals?.setFormValue(this.value)};formResetCallback(){this.restoreInitialState()}componentWillLoad(){this.setInitialState(),this.setIds(),this.inheritedAttributes={...d(this.el,["aria-label","aria-describedby","aria-hidden","aria-invalid"]),...a(this,this.el)},(b("server")||this.errorText)&&(this.validationMessage=this.getValidationMessage())}handleInput=e=>{const i=e.target;this.checked=i.checked,this.value=i.checked.toString(),this.internals?.setFormValue(this.value),this.dsCheckboxInput.emit({id:this.identifier,checked:i.checked}),b("client")&&this.validationMessage&&(this.validationMessage=this.getValidationMessage())};handleKeyUp=e=>{"Enter"===e.key&&this.inputElem.dispatchEvent(new Event("input"))};handleBlur=()=>{b("client")&&!this.labelClicked&&(this.validationMessage=this.getValidationMessage()),this.labelClicked=!1};handleMouseDown=()=>{this.labelClicked=!0};handleMouseUp=()=>{this.labelClicked=!1};renderCheckbox(){const e=r("ds-checkbox",{"ds-checkbox--disabled":this.disabled,"ds-checkbox--no-margin":Boolean(!this.text)}),i=r("ds-checkbox__input",{"ds-checkbox__input--invalid":Boolean(this.errorText)}),t=r("ds-checkbox-error",{"ds-checkbox-error--visible":Boolean(this.validationMessage)}),d=this.getAriaDescribedBy();return s(o,null,s("div",null,s("label",{id:this.labelId,class:e,onMouseDown:this.handleMouseDown,onMouseUp:this.handleMouseUp},s("input",{ref:e=>this.inputElem=e,type:"checkbox",class:i,checked:this.checked,indeterminate:this.indeterminate,onInput:this.handleInput,onKeyUp:this.handleKeyUp,onBlur:this.handleBlur,value:this.value,disabled:this.disabled,required:this.required,id:this.identifier,"aria-describedby":d,"aria-label":h(this.getCheckboxText(),this.ariaLabel),"aria-invalid":!!this.errorText||void 0,...this.inheritedAttributes}),this.getCheckboxText())),!this.errorsDisabled&&s("div",{class:t},s("ds-input-validity",{id:this.inputValidityId,text:this.validationMessage,type:"error",role:"alert"})))}renderFieldset(){const e=r("ds-checkbox-fieldset"),i=r("ds-checkbox-fieldset__legend"),t=r("ds-checkbox-fieldset__assistive-text");return s("fieldset",{class:e},s("legend",{class:i},this.getLegendText()),this.assistiveText&&s("small",{class:t,id:this.assistiveTextId},this.assistiveText),this.renderCheckbox())}render(){return this.legend?this.renderFieldset():this.renderCheckbox()}static get formAssociated(){return!0}};p.style=".ds-checkbox-fieldset{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox-fieldset__legend{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-checkbox-fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}.ds-checkbox{display:inline-flex;align-self:flex-start;align-items:center;flex-direction:row;flex-wrap:nowrap;text-wrap:wrap;word-wrap:break-word;word-break:break-all;white-space:normal;position:relative;cursor:pointer;user-select:none;width:auto;padding:var(--ds-spacing-xSmall)}.ds-checkbox--no-margin .ds-checkbox__input{margin-right:0}.ds-checkbox--disabled{color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__span--optional{color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-checkbox:has(.ds-checkbox__input:disabled){cursor:not-allowed}.ds-checkbox__input{cursor:pointer;-webkit-appearance:none;appearance:none;background-color:var(--ds-bgColor-white);margin:0;display:grid;place-content:center;height:24px;width:24px;flex-shrink:0;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-palette-black-50);}.ds-checkbox__input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-checkbox__input:hover,.ds-checkbox__input:active{border-color:var(--ds-borderColor-default)}.ds-checkbox__input:hover{background-color:var(--ds-bgColor-white-hover)}.ds-checkbox__input:active{background-color:var(--ds-bgColor-white-active)}.ds-checkbox__input:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}@media (forced-colors: active){.ds-checkbox__input:disabled{border-color:GrayText}}.ds-checkbox__input:checked,.ds-checkbox__input:indeterminate{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__input:checked:hover,.ds-checkbox__input:indeterminate:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-checkbox__input:checked:active,.ds-checkbox__input:indeterminate:active{background-color:var(--ds-bgColor-primary-active)}.ds-checkbox__input:checked:disabled,.ds-checkbox__input:indeterminate:disabled{background-color:var(--ds-bgColor-disabled-onLight)}.ds-checkbox__input:user-invalid,.ds-checkbox__input--invalid,.ds-checkbox__input--invalid:checked,.ds-checkbox__input--invalid:indeterminate{border-color:var(--ds-borderColor-danger)}.ds-checkbox__input:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__input::before{content:\"\";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__input:checked::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:checked:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>\")}.ds-checkbox__input:indeterminate::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:indeterminate:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>\")}.ds-checkbox-error{display:flex}.ds-checkbox-error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-xSmall)}";export{p as ds_checkbox}

package/dist/component-library/ds-link-with-arrow.entry.js

@@ -1 +1 @@
-import{r as i,a as t,h as r}from"./index-434995e1.js";import{c as e}from"./index-72ac5051.js";import{i as o}from"./attributes-7d09be1b.js";import{o as s,v as a}from"./linkUtils-3d1b28cf.js";import{g as n,i as d}from"./utils-5daa5bc0.js";const l=d("visually-hidden-assistive-text"),c=class{constructor(t){i(this,t)}inheritedAttributes={};icon="arrow_forward";rel;visuallyHiddenAssistiveTextId=l.next().value;get el(){return t(this)}text;iconPosition="start";href;target;language;ariaLabel;componentWillLoad(){this.inheritedAttributes=o(this.el,["aria-label"]),s(this.target)&&(this.icon="arrow_outward",this.rel="noopener noreferrer")}render(){const i=e("ds-link-with-arrow"),t=e("ds-link-with-arrow__icon",{"ds-link-with-arrow__icon--start":"start"===this.iconPosition,"ds-link-with-arrow__icon--end":"end"===this.iconPosition});return r("a",{key:"bce4a90f9cc5113ab3d5b300d791d2299e22b7ad",href:this.href,class:i,rel:this.rel,target:this.target,"aria-label":n(this.text,this.ariaLabel),...this.inheritedAttributes},r("slot",{key:"96ba4a33114443aab36d1301cf65c56437b9a85b",name:"iconStart"},"start"===this.iconPosition&&r("ds-icon",{key:"86d8029de69c1ecb3002a97f5bc0cdbf899b7f91",name:this.icon,class:t,size:"1.4em"})),this.text,r("slot",{key:"7c2dafaee60253b1f5c22819b1afec83d106234b",name:"iconStart"},"end"===this.iconPosition&&r("ds-icon",{key:"a9fb3e2ddee16cce7c6b8fc0fba0b11970567276",name:this.icon,class:t,size:"1.4em"})),s(this.target)&&r("ds-visually-hidden",{key:"f93f37d0d10d7a2d51980ff8feb76915cc4823b2",id:this.visuallyHiddenAssistiveTextId},a(this.language??document.documentElement.lang)))}};c.style=":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link-with-arrow{display:inline-flex;align-items:center;color:var(--ds-textColor-link);letter-spacing:var(--ds-letterSpacing-wide);font-weight:var(--ds-fontWeight-semibold);font-size:var(--ds-fontSize-16);text-decoration-line:none}.ds-link-with-arrow:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}@media (min-width: 30rem){.ds-link-with-arrow{font-size:var(--ds-fontSize-18)}}.ds-link-with-arrow__icon{display:inline-flex;width:2em;height:2em;line-height:0;align-items:center;justify-content:center;color:var(--ds-textColor-white);background-color:var(--ds-bgColor-primary)}.ds-link-with-arrow__icon--start{margin-right:var(--ds-spacing-xSmall)}.ds-link-with-arrow__icon--end{margin-left:var(--ds-spacing-xSmall)}:hover slot>.ds-link-with-arrow__icon{outline:10px solid;background-color:var(--ds-bgColor-primary-hover)}:active slot>.ds-link-with-arrow__icon{background-color:var(--ds-bgColor-primary-active)}.ds-link-with-arrow:hover,.ds-link-with-arrow:active{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link-with-arrow:hover{color:var(--ds-textColor-link-hover)}.ds-link-with-arrow:active,.ds-link-with-arrow:focus-visible{color:var(--ds-textColor-link-active)}";export{c as ds_link_with_arrow}
+import{r as i,a as t,h as r}from"./index-434995e1.js";import{c as e}from"./index-72ac5051.js";import{i as o,g as s,c as a}from"./utils-cfc536bc.js";import{o as n,v as d}from"./linkUtils-3d1b28cf.js";const l=a("visually-hidden-assistive-text"),c=class{constructor(t){i(this,t)}inheritedAttributes={};icon="arrow_forward";rel;visuallyHiddenAssistiveTextId=l.next().value;get el(){return t(this)}text;iconPosition="start";href;target;language;ariaLabel;componentWillLoad(){this.inheritedAttributes=o(this.el,["aria-label"]),n(this.target)&&(this.icon="arrow_outward",this.rel="noopener noreferrer")}render(){const i=e("ds-link-with-arrow"),t=e("ds-link-with-arrow__icon",{"ds-link-with-arrow__icon--start":"start"===this.iconPosition,"ds-link-with-arrow__icon--end":"end"===this.iconPosition});return r("a",{key:"bce4a90f9cc5113ab3d5b300d791d2299e22b7ad",href:this.href,class:i,rel:this.rel,target:this.target,"aria-label":s(this.text,this.ariaLabel),...this.inheritedAttributes},r("slot",{key:"96ba4a33114443aab36d1301cf65c56437b9a85b",name:"iconStart"},"start"===this.iconPosition&&r("ds-icon",{key:"86d8029de69c1ecb3002a97f5bc0cdbf899b7f91",name:this.icon,class:t,size:"1.4em"})),this.text,r("slot",{key:"7c2dafaee60253b1f5c22819b1afec83d106234b",name:"iconStart"},"end"===this.iconPosition&&r("ds-icon",{key:"a9fb3e2ddee16cce7c6b8fc0fba0b11970567276",name:this.icon,class:t,size:"1.4em"})),n(this.target)&&r("ds-visually-hidden",{key:"f93f37d0d10d7a2d51980ff8feb76915cc4823b2",id:this.visuallyHiddenAssistiveTextId},d(this.language??document.documentElement.lang)))}};c.style=":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link-with-arrow{display:inline-flex;align-items:center;color:var(--ds-textColor-link);letter-spacing:var(--ds-letterSpacing-wide);font-weight:var(--ds-fontWeight-semibold);font-size:var(--ds-fontSize-16);text-decoration-line:none}.ds-link-with-arrow:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}@media (min-width: 30rem){.ds-link-with-arrow{font-size:var(--ds-fontSize-18)}}.ds-link-with-arrow__icon{display:inline-flex;width:2em;height:2em;line-height:0;align-items:center;justify-content:center;color:var(--ds-textColor-white);background-color:var(--ds-bgColor-primary)}.ds-link-with-arrow__icon--start{margin-right:var(--ds-spacing-xSmall)}.ds-link-with-arrow__icon--end{margin-left:var(--ds-spacing-xSmall)}:hover slot>.ds-link-with-arrow__icon{outline:10px solid;background-color:var(--ds-bgColor-primary-hover)}:active slot>.ds-link-with-arrow__icon{background-color:var(--ds-bgColor-primary-active)}.ds-link-with-arrow:hover,.ds-link-with-arrow:active{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link-with-arrow:hover{color:var(--ds-textColor-link-hover)}.ds-link-with-arrow:active,.ds-link-with-arrow:focus-visible{color:var(--ds-textColor-link-active)}";export{c as ds_link_with_arrow}

package/dist/component-library/ds-link.entry.js

@@ -1 +1 @@
-import{r as i,a as e,h as t}from"./index-434995e1.js";import{c as s}from"./index-72ac5051.js";import{i as n}from"./attributes-7d09be1b.js";import{o,v as d}from"./linkUtils-3d1b28cf.js";import{g as l,i as a}from"./utils-5daa5bc0.js";const r=a("visually-hidden-assistive-text"),c=class{constructor(e){i(this,e)}inheritedAttributes={};rel;visuallyHiddenAssistiveTextId=r.next().value;get el(){return e(this)}text;size;variant="inline";weight="regular";icon="";iconPosition="end";iconTitle;iconHidden;href;target;download;language;ariaLabel;componentWillLoad(){this.inheritedAttributes=n(this.el,["aria-label"]),o(this.target)&&(this.icon="open_in_new",this.iconPosition="end",this.rel="noopener noreferrer")}render(){const i=s("ds-link",`ds-link--${this.weight}`,`ds-link--${this.variant}`,{[`ds-link--${this.size}`]:Boolean(this.size)}),e=s("ds-link__icon",{[`ds-link__icon--start-${this.variant}`]:"start"===this.iconPosition,[`ds-link__icon--end-${this.variant}`]:"end"===this.iconPosition});return t("a",{key:"f8e36a029709033379e53cc1c409bc9c0069820e",href:this.href,class:i,rel:this.rel,target:this.target,download:this.download,"aria-label":l(this.text,this.ariaLabel),...this.inheritedAttributes},t("slot",{key:"88f90209b6557942dd956585b5f77632aa647c8e",name:"iconStart"},this.icon&&"start"===this.iconPosition&&t("ds-icon",{key:"87169acfb32913d10d27b35a9c6f714385979aa7",name:this.icon,class:e,size:"1em",title:this.iconTitle,hidden:this.iconHidden})),this.text,t("slot",{key:"b38677240eb8bd7c1200c8dc08876ba75e7b3e81",name:"iconEnd"},this.icon&&"end"===this.iconPosition&&t("ds-icon",{key:"c3088e302a43b4cbc5601a9adff54a3dc27a59dc",name:this.icon,class:e,size:"1em",title:this.iconTitle,hidden:this.iconHidden})),o(this.target)&&t("ds-visually-hidden",{key:"25ac189fd216148a05fddfc6e384cfbde59e0e22",id:this.visuallyHiddenAssistiveTextId},d(this.language??document.documentElement.lang)))}};c.style=":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link{display:inline-flex;align-items:center;color:var(--ds-textColor-link);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-link--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-link--bold{font-weight:var(--ds-fontWeight-bold)}.ds-link--2xLarge{font-size:var(--ds-fontSize-22)}.ds-link--xLarge{font-size:var(--ds-fontSize-20)}.ds-link--large{font-size:var(--ds-fontSize-18)}.ds-link--medium{font-size:var(--ds-fontSize-16)}.ds-link--small{font-size:var(--ds-fontSize-14)}.ds-link--xSmall{font-size:var(--ds-fontSize-12)}.ds-link__icon{height:1em;width:1em}.ds-link__icon--start-inline{margin-right:var(--ds-spacing-3xSmall)}.ds-link__icon--start-standalone{margin-right:var(--ds-spacing-2xSmall)}.ds-link__icon--end-inline{margin-left:var(--ds-spacing-3xSmall)}.ds-link__icon--end-standalone{margin-left:var(--ds-spacing-2xSmall)}.ds-link:hover,.ds-link:active{text-decoration-thickness:13%;text-underline-offset:12%}.ds-link:hover{color:var(--ds-textColor-link-hover)}.ds-link:active{color:var(--ds-textColor-link-active)}.ds-link:visited{color:var(--ds-textColor-link-visited)}.ds-link--standalone{color:var(--ds-textColor-link);text-decoration-line:none}.ds-link--standalone:hover,.ds-link--standalone:active{text-decoration-line:underline}.ds-link--standalone:hover{color:var(--ds-textColor-link-hover)}.ds-link--standalone:active{color:var(--ds-textColor-link-active)}.ds-link--standalone:focus-visible{color:var(--ds-textColor-link)}.ds-link--standalone:visited{color:var(--ds-textColor-link)}";export{c as ds_link}
+import{r as i,a as e,h as t}from"./index-434995e1.js";import{c as s}from"./index-72ac5051.js";import{i as n,g as o,c as d}from"./utils-cfc536bc.js";import{o as l,v as a}from"./linkUtils-3d1b28cf.js";const r=d("visually-hidden-assistive-text"),c=class{constructor(e){i(this,e)}inheritedAttributes={};rel;visuallyHiddenAssistiveTextId=r.next().value;get el(){return e(this)}text;size;variant="inline";weight="regular";icon="";iconPosition="end";iconTitle;iconHidden;href;target;download;language;ariaLabel;componentWillLoad(){this.inheritedAttributes=n(this.el,["aria-label"]),l(this.target)&&(this.icon="open_in_new",this.iconPosition="end",this.rel="noopener noreferrer")}render(){const i=s("ds-link",`ds-link--${this.weight}`,`ds-link--${this.variant}`,{[`ds-link--${this.size}`]:Boolean(this.size)}),e=s("ds-link__icon",{[`ds-link__icon--start-${this.variant}`]:"start"===this.iconPosition,[`ds-link__icon--end-${this.variant}`]:"end"===this.iconPosition});return t("a",{key:"f8e36a029709033379e53cc1c409bc9c0069820e",href:this.href,class:i,rel:this.rel,target:this.target,download:this.download,"aria-label":o(this.text,this.ariaLabel),...this.inheritedAttributes},t("slot",{key:"88f90209b6557942dd956585b5f77632aa647c8e",name:"iconStart"},this.icon&&"start"===this.iconPosition&&t("ds-icon",{key:"87169acfb32913d10d27b35a9c6f714385979aa7",name:this.icon,class:e,size:"1em",title:this.iconTitle,hidden:this.iconHidden})),this.text,t("slot",{key:"b38677240eb8bd7c1200c8dc08876ba75e7b3e81",name:"iconEnd"},this.icon&&"end"===this.iconPosition&&t("ds-icon",{key:"c3088e302a43b4cbc5601a9adff54a3dc27a59dc",name:this.icon,class:e,size:"1em",title:this.iconTitle,hidden:this.iconHidden})),l(this.target)&&t("ds-visually-hidden",{key:"25ac189fd216148a05fddfc6e384cfbde59e0e22",id:this.visuallyHiddenAssistiveTextId},a(this.language??document.documentElement.lang)))}};c.style=":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:host{display:inline-block}.ds-link{display:inline-flex;align-items:center;color:var(--ds-textColor-link);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-link--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-link--bold{font-weight:var(--ds-fontWeight-bold)}.ds-link--2xLarge{font-size:var(--ds-fontSize-22)}.ds-link--xLarge{font-size:var(--ds-fontSize-20)}.ds-link--large{font-size:var(--ds-fontSize-18)}.ds-link--medium{font-size:var(--ds-fontSize-16)}.ds-link--small{font-size:var(--ds-fontSize-14)}.ds-link--xSmall{font-size:var(--ds-fontSize-12)}.ds-link__icon{height:1em;width:1em}.ds-link__icon--start-inline{margin-right:var(--ds-spacing-3xSmall)}.ds-link__icon--start-standalone{margin-right:var(--ds-spacing-2xSmall)}.ds-link__icon--end-inline{margin-left:var(--ds-spacing-3xSmall)}.ds-link__icon--end-standalone{margin-left:var(--ds-spacing-2xSmall)}.ds-link:hover,.ds-link:active{text-decoration-thickness:13%;text-underline-offset:12%}.ds-link:hover{color:var(--ds-textColor-link-hover)}.ds-link:active{color:var(--ds-textColor-link-active)}.ds-link:visited{color:var(--ds-textColor-link-visited)}.ds-link--standalone{color:var(--ds-textColor-link);text-decoration-line:none}.ds-link--standalone:hover,.ds-link--standalone:active{text-decoration-line:underline}.ds-link--standalone:hover{color:var(--ds-textColor-link-hover)}.ds-link--standalone:active{color:var(--ds-textColor-link-active)}.ds-link--standalone:focus-visible{color:var(--ds-textColor-link)}.ds-link--standalone:visited{color:var(--ds-textColor-link)}";export{c as ds_link}

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

@@ -1 +1 @@
-import{r as t,c as i,a as s,h as e,F as n}from"./index-434995e1.js";import{c as r}from"./index-72ac5051.js";import{g as a,a as d}from"./controlUtils-9ca4087b.js";import{i as o}from"./store-b8d17c10.js";import{g as c,i as l}from"./utils-5daa5bc0.js";const u={search:"search"},p={search:({clearButtonVisible:t})=>t?"cancel_fill":"",password:({passwordInputVisible:t})=>t?"visibility_off_fill":"visibility_fill"},h=l("ds-input"),x=class{constructor(s){t(this,s),this.clear=i(this,"clear",7),s.$hostElement$["s-ei"]?this.internals=s.$hostElement$["s-ei"]:(this.internals=s.$hostElement$.attachInternals(),s.$hostElement$["s-ei"]=this.internals)}suffixButtonElement;inputElement;assistiveTextId;visuallyHiddenAssistiveTextId;errorTextId;successTextId;hasPrefixSlot=!1;hasSuffixSlot=!1;get el(){return s(this)}internals;clear;label;placeholder;identifier=h.next().value;name;disabled;optional;required;readonly;value;min;max;maxlength;pattern;autocomplete;optionalText;errorText;successText;assistiveText;actionButtonAriaLabel;hiddenAssistiveText;prefixText;suffixText;icon="";type="text";ariaLabel;ariaLabelledBy;ariaDescribedby;hasFocus=!1;clearButtonVisible=!1;passwordInputVisible=!1;inputActive=!1;validationMessage;setIds=()=>{this.assistiveTextId=`${this.identifier}-assistive-text`,this.visuallyHiddenAssistiveTextId=`${this.identifier}-visually-hidden-assistive-text`,this.errorTextId=`${this.identifier}-error-text`,this.successTextId=`${this.identifier}-success-text`};getValidationMessage=()=>this.errorText||this.internals?.validationMessage||this.inputElement?.validationMessage;async togglePasswordVisibility(){return this.passwordInputVisible=!this.passwordInputVisible}async clearInput(){this.inputElement.value="",this.inputElement.focus(),this.clearButtonVisible=!1,this.clear.emit({id:this.identifier})}getLabelText=()=>this.required?a(this.label):this.optional?d(this.label,this.optionalText):this.label;componentWillLoad(){this.setIds(),this.hasPrefixSlot=!!this.el.querySelector('[slot="prefix"]'),this.hasSuffixSlot=!!this.el.querySelector('[slot="suffix"]'),(o("server")||this.errorText)&&(this.validationMessage=this.getValidationMessage())}handleInput=t=>{const i=t.target;this.clearButtonVisible=!!i.value,this.internals?.setFormValue(i.value),o("client")&&this.validationMessage&&(this.validationMessage=this.getValidationMessage())};handleBlur=()=>{this.hasFocus=!1,o("client")&&(this.validationMessage=this.getValidationMessage())};onActionButtonClicked=t=>{switch(t.stopPropagation(),this.type){case"password":return this.togglePasswordVisibility();case"search":this.clearInput();default:return}};renderPrefixContent(){if(this.hasPrefixSlot)return e("slot",{name:"prefix"});if(this.prefixText)return e("slot",{name:"prefix"},e("span",{class:"prefix"},this.prefixText));const t=this.icon||u[this.type];return t?e("slot",{name:"prefix"},e("ds-icon",{class:"prefix",name:t})):null}renderSuffixContent(){if(this.hasSuffixSlot)return e("slot",{name:"suffix"});if(this.suffixText)return e("slot",{name:"suffix"},e("span",{class:"suffix"},this.suffixText));const t=p[this.type]?.(this)??"";return t?e("slot",{name:"suffix"},e("ds-button",{ref:t=>this.suffixButtonElement=t,variant:"supplementary",colour:"black",class:"suffix",disabled:!1,icon:t,onClick:this.onActionButtonClicked,"aria-pressed":"password"===this.type?this.passwordInputVisible:void 0,"aria-label":this.actionButtonAriaLabel})):null}handleInputContainerClick(t){t.target!==this.suffixButtonElement&&this.inputElement.focus()}render(){const t="password"===this.type&&this.passwordInputVisible?"text":this.type;return e(n,{key:"efb783f742bb82b01fd6807a628eb693666a819b"},e("div",{key:"dde260b136af4b68de1fa15928529f5e57f54c3a",class:"ds-input--label-container"},e("slot",{key:"e7ba428a8b8202c9b3e4d9a9c6d4257b0b48d83a",name:"label"},e("label",{key:"1f28c5fd53249068de50c6d0ea0aa88ccf65a1ec",htmlFor:this.identifier},this.getLabelText())),e("slot",{key:"e3c1ea925cfc7f9599ee651da0aeaab98fa806bb",name:"help-text"},e("small",{key:"671ab99029e2775d964feb012beb8a20912be5e3",id:this.assistiveTextId},this.assistiveText),e("ds-visually-hidden",{key:"8eb744be9b95ddceb1dd5bed0274d29a26e7ec1d",id:this.visuallyHiddenAssistiveTextId},this.hiddenAssistiveText))),e("div",{key:"b7fa7067a52d176b810eb88777423adf50dfd8b9",onMouseDown:()=>this.inputActive=!0,onMouseUp:()=>this.inputActive=!1,onClick:t=>this.handleInputContainerClick(t),class:r("ds-input--container",{disabled:this.disabled,readonly:this.readonly,valid:!!this.successText,invalid:!!this.errorText,focus:this.hasFocus,active:!!this.inputActive})},this.renderPrefixContent(),e("input",{key:"f619722a0c088fbd99d851b4cc49a220538da0ae",ref:t=>this.inputElement=t,id:this.identifier,name:this.name,"aria-label":c(this.label,this.ariaLabel),"aria-labelledby":this.ariaLabelledBy,"aria-describedby":this.ariaDescribedby||r(this.assistiveTextId,this.visuallyHiddenAssistiveTextId,{[this.errorTextId]:Boolean(this.validationMessage),[this.successTextId]:Boolean(this.successText)}),"aria-invalid":Boolean(this.validationMessage)?"true":"false",disabled:this.disabled,required:this.required,readonly:this.readonly,value:this.value,type:t,min:this.min,max:this.max,maxlength:this.maxlength,pattern:this.pattern,placeholder:this.placeholder,autocomplete:this.autocomplete,onInput:this.handleInput,onFocus:()=>this.hasFocus=!0,onBlur:this.handleBlur}),this.renderSuffixContent()),e("slot",{key:"b70c638ad0de13e0bfa1c2f0ec366e748ab8e4e2",name:"input-validity"},e("ds-input-validity",{key:"7c1da6ba8d42add8de43f4926c24c8a64bbe32e2",id:this.errorTextId,text:this.validationMessage,type:"error",role:"alert"}),e("ds-input-validity",{key:"46258021c17e3461ea4a0c2ae720fb44305550c5",id:this.successTextId,text:this.successText,type:"success",role:"status"})))}static get formAssociated(){return!0}};x.style=".sc-ds-text-input:root{--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{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-textColor-default)}.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-textColor-secondary)}.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-borderColor-default);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-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-input--container.sc-ds-text-input:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-input--container.invalid.sc-ds-text-input{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-input--container.invalid.sc-ds-text-input:hover:not(.ds-input--container.invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-input--container.invalid.active.sc-ds-text-input{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-input--container.valid.sc-ds-text-input{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-input--container.valid.sc-ds-text-input:hover:not(.ds-input--container.valid:focus-within){background-color:var(--ds-bgColor-success-hover);border-color:var(--ds-borderColor-success)}.ds-input--container.valid.active.sc-ds-text-input{background-color:var(--ds-bgColor-success-active);border-color:var(--ds-borderColor-success)}.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.disabled.sc-ds-text-input{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.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:readonly){border-color:var(--ds-borderColor-default)}.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-borderColor-default);background-color:var(--ds-bgColor-white-active)}.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-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.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-borderColor-primary)}.ds-input--container.sc-ds-text-input:focus-within *.sc-ds-text-input>ds-button.suffix.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-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-textColor-default);border:none;padding-block:var(--ds-spacing-4xSmall)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-textColor-disabled-onLight)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.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-textColor-secondary)}.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{-moz-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{-webkit-appearance:none;margin:0}.ds-input--container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input--container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input>input.sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input--container.sc-ds-text-input:has(ds-button.suffix){padding-inline-end:unset}.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-icon.prefix.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-textColor-default)}.ds-input--container.sc-ds-text-input ds-button.suffix.sc-ds-text-input{margin-top:calc(var(--ds-spacing-3xSmall) * -1);margin-right:calc(var(--ds-spacing-4xSmall) * -1);max-height:40px}.error-text--container.sc-ds-text-input,.success-text--container.sc-ds-text-input{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.error-text--container.sc-ds-text-input ds-icon.sc-ds-text-input,.success-text--container.sc-ds-text-input ds-icon.sc-ds-text-input{display:block;height:1.5rem}.error-text--container.sc-ds-text-input small.sc-ds-text-input,.success-text--container.sc-ds-text-input small.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)}.error-text--container.sc-ds-text-input{color:var(--ds-textColor-danger)}.success-text--container.sc-ds-text-input{color:var(--ds-textColor-success)}";export{x as ds_text_input}
+import{r as t,c as i,a as s,h as e,F as n}from"./index-434995e1.js";import{c as r}from"./index-72ac5051.js";import{g as a,a as o}from"./controlUtils-9ca4087b.js";import{i as d}from"./store-b8d17c10.js";import{b as c,g as l,c as u}from"./utils-cfc536bc.js";const p={search:"search"},h={search:({clearButtonVisible:t})=>t?"cancel_fill":"",password:({passwordInputVisible:t})=>t?"visibility_off_fill":"visibility_fill"},x=u("ds-input"),b=class{constructor(s){t(this,s),this.clear=i(this,"clear",7),s.$hostElement$["s-ei"]?this.internals=s.$hostElement$["s-ei"]:(this.internals=s.$hostElement$.attachInternals(),s.$hostElement$["s-ei"]=this.internals)}inheritedAttributes={};suffixButtonElement;inputElement;assistiveTextId;visuallyHiddenAssistiveTextId;errorTextId;successTextId;hasPrefixSlot=!1;hasSuffixSlot=!1;get el(){return s(this)}internals;clear;label;placeholder;identifier=x.next().value;name;disabled;optional;required;readonly;value;min;max;maxlength;pattern;autocomplete;optionalText;errorText;successText;assistiveText;actionButtonAriaLabel;hiddenAssistiveText;prefixText;suffixText;icon="";type="text";ariaLabel;ariaLabelledby;ariaDescribedby;hasFocus=!1;clearButtonVisible=!1;passwordInputVisible=!1;inputActive=!1;validationMessage;setIds=()=>{this.assistiveTextId=`${this.identifier}-assistive-text`,this.visuallyHiddenAssistiveTextId=`${this.identifier}-visually-hidden-assistive-text`,this.errorTextId=`${this.identifier}-error-text`,this.successTextId=`${this.identifier}-success-text`};getValidationMessage=()=>this.errorText||this.internals?.validationMessage||this.inputElement?.validationMessage;async togglePasswordVisibility(){return this.passwordInputVisible=!this.passwordInputVisible}async clearInput(){this.inputElement.value="",this.inputElement.focus(),this.clearButtonVisible=!1,this.clear.emit({id:this.identifier})}getLabelText=()=>this.required?a(this.label):this.optional?o(this.label,this.optionalText):this.label;componentWillLoad(){this.inheritedAttributes={...c(this,this.el)},this.setIds(),this.hasPrefixSlot=!!this.el.querySelector('[slot="prefix"]'),this.hasSuffixSlot=!!this.el.querySelector('[slot="suffix"]'),(d("server")||this.errorText)&&(this.validationMessage=this.getValidationMessage())}handleInput=t=>{const i=t.target;this.clearButtonVisible=!!i.value,this.internals?.setFormValue(i.value),d("client")&&this.validationMessage&&(this.validationMessage=this.getValidationMessage())};handleBlur=()=>{this.hasFocus=!1,d("client")&&(this.validationMessage=this.getValidationMessage())};onActionButtonClicked=t=>{switch(t.stopPropagation(),this.type){case"password":return this.togglePasswordVisibility();case"search":this.clearInput();default:return}};renderPrefixContent(){if(this.hasPrefixSlot)return e("slot",{name:"prefix"});if(this.prefixText)return e("slot",{name:"prefix"},e("span",{class:"prefix"},this.prefixText));const t=this.icon||p[this.type];return t?e("slot",{name:"prefix"},e("ds-icon",{class:"prefix",name:t})):null}renderSuffixContent(){if(this.hasSuffixSlot)return e("slot",{name:"suffix"});if(this.suffixText)return e("slot",{name:"suffix"},e("span",{class:"suffix"},this.suffixText));const t=h[this.type]?.(this)??"";return t?e("slot",{name:"suffix"},e("ds-button",{ref:t=>this.suffixButtonElement=t,variant:"supplementary",colour:"black",class:"suffix",disabled:!1,icon:t,onClick:this.onActionButtonClicked,"aria-pressed":"password"===this.type?this.passwordInputVisible:void 0,"aria-label":this.actionButtonAriaLabel})):null}handleInputContainerClick(t){t.target!==this.suffixButtonElement&&this.inputElement.focus()}render(){const t="password"===this.type&&this.passwordInputVisible?"text":this.type;return e(n,{key:"6b5cc3e8f7fe00df47392eade88010d1f9faf7e1"},e("div",{key:"c5e72b94f444c3923a3d72fb08615a97a9a174c2",class:"ds-input--label-container"},e("slot",{key:"a27efdf7b2311fdf310ce5340adccac015c906b1",name:"label"},e("label",{key:"3a0241a9c572eb4403c5d46eb6761b5121726bf9",htmlFor:this.identifier},this.getLabelText())),e("slot",{key:"8ffec65634da10f44ea145d1efec86147c6dc296",name:"help-text"},e("small",{key:"a45d970a13bae23f2f488a969ee9184cc521680e",id:this.assistiveTextId},this.assistiveText),e("ds-visually-hidden",{key:"abea8540ddeed9f797cd28c63aabbc734b7bf083",id:this.visuallyHiddenAssistiveTextId},this.hiddenAssistiveText))),e("div",{key:"9f162c62ee86782abb60344074544feb643c3c8b",onMouseDown:()=>this.inputActive=!0,onMouseUp:()=>this.inputActive=!1,onClick:t=>this.handleInputContainerClick(t),class:r("ds-input--container",{disabled:this.disabled,readonly:this.readonly,valid:!!this.successText,invalid:!!this.validationMessage,focus:this.hasFocus,active:!!this.inputActive})},this.renderPrefixContent(),e("input",{key:"1c7c944a70012444caa83f7f0104f6e1992d3acb",ref:t=>this.inputElement=t,id:this.identifier,name:this.name,"aria-label":l(this.label,this.ariaLabel),"aria-labelledby":this.ariaLabelledby,"aria-describedby":this.ariaDescribedby||r(this.assistiveTextId,this.visuallyHiddenAssistiveTextId,{[this.errorTextId]:Boolean(this.validationMessage),[this.successTextId]:Boolean(this.successText)}),"aria-invalid":Boolean(this.validationMessage)?"true":"false",disabled:this.disabled,required:this.required,readonly:this.readonly,value:this.value,type:t,min:this.min,max:this.max,maxlength:this.maxlength,pattern:this.pattern,placeholder:this.placeholder,autocomplete:this.autocomplete,onInput:this.handleInput,onFocus:()=>this.hasFocus=!0,onBlur:this.handleBlur,...this.inheritedAttributes}),this.renderSuffixContent()),e("slot",{key:"bdc4bbc3a0abe3668bcf18f719d50974ad12e1c4",name:"input-validity"},e("ds-input-validity",{key:"a392691fed93056f22673e5d20c6c4c099481181",id:this.errorTextId,text:this.validationMessage,type:"error",role:"alert"}),e("ds-input-validity",{key:"7e3b45928cdefed2c65b8c50fb4245527bae758e",id:this.successTextId,text:this.successText,type:"success",role:"status"})))}static get formAssociated(){return!0}};b.style=".sc-ds-text-input:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.no-style-leak.sc-ds-text-input *.sc-ds-text-input,.sc-ds-text-input-h *.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-textColor-default)}.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-textColor-secondary)}.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-borderColor-default);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-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-input--container.sc-ds-text-input:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-input--container.invalid.sc-ds-text-input{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-input--container.invalid.sc-ds-text-input:hover:not(.ds-input--container.invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-input--container.invalid.active.sc-ds-text-input{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-input--container.valid.sc-ds-text-input{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-input--container.valid.sc-ds-text-input:hover:not(.ds-input--container.valid:focus-within){background-color:var(--ds-bgColor-success-hover);border-color:var(--ds-borderColor-success)}.ds-input--container.valid.active.sc-ds-text-input{background-color:var(--ds-bgColor-success-active);border-color:var(--ds-borderColor-success)}.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.disabled.sc-ds-text-input{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.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:readonly){border-color:var(--ds-borderColor-default)}.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-borderColor-default);background-color:var(--ds-bgColor-white-active)}.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-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.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-borderColor-primary)}.ds-input--container.sc-ds-text-input:focus-within *.sc-ds-text-input>ds-button.suffix.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-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-textColor-default);border:none;padding-block:var(--ds-spacing-4xSmall)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-textColor-disabled-onLight)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.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-textColor-secondary)}.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{-moz-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{-webkit-appearance:none;margin:0}.ds-input--container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input--container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input>input.sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input--container.sc-ds-text-input:has(ds-button.suffix){padding-inline-end:unset}.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-icon.prefix.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-textColor-default)}.ds-input--container.sc-ds-text-input ds-button.suffix.sc-ds-text-input{margin-top:calc(var(--ds-spacing-3xSmall) * -1);margin-right:calc(var(--ds-spacing-4xSmall) * -1);max-height:40px}.error-text--container.sc-ds-text-input,.success-text--container.sc-ds-text-input{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.error-text--container.sc-ds-text-input ds-icon.sc-ds-text-input,.success-text--container.sc-ds-text-input ds-icon.sc-ds-text-input{display:block;height:1.5rem}.error-text--container.sc-ds-text-input small.sc-ds-text-input,.success-text--container.sc-ds-text-input small.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)}.error-text--container.sc-ds-text-input{color:var(--ds-textColor-danger)}.success-text--container.sc-ds-text-input{color:var(--ds-textColor-success)}";export{b as ds_text_input}

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

@@ -1 +1 @@
-import{r as e,h as t}from"./index-434995e1.js";const s=class{constructor(t){e(this,t)}render(){return t("slot",{key:"083eaed9210a85360479b367769c8904a6089f64"})}};s.style=":host{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}
+import{r as e,h as s}from"./index-434995e1.js";const i=class{constructor(s){e(this,s)}render(){return s("div",{key:"f488f0f134c76c308763d47c57360e54ae299a06",class:"ds-visually-hidden"},s("slot",{key:"20d5cdef8c333e5421c670e2558b511b1f235e7f"}))}};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}

package/dist/component-library/{attributes-7d09be1b.js → utils-cfc536bc.js}

@@ -1 +1 @@
-const a=(a,r=[])=>{const i={};return r.forEach((r=>{a.hasAttribute(r)&&(null!==a.getAttribute(r)&&(i[r]=a.getAttribute(r)),a.removeAttribute(r))})),i},r=["role","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-errormessage","aria-expanded","aria-flowto","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext"],i=(i,e)=>{let l=[...r];return e&&e.length>0&&(l=l.filter((a=>!e.includes(a)))),a(i,l)};export{a,i}
+const a=(a,r=[])=>{const i={};return r.forEach((r=>{a.hasAttribute(r)&&(null!==a.getAttribute(r)&&(i[r]=a.getAttribute(r)),a.removeAttribute(r))})),i},r=["role","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-errormessage","aria-expanded","aria-flowto","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext"],i=(i,e)=>{let t=[...r];return e&&e.length>0&&(t=t.filter((a=>!e.includes(a)))),a(i,t)},e=(a,i)=>{const e=new Set(["class","style",...r]),t=new Set(Object.keys(a)),l={};for(const a of i.attributes)t.has(a.name.replace(/-./g,(a=>a[1].toUpperCase())))||e.has(a.name)||(l[a.name]=a.value);return l},t=a=>{const r=parseFloat(a);return(i=""+16*r).endsWith("px")?i:`${i}px`;var i};function*l(a){let r=1;for(;;)yield`${a}-${r++}`}const o=(a,r)=>{if(r)return r.startsWith(a)?r:[a,r].join(" ")};export{a,e as b,l as c,o as g,i,t as r}

package/dist/components/attributes.js

@@ -1,4 +1,5 @@
-const inheritAttributes = (el, attributes = []) => {
+const kebabToCamelCase = (str) => str.replace(/-./g, x => x[1].toUpperCase());
+const inheritSpecifiedAttributes = (el, attributes = []) => {
     const attributeObject = {};
     attributes.forEach(attr => {
         if (el.hasAttribute(attr)) {
@@ -69,7 +70,18 @@ const inheritAriaAttributes = (el, ignoreList) => {
     if (ignoreList && ignoreList.length > 0) {
         attributesToInherit = attributesToInherit.filter(attr => !ignoreList.includes(attr));
     }
-    return inheritAttributes(el, attributesToInherit);
+    return inheritSpecifiedAttributes(el, attributesToInherit);
+};
+const inheritAttributes = (component, elem) => {
+    const attributesToIgnore = new Set(['class', 'style', ...ariaAttributes]);
+    const propsToIgnore = new Set(Object.keys(component));
+    const attributes = {};
+    for (const attr of elem.attributes) {
+        if (!propsToIgnore.has(kebabToCamelCase(attr.name)) && !attributesToIgnore.has(attr.name)) {
+            attributes[attr.name] = attr.value;
+        }
+    }
+    return attributes;
 };
 
-export { inheritAttributes as a, inheritAriaAttributes as i };
+export { inheritSpecifiedAttributes as a, inheritAttributes as b, inheritAriaAttributes as i };

package/dist/components/ds-button2.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, h } from './index2.js';
 import { c as classNames } from './index3.js';
-import { i as inheritAriaAttributes, a as inheritAttributes } from './attributes.js';
+import { i as inheritAriaAttributes, a as inheritSpecifiedAttributes, b as inheritAttributes } from './attributes.js';
 import { d as defineCustomElement$1 } from './ds-icon2.js';
 
-const dsButtonCss = ".sc-ds-button-h{display:inline-block}[full-width].sc-ds-button-h{width:100%}.ds-button.sc-ds-button{width:100%;align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-bold);outline:4px solid transparent;justify-content:center}.ds-button.sc-ds-button .button-value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button ds-icon.sc-ds-button{height:1.5rem}.ds-button.icon-start.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button.icon-end.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button:not(.small):not(.secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - 0px)}.ds-button.sc-ds-button:not(.small).secondary{border-width:var(--ds-borderWidth-thick);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - var(--ds-borderWidth-thick))}.ds-button.sc-ds-button:not(.small).icon-only{padding-left:0;padding-right:0}.ds-button.small.sc-ds-button:not(.secondary){border-width:0px;font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - 0px)}.ds-button.small.secondary.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - var(--ds-borderWidth-thin))}.ds-button.small.icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button.small.sc-ds-button ds-icon.sc-ds-button{height:1rem}.ds-button.primary.blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button.primary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button.primary.blue.sc-ds-button:active,.ds-button.primary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}.ds-button.primary.blue[aria-disabled=true].sc-ds-button,.ds-button.primary.blue.disabled.sc-ds-button,.ds-button.primary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.primary.black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button.primary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button.primary.black.sc-ds-button:active,.ds-button.primary.black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}.ds-button.primary.black[aria-disabled=true].sc-ds-button,.ds-button.primary.black.disabled.sc-ds-button,.ds-button.primary.black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.primary.white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button.primary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button.primary.white.sc-ds-button:active,.ds-button.primary.white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}.ds-button.primary.white[aria-disabled=true].sc-ds-button,.ds-button.primary.white.disabled.sc-ds-button,.ds-button.primary.white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button.secondary.blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button.secondary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button.secondary.blue.sc-ds-button:active,.ds-button.secondary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button.secondary.blue[aria-disabled=true].sc-ds-button,.ds-button.secondary.blue.disabled.sc-ds-button,.ds-button.secondary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button.secondary.black.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button.secondary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button.secondary.black.sc-ds-button:active,.ds-button.secondary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button.secondary.black[aria-disabled=true].sc-ds-button,.ds-button.secondary.black.disabled.sc-ds-button,.ds-button.secondary.black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button.secondary.white.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button.secondary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button.secondary.white.sc-ds-button:active,.ds-button.secondary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button.secondary.white[aria-disabled=true].sc-ds-button,.ds-button.secondary.white.disabled.sc-ds-button,.ds-button.secondary.white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button.supplementary.blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-primary)}.ds-button.supplementary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button.supplementary.blue.sc-ds-button:active,.ds-button.supplementary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button.supplementary.blue.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.blue.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.blue[aria-disabled=true].sc-ds-button,.ds-button.supplementary.blue.disabled.sc-ds-button,.ds-button.supplementary.blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.supplementary.black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-default)}.ds-button.supplementary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button.supplementary.black.sc-ds-button:active,.ds-button.supplementary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button.supplementary.black.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.black.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.black[aria-disabled=true].sc-ds-button,.ds-button.supplementary.black.disabled.sc-ds-button,.ds-button.supplementary.black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.supplementary.white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-white)}.ds-button.supplementary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button.supplementary.white.sc-ds-button:active,.ds-button.supplementary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button.supplementary.white.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.white.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.white[aria-disabled=true].sc-ds-button,.ds-button.supplementary.white.disabled.sc-ds-button,.ds-button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button.icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}";
+const dsButtonCss = ".no-style-leak.sc-ds-button *.sc-ds-button,.sc-ds-button-h *.sc-ds-button{all:unset;box-sizing:border-box;display:block}.sc-ds-button-h{display:inline-block}[full-width].sc-ds-button-h{width:100%}.ds-button.sc-ds-button{width:100%;align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-bold);outline:4px solid transparent;justify-content:center}.ds-button.sc-ds-button .button-value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button ds-icon.sc-ds-button{height:1.5rem}.ds-button.icon-start.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button.icon-end.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button:not(.small):not(.secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - 0px)}.ds-button.sc-ds-button:not(.small).secondary{border-width:var(--ds-borderWidth-thick);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - var(--ds-borderWidth-thick))}.ds-button.sc-ds-button:not(.small).icon-only{padding-left:0;padding-right:0}.ds-button.small.sc-ds-button:not(.secondary){border-width:0px;font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - 0px)}.ds-button.small.secondary.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - var(--ds-borderWidth-thin))}.ds-button.small.icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button.small.sc-ds-button ds-icon.sc-ds-button{height:1rem}.ds-button.primary.blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button.primary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button.primary.blue.sc-ds-button:active,.ds-button.primary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}.ds-button.primary.blue[aria-disabled=true].sc-ds-button,.ds-button.primary.blue.disabled.sc-ds-button,.ds-button.primary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.primary.black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button.primary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button.primary.black.sc-ds-button:active,.ds-button.primary.black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}.ds-button.primary.black[aria-disabled=true].sc-ds-button,.ds-button.primary.black.disabled.sc-ds-button,.ds-button.primary.black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.primary.white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button.primary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button.primary.white.sc-ds-button:active,.ds-button.primary.white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}.ds-button.primary.white[aria-disabled=true].sc-ds-button,.ds-button.primary.white.disabled.sc-ds-button,.ds-button.primary.white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button.secondary.blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button.secondary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button.secondary.blue.sc-ds-button:active,.ds-button.secondary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button.secondary.blue[aria-disabled=true].sc-ds-button,.ds-button.secondary.blue.disabled.sc-ds-button,.ds-button.secondary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button.secondary.black.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button.secondary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button.secondary.black.sc-ds-button:active,.ds-button.secondary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button.secondary.black[aria-disabled=true].sc-ds-button,.ds-button.secondary.black.disabled.sc-ds-button,.ds-button.secondary.black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button.secondary.white.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button.secondary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button.secondary.white.sc-ds-button:active,.ds-button.secondary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button.secondary.white[aria-disabled=true].sc-ds-button,.ds-button.secondary.white.disabled.sc-ds-button,.ds-button.secondary.white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button.supplementary.blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-primary)}.ds-button.supplementary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button.supplementary.blue.sc-ds-button:active,.ds-button.supplementary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button.supplementary.blue.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.blue.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.blue[aria-disabled=true].sc-ds-button,.ds-button.supplementary.blue.disabled.sc-ds-button,.ds-button.supplementary.blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.supplementary.black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-default)}.ds-button.supplementary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button.supplementary.black.sc-ds-button:active,.ds-button.supplementary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button.supplementary.black.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.black.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.black[aria-disabled=true].sc-ds-button,.ds-button.supplementary.black.disabled.sc-ds-button,.ds-button.supplementary.black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.supplementary.white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-white)}.ds-button.supplementary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button.supplementary.white.sc-ds-button:active,.ds-button.supplementary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button.supplementary.white.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.white.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.white[aria-disabled=true].sc-ds-button,.ds-button.supplementary.white.disabled.sc-ds-button,.ds-button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button.icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}";
 const DsButtonStyle0 = dsButtonCss;
 
 const DsButton = proxyCustomElement(class DsButton extends H {
@@ -29,7 +29,7 @@ const DsButton = proxyCustomElement(class DsButton extends H {
     componentWillLoad() {
         this.inheritedAttributes = {
             ...inheritAriaAttributes(this.el, ['aria-disabled']),
-            ...inheritAttributes(this.el, [
+            ...inheritSpecifiedAttributes(this.el, [
                 'autofocus',
                 'form',
                 'formaction',
@@ -41,6 +41,7 @@ const DsButton = proxyCustomElement(class DsButton extends H {
                 'popovertarget',
                 'popovertargetaction',
             ]),
+            ...inheritAttributes(this, this.el),
         };
     }
     handleKeyDown = (event) => {
@@ -74,7 +75,7 @@ const DsButton = proxyCustomElement(class DsButton extends H {
         });
         const iconSize = this.size === 'small' ? '1rem' : undefined;
         const isDisabled = this.disabled || this.ariaDisabled === 'true';
-        return (h("button", { key: '50633fbf3df7aeb84c2631dd7b8eb7a1f83cbc29', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false', ...this.inheritedAttributes }, h("slot", { key: 'aea86ce3195d3fa5344dfbf2048bc4db7882286b', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '38b833cbc1585a7cf0918dec9b2b2a0f62cc6fe2', name: this.icon, size: iconSize })), this.value && h("span", { key: '430bd3e7e54558706bcd8b2cc9fda5d0cc04667c', class: "button-value" }, this.value), h("slot", { key: '9c3d1b19e8c96afb9a6bc380fcd0dd04d9ed411e', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: 'dcb2076975dd8648db795c3629cc12c79d4e7d70', name: this.icon, size: iconSize }))));
+        return (h("button", { key: 'a88d1c763917de40eeaefc79cadace3a107a761e', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false', ...this.inheritedAttributes }, h("slot", { key: '5a576ddabcd8be9957832560a1503ffc9b0a4b4c', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '44506977ee4a8e0d2044efa9c4e66f52e901c98c', name: this.icon, size: iconSize })), this.value && h("span", { key: '0a2a0ff071b51cfb9df7f4bc27b1ea6469f3a47e', class: "button-value" }, this.value), h("slot", { key: '757002ca6ed2f98f692b8f5b630ecfd0f6e83f5c', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '2605d1808580c30f68717660a516d07fe8fcfc59', name: this.icon, size: iconSize }))));
     }
     static get style() { return DsButtonStyle0; }
 }, [6, "ds-button", {

package/dist/components/ds-checkbox2.js

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment } from './index2.js';
 import { c as classNames } from './index3.js';
-import { i as inheritAriaAttributes } from './attributes.js';
+import { i as inheritAriaAttributes, b as inheritAttributes } from './attributes.js';
 import { g as getRequiredText, a as getOptionalText } from './controlUtils.js';
 import { i as isValidation } from './store.js';
 import { g as getAriaLabel, i as idGenerator, d as defineCustomElement$2 } from './ds-icon2.js';
 import { d as defineCustomElement$1 } from './ds-input-validity2.js';
 
-const dsCheckboxCss = ".ds-checkbox-fieldset{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox-fieldset__legend{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-checkbox-fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}.ds-checkbox{display:inline-flex;align-self:flex-start;align-items:center;flex-direction:row;flex-wrap:nowrap;text-wrap:wrap;position:relative;cursor:pointer;user-select:none;width:auto;padding:var(--ds-spacing-xSmall)}.ds-checkbox--no-margin .ds-checkbox__input{margin-right:0}.ds-checkbox--disabled{color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__span--optional{color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-checkbox:has(.ds-checkbox__input:disabled){cursor:not-allowed}.ds-checkbox__input{cursor:pointer;-webkit-appearance:none;appearance:none;background-color:var(--ds-bgColor-white);margin:0;display:grid;place-content:center;height:24px;width:24px;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-palette-black-50);}.ds-checkbox__input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-checkbox__input:hover,.ds-checkbox__input:active{border-color:var(--ds-borderColor-default)}.ds-checkbox__input:hover{background-color:var(--ds-bgColor-white-hover)}.ds-checkbox__input:active{background-color:var(--ds-bgColor-white-active)}.ds-checkbox__input:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}@media (forced-colors: active){.ds-checkbox__input:disabled{border-color:GrayText}}.ds-checkbox__input:checked,.ds-checkbox__input:indeterminate{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__input:checked:hover,.ds-checkbox__input:indeterminate:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-checkbox__input:checked:active,.ds-checkbox__input:indeterminate:active{background-color:var(--ds-bgColor-primary-active)}.ds-checkbox__input:checked:disabled,.ds-checkbox__input:indeterminate:disabled{background-color:var(--ds-bgColor-disabled-onLight)}.ds-checkbox__input:user-invalid,.ds-checkbox__input--invalid,.ds-checkbox__input--invalid:checked,.ds-checkbox__input--invalid:indeterminate{border-color:var(--ds-borderColor-danger)}.ds-checkbox__input:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__input::before{content:\"\";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__input:checked::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:checked:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>\")}.ds-checkbox__input:indeterminate::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:indeterminate:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>\")}.ds-checkbox-error{display:flex}.ds-checkbox-error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-xSmall)}";
+const dsCheckboxCss = ".ds-checkbox-fieldset{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox-fieldset__legend{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-checkbox-fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}.ds-checkbox{display:inline-flex;align-self:flex-start;align-items:center;flex-direction:row;flex-wrap:nowrap;text-wrap:wrap;word-wrap:break-word;word-break:break-all;white-space:normal;position:relative;cursor:pointer;user-select:none;width:auto;padding:var(--ds-spacing-xSmall)}.ds-checkbox--no-margin .ds-checkbox__input{margin-right:0}.ds-checkbox--disabled{color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__span--optional{color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-checkbox:has(.ds-checkbox__input:disabled){cursor:not-allowed}.ds-checkbox__input{cursor:pointer;-webkit-appearance:none;appearance:none;background-color:var(--ds-bgColor-white);margin:0;display:grid;place-content:center;height:24px;width:24px;flex-shrink:0;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-palette-black-50);}.ds-checkbox__input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-checkbox__input:hover,.ds-checkbox__input:active{border-color:var(--ds-borderColor-default)}.ds-checkbox__input:hover{background-color:var(--ds-bgColor-white-hover)}.ds-checkbox__input:active{background-color:var(--ds-bgColor-white-active)}.ds-checkbox__input:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}@media (forced-colors: active){.ds-checkbox__input:disabled{border-color:GrayText}}.ds-checkbox__input:checked,.ds-checkbox__input:indeterminate{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__input:checked:hover,.ds-checkbox__input:indeterminate:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-checkbox__input:checked:active,.ds-checkbox__input:indeterminate:active{background-color:var(--ds-bgColor-primary-active)}.ds-checkbox__input:checked:disabled,.ds-checkbox__input:indeterminate:disabled{background-color:var(--ds-bgColor-disabled-onLight)}.ds-checkbox__input:user-invalid,.ds-checkbox__input--invalid,.ds-checkbox__input--invalid:checked,.ds-checkbox__input--invalid:indeterminate{border-color:var(--ds-borderColor-danger)}.ds-checkbox__input:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__input::before{content:\"\";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__input:checked::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:checked:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>\")}.ds-checkbox__input:indeterminate::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:indeterminate:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>\")}.ds-checkbox-error{display:flex}.ds-checkbox-error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-xSmall)}";
 const DsCheckboxStyle0 = dsCheckboxCss;
 
 const checkboxIdGenerator = idGenerator('ds-checkbox');
@@ -88,7 +88,10 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
     componentWillLoad() {
         this.setInitialState();
         this.setIds();
-        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden', 'aria-invalid']);
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden', 'aria-invalid']),
+            ...inheritAttributes(this, this.el),
+        };
         if (isValidation('server') || this.errorText) {
             this.validationMessage = this.getValidationMessage();
         }

package/dist/components/ds-icon2.js

@@ -84,6 +84,8 @@ const ZoomOutIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="
 
 const SearchIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M795-93 526-361q-29 22.92-68.46 35.96Q418.08-312 372-312q-115.16 0-195.08-80Q97-472 97-585t80-193q80-80 193.5-80t193 80Q643-698 643-584.85q0 44.85-12.5 83.35Q618-463 593-429l270 268-68 68ZM371.35-406q74.9 0 126.28-52.25Q549-510.5 549-585t-51.52-126.75Q445.96-764 371.35-764q-75.43 0-127.89 52.25Q191-659.5 191-585t52.31 126.75Q295.62-406 371.35-406Z"/></svg>`;
 
+const FilterList = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M382-190v-94h196v94H382ZM218-434v-93h524v93H218ZM95-677v-94h771v94H95Z"/></svg>`;
+
 const SettingsIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m366-55-21-134q-13-4-29.5-13.5T288-221l-125 58L47-368l114-83q-1-6-1.5-14.5T159-480q0-6 .5-14.5T161-509L47-593l116-203 127 57q10-8 26-17t29-13l21-137h228l21 136q13 5 29.5 13.5T672-739l126-57 115 203-115 82q1 7 2 15.5t1 15.5q0 7-1 15t-2 15l115 82-116 205-126-58q-11 9-26.5 18.5T615-189L594-55H366Zm78-94h71l15-111q34-8 65-25t55-44l106 46 31-59-92-67q4-18 7-35.5t3-35.5q0-18-2.5-35.5T695-551l93-67-32-59-105 46q-23-28-54-47t-67-23l-14-110h-72l-13 110q-36 6-67.5 24.5T308-631l-104-46-32 59 91 66q-4 18-7 36t-3 36q0 18 3 36.5t7 35.5l-91 66 32 59 104-46q25 26 56.5 44t66.5 26l13 110Zm34-201q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38Zm2-130Z"/></svg>`;
 
 const SettingsFillIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m366-55-21-134q-13-4-29.5-13.5T288-221l-125 58L47-368l114-83q-1-6-1.5-14.5T159-480q0-6 .5-14.5T161-509L47-593l116-203 127 57q10-8 26-17t29-13l21-137h228l21 136q13 5 29.5 13.5T672-739l126-57 115 203-115 82q1 7 2 15.5t1 15.5q0 7-1 15t-2 15l115 82-116 205-126-58q-11 9-26.5 18.5T615-189L594-55H366Zm112-295q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38Z"/></svg>`;
@@ -158,6 +160,7 @@ const icons$9 = [
     { name: 'zoom_in', component: ZoomInIcon, category: category$8 },
     { name: 'zoom_out', component: ZoomOutIcon, category: category$8 },
     { name: 'search', component: SearchIcon, category: category$8 },
+    { name: 'filter_list', component: FilterList, category: category$8 },
     { name: 'settings', component: SettingsIcon, category: category$8 },
     { name: 'settings_fill', component: SettingsFillIcon, category: category$8 },
     { name: 'login', component: LoginIcon, category: category$8 },

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

@@ -3,11 +3,12 @@ import { c as classNames } from './index3.js';
 import { g as getRequiredText, a as getOptionalText } from './controlUtils.js';
 import { i as isValidation } from './store.js';
 import { g as getAriaLabel, i as idGenerator, d as defineCustomElement$4 } from './ds-icon2.js';
+import { b as inheritAttributes } from './attributes.js';
 import { d as defineCustomElement$5 } from './ds-button2.js';
 import { d as defineCustomElement$3 } from './ds-input-validity2.js';
 import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
 
-const dsTextInputCss = ".sc-ds-text-input:root{--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{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-textColor-default)}.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-textColor-secondary)}.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-borderColor-default);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-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-input--container.sc-ds-text-input:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-input--container.invalid.sc-ds-text-input{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-input--container.invalid.sc-ds-text-input:hover:not(.ds-input--container.invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-input--container.invalid.active.sc-ds-text-input{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-input--container.valid.sc-ds-text-input{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-input--container.valid.sc-ds-text-input:hover:not(.ds-input--container.valid:focus-within){background-color:var(--ds-bgColor-success-hover);border-color:var(--ds-borderColor-success)}.ds-input--container.valid.active.sc-ds-text-input{background-color:var(--ds-bgColor-success-active);border-color:var(--ds-borderColor-success)}.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.disabled.sc-ds-text-input{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.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:readonly){border-color:var(--ds-borderColor-default)}.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-borderColor-default);background-color:var(--ds-bgColor-white-active)}.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-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.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-borderColor-primary)}.ds-input--container.sc-ds-text-input:focus-within *.sc-ds-text-input>ds-button.suffix.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-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-textColor-default);border:none;padding-block:var(--ds-spacing-4xSmall)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-textColor-disabled-onLight)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.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-textColor-secondary)}.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{-moz-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{-webkit-appearance:none;margin:0}.ds-input--container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input--container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input>input.sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input--container.sc-ds-text-input:has(ds-button.suffix){padding-inline-end:unset}.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-icon.prefix.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-textColor-default)}.ds-input--container.sc-ds-text-input ds-button.suffix.sc-ds-text-input{margin-top:calc(var(--ds-spacing-3xSmall) * -1);margin-right:calc(var(--ds-spacing-4xSmall) * -1);max-height:40px}.error-text--container.sc-ds-text-input,.success-text--container.sc-ds-text-input{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.error-text--container.sc-ds-text-input ds-icon.sc-ds-text-input,.success-text--container.sc-ds-text-input ds-icon.sc-ds-text-input{display:block;height:1.5rem}.error-text--container.sc-ds-text-input small.sc-ds-text-input,.success-text--container.sc-ds-text-input small.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)}.error-text--container.sc-ds-text-input{color:var(--ds-textColor-danger)}.success-text--container.sc-ds-text-input{color:var(--ds-textColor-success)}";
+const dsTextInputCss = ".sc-ds-text-input:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.no-style-leak.sc-ds-text-input *.sc-ds-text-input,.sc-ds-text-input-h *.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-textColor-default)}.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-textColor-secondary)}.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-borderColor-default);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-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-input--container.sc-ds-text-input:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-input--container.invalid.sc-ds-text-input{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-input--container.invalid.sc-ds-text-input:hover:not(.ds-input--container.invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-input--container.invalid.active.sc-ds-text-input{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-input--container.valid.sc-ds-text-input{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-input--container.valid.sc-ds-text-input:hover:not(.ds-input--container.valid:focus-within){background-color:var(--ds-bgColor-success-hover);border-color:var(--ds-borderColor-success)}.ds-input--container.valid.active.sc-ds-text-input{background-color:var(--ds-bgColor-success-active);border-color:var(--ds-borderColor-success)}.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.disabled.sc-ds-text-input{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.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:readonly){border-color:var(--ds-borderColor-default)}.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-borderColor-default);background-color:var(--ds-bgColor-white-active)}.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-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.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-borderColor-primary)}.ds-input--container.sc-ds-text-input:focus-within *.sc-ds-text-input>ds-button.suffix.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-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-textColor-default);border:none;padding-block:var(--ds-spacing-4xSmall)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-textColor-disabled-onLight)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.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-textColor-secondary)}.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{-moz-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{-webkit-appearance:none;margin:0}.ds-input--container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input--container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input>input.sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input--container.sc-ds-text-input:has(ds-button.suffix){padding-inline-end:unset}.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-icon.prefix.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-textColor-default)}.ds-input--container.sc-ds-text-input ds-button.suffix.sc-ds-text-input{margin-top:calc(var(--ds-spacing-3xSmall) * -1);margin-right:calc(var(--ds-spacing-4xSmall) * -1);max-height:40px}.error-text--container.sc-ds-text-input,.success-text--container.sc-ds-text-input{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.error-text--container.sc-ds-text-input ds-icon.sc-ds-text-input,.success-text--container.sc-ds-text-input ds-icon.sc-ds-text-input{display:block;height:1.5rem}.error-text--container.sc-ds-text-input small.sc-ds-text-input,.success-text--container.sc-ds-text-input small.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)}.error-text--container.sc-ds-text-input{color:var(--ds-textColor-danger)}.success-text--container.sc-ds-text-input{color:var(--ds-textColor-success)}";
 const DsTextInputStyle0 = dsTextInputCss;
 
 const INPUT_TYPE_ICONS_MAP = {
@@ -25,6 +26,7 @@ const DsTextInput$1 = proxyCustomElement(class DsTextInput extends H {
         this.clear = createEvent(this, "clear", 7);
         this.internals = this.attachInternals();
     }
+    inheritedAttributes = {};
     suffixButtonElement;
     inputElement;
     assistiveTextId;
@@ -61,7 +63,7 @@ const DsTextInput$1 = proxyCustomElement(class DsTextInput extends H {
     icon = '';
     type = 'text';
     ariaLabel;
-    ariaLabelledBy;
+    ariaLabelledby;
     ariaDescribedby;
     hasFocus = false;
     clearButtonVisible = false;
@@ -94,6 +96,9 @@ const DsTextInput$1 = proxyCustomElement(class DsTextInput extends H {
         return this.label;
     };
     componentWillLoad() {
+        this.inheritedAttributes = {
+            ...inheritAttributes(this, this.el),
+        };
         this.setIds();
         this.hasPrefixSlot = !!this.el.querySelector('[slot="prefix"]');
         this.hasSuffixSlot = !!this.el.querySelector('[slot="suffix"]');
@@ -160,18 +165,18 @@ const DsTextInput$1 = proxyCustomElement(class DsTextInput extends H {
     }
     render() {
         const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
-        return (h(Fragment, { key: 'efb783f742bb82b01fd6807a628eb693666a819b' }, h("div", { key: 'dde260b136af4b68de1fa15928529f5e57f54c3a', class: "ds-input--label-container" }, h("slot", { key: 'e7ba428a8b8202c9b3e4d9a9c6d4257b0b48d83a', name: "label" }, h("label", { key: '1f28c5fd53249068de50c6d0ea0aa88ccf65a1ec', htmlFor: this.identifier }, this.getLabelText())), h("slot", { key: 'e3c1ea925cfc7f9599ee651da0aeaab98fa806bb', name: "help-text" }, h("small", { key: '671ab99029e2775d964feb012beb8a20912be5e3', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: '8eb744be9b95ddceb1dd5bed0274d29a26e7ec1d', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: 'b7fa7067a52d176b810eb88777423adf50dfd8b9', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input--container', {
+        return (h(Fragment, { key: '6b5cc3e8f7fe00df47392eade88010d1f9faf7e1' }, h("div", { key: 'c5e72b94f444c3923a3d72fb08615a97a9a174c2', class: "ds-input--label-container" }, h("slot", { key: 'a27efdf7b2311fdf310ce5340adccac015c906b1', name: "label" }, h("label", { key: '3a0241a9c572eb4403c5d46eb6761b5121726bf9', htmlFor: this.identifier }, this.getLabelText())), h("slot", { key: '8ffec65634da10f44ea145d1efec86147c6dc296', name: "help-text" }, h("small", { key: 'a45d970a13bae23f2f488a969ee9184cc521680e', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: 'abea8540ddeed9f797cd28c63aabbc734b7bf083', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: '9f162c62ee86782abb60344074544feb643c3c8b', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input--container', {
                 disabled: this.disabled,
                 readonly: this.readonly,
                 valid: !!this.successText,
-                invalid: !!this.errorText,
+                invalid: !!this.validationMessage,
                 focus: this.hasFocus,
                 active: !!this.inputActive,
-            }) }, this.renderPrefixContent(), h("input", { key: 'f619722a0c088fbd99d851b4cc49a220538da0ae', ref: e => (this.inputElement = e), id: this.identifier, name: this.name, "aria-label": getAriaLabel(this.label, this.ariaLabel), "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedby ||
+            }) }, this.renderPrefixContent(), h("input", { key: '1c7c944a70012444caa83f7f0104f6e1992d3acb', ref: e => (this.inputElement = e), id: this.identifier, name: this.name, "aria-label": getAriaLabel(this.label, this.ariaLabel), "aria-labelledby": this.ariaLabelledby, "aria-describedby": this.ariaDescribedby ||
                 classNames(this.assistiveTextId, this.visuallyHiddenAssistiveTextId, {
                     [this.errorTextId]: Boolean(this.validationMessage),
                     [this.successTextId]: Boolean(this.successText),
-                }), "aria-invalid": Boolean(this.validationMessage) ? 'true' : 'false', disabled: this.disabled, required: this.required, readonly: this.readonly, value: this.value, type: inputType, min: this.min, max: this.max, maxlength: this.maxlength, pattern: this.pattern, placeholder: this.placeholder, autocomplete: this.autocomplete, onInput: this.handleInput, onFocus: () => (this.hasFocus = true), onBlur: this.handleBlur }), this.renderSuffixContent()), h("slot", { key: 'b70c638ad0de13e0bfa1c2f0ec366e748ab8e4e2', name: "input-validity" }, h("ds-input-validity", { key: '7c1da6ba8d42add8de43f4926c24c8a64bbe32e2', id: this.errorTextId, text: this.validationMessage, type: "error", role: "alert" }), h("ds-input-validity", { key: '46258021c17e3461ea4a0c2ae720fb44305550c5', id: this.successTextId, text: this.successText, type: "success", role: "status" }))));
+                }), "aria-invalid": Boolean(this.validationMessage) ? 'true' : 'false', disabled: this.disabled, required: this.required, readonly: this.readonly, value: this.value, type: inputType, min: this.min, max: this.max, maxlength: this.maxlength, pattern: this.pattern, placeholder: this.placeholder, autocomplete: this.autocomplete, onInput: this.handleInput, onFocus: () => (this.hasFocus = true), onBlur: this.handleBlur, ...this.inheritedAttributes }), this.renderSuffixContent()), h("slot", { key: 'bdc4bbc3a0abe3668bcf18f719d50974ad12e1c4', name: "input-validity" }, h("ds-input-validity", { key: 'a392691fed93056f22673e5d20c6c4c099481181', id: this.errorTextId, text: this.validationMessage, type: "error", role: "alert" }), h("ds-input-validity", { key: '7e3b45928cdefed2c65b8c50fb4245527bae758e', id: this.successTextId, text: this.successText, type: "success", role: "status" }))));
     }
     static get formAssociated() { return true; }
     static get style() { return DsTextInputStyle0; }
@@ -201,7 +206,7 @@ const DsTextInput$1 = proxyCustomElement(class DsTextInput extends H {
         "icon": [1],
         "type": [1],
         "ariaLabel": [1, "aria-label"],
-        "ariaLabelledBy": [1, "aria-labelledby"],
+        "ariaLabelledby": [1, "aria-labelledby"],
         "ariaDescribedby": [1, "aria-describedby"],
         "hasFocus": [32],
         "clearButtonVisible": [32],

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './index2.js';
 
-const dsVisuallyHiddenCss = ":host{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
+const dsVisuallyHiddenCss = ".ds-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
 const DsVisuallyHiddenStyle0 = dsVisuallyHiddenCss;
 
 const DsVisuallyHidden = proxyCustomElement(class DsVisuallyHidden extends H {
@@ -10,7 +10,7 @@ const DsVisuallyHidden = proxyCustomElement(class DsVisuallyHidden extends H {
         this.__attachShadow();
     }
     render() {
-        return (h("slot", { key: '083eaed9210a85360479b367769c8904a6089f64' }));
+        return (h("div", { key: 'f488f0f134c76c308763d47c57360e54ae299a06', class: "ds-visually-hidden" }, h("slot", { key: '20d5cdef8c333e5421c670e2558b511b1f235e7f' })));
     }
     static get style() { return DsVisuallyHiddenStyle0; }
 }, [1, "ds-visually-hidden"]);

package/dist/esm/component-library.js

@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["ds-accordion_3",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"hideTopBorder":[4,"hide-top-border"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"fullWidth":[4,"full-width"],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"dsTitle":[1,"title"],"role":[1],"hidden":[4],"message":[32]}]]],["ds-input-validity",[[0,"ds-input-validity",{"text":[1],"type":[1],"validityRole":[1,"role"],"identifier":[32]}]]],["ds-text-input",[[70,"ds-text-input",{"label":[1],"placeholder":[1],"identifier":[1,"id"],"name":[1],"disabled":[4],"optional":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"optionalText":[1,"optional-text"],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"validationMessage":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]],["ds-checkbox",[[65,"ds-checkbox",{"identifier":[1,"id"],"checked":[1028],"legend":[1],"assistiveText":[1,"assistive-text"],"text":[1],"indeterminate":[4],"disabled":[4],"errorText":[1,"error-text"],"errorsDisabled":[4,"data-errors-disabled"],"required":[4],"optional":[4],"optionalText":[1,"optional-text"],"ariaLabel":[1,"aria-label"],"value":[32],"validationMessage":[32]}]]],["ds-checkbox-group",[[1,"ds-checkbox-group",{"legend":[1],"assistiveText":[1,"assistive-text"],"direction":[1],"errorText":[1,"error-text"],"text":[1],"checked":[4],"disabled":[4],"childElementsCount":[32],"checkedChildElementCount":[32],"isIndeterminate":[32],"indeterminateChildCheckboxCount":[32],"setChecked":[64]},[[0,"dsCheckboxGroupIndeterminateChildChange","listenIndeterminateChildChange"],[0,"dsCheckboxInput","listenCheckboxChange"],[0,"dsCheckboxGroupChange","listenCheckboxGroupChange"]],{"disabled":["watchCheckboxDisabledChange"],"checked":["watchCheckedChange"],"isIndeterminate":["watchIndeterminateChange"],"checkedChildElementCount":["watchCheckedChildElementCountChange"]}]]],["ds-visually-hidden",[[1,"ds-visually-hidden"]]],["ds-link",[[1,"ds-link",{"text":[1],"size":[1],"variant":[1],"weight":[1],"icon":[1025],"iconPosition":[1025,"icon-position"],"iconTitle":[1,"icon-title"],"iconHidden":[4,"icon-hidden"],"href":[1],"target":[1],"download":[4],"language":[1,"lang"],"ariaLabel":[1,"aria-label"]}]]],["ds-link-with-arrow",[[1,"ds-link-with-arrow",{"text":[1],"iconPosition":[1,"icon-position"],"href":[1],"target":[1],"language":[1,"lang"],"ariaLabel":[1,"aria-label"]}]]]], options);
+  return bootstrapLazy([["ds-accordion_3",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"hideTopBorder":[4,"hide-top-border"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"fullWidth":[4,"full-width"],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"dsTitle":[1,"title"],"role":[1],"hidden":[4],"message":[32]}]]],["ds-input-validity",[[0,"ds-input-validity",{"text":[1],"type":[1],"validityRole":[1,"role"],"identifier":[32]}]]],["ds-text-input",[[70,"ds-text-input",{"label":[1],"placeholder":[1],"identifier":[1,"id"],"name":[1],"disabled":[4],"optional":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"optionalText":[1,"optional-text"],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledby":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"validationMessage":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]],["ds-checkbox",[[65,"ds-checkbox",{"identifier":[1,"id"],"checked":[1028],"legend":[1],"assistiveText":[1,"assistive-text"],"text":[1],"indeterminate":[4],"disabled":[4],"errorText":[1,"error-text"],"errorsDisabled":[4,"data-errors-disabled"],"required":[4],"optional":[4],"optionalText":[1,"optional-text"],"ariaLabel":[1,"aria-label"],"value":[32],"validationMessage":[32]}]]],["ds-checkbox-group",[[1,"ds-checkbox-group",{"legend":[1],"assistiveText":[1,"assistive-text"],"direction":[1],"errorText":[1,"error-text"],"text":[1],"checked":[4],"disabled":[4],"childElementsCount":[32],"checkedChildElementCount":[32],"isIndeterminate":[32],"indeterminateChildCheckboxCount":[32],"setChecked":[64]},[[0,"dsCheckboxGroupIndeterminateChildChange","listenIndeterminateChildChange"],[0,"dsCheckboxInput","listenCheckboxChange"],[0,"dsCheckboxGroupChange","listenCheckboxGroupChange"]],{"disabled":["watchCheckboxDisabledChange"],"checked":["watchCheckedChange"],"isIndeterminate":["watchIndeterminateChange"],"checkedChildElementCount":["watchCheckedChildElementCountChange"]}]]],["ds-visually-hidden",[[1,"ds-visually-hidden"]]],["ds-link",[[1,"ds-link",{"text":[1],"size":[1],"variant":[1],"weight":[1],"icon":[1025],"iconPosition":[1025,"icon-position"],"iconTitle":[1,"icon-title"],"iconHidden":[4,"icon-hidden"],"href":[1],"target":[1],"download":[4],"language":[1,"lang"],"ariaLabel":[1,"aria-label"]}]]],["ds-link-with-arrow",[[1,"ds-link-with-arrow",{"text":[1],"iconPosition":[1,"icon-position"],"href":[1],"target":[1],"language":[1,"lang"],"ariaLabel":[1,"aria-label"]}]]]], options);
 });