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

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,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}
+import{r as e,a as i,h as t}from"./index-84fd0ee9.js";import{c as s}from"./index-72ac5051.js";import{i as n,g as a,c as l}from"./utils-cfc536bc.js";import{o as d,v as o}from"./linkUtils-3d1b28cf.js";const r=l("visually-hidden-assistive-text"),c=class{constructor(i){e(this,i)}inheritedAttributes={};rel;visuallyHiddenAssistiveTextId=r.next().value;get el(){return i(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"]),d(this.target)&&(this.icon="open_in_new",this.iconPosition="end",this.rel="noopener noreferrer")}render(){const e=s("ds-link",`ds-link--${this.weight}`,`ds-link--${this.variant}`,{[`ds-link--${this.size}`]:Boolean(this.size)}),i=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:"e8db9e6a903263d717a386e2fd61a2f279c4de1d",href:this.href,class:e,rel:this.rel,target:this.target,download:this.download,"aria-label":a(this.text,this.ariaLabel),...this.inheritedAttributes},t("slot",{key:"9def43becc24ab8f836ced9eb1f33de903fcfa40",name:"iconStart"},this.icon&&"start"===this.iconPosition&&t("ds-icon",{key:"301bbcf7464dca9e0e44cd9b74ccc77e67cbfac9",name:this.icon,class:i,size:"1em",title:this.iconTitle,hidden:this.iconHidden})),this.text,t("slot",{key:"f6f3b7824f5bb028375f40e2e5743989a56f187d",name:"iconEnd"},this.icon&&"end"===this.iconPosition&&t("ds-icon",{key:"3af94f1f8e4f1199e260929001b99ee56f780dff",name:this.icon,class:i,size:"1em",title:this.iconTitle,hidden:this.iconHidden})),d(this.target)&&t("ds-visually-hidden",{key:"f91801450c834793bf05a40f011b86f500422eee",id:this.visuallyHiddenAssistiveTextId},o(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-palette-mainBlue-70);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-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);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-palette-mainBlue-80)}.ds-link:active{color:var(--ds-palette-mainBlue-90)}.ds-link:visited{color:#551a8b}.ds-link--standalone{color:var(--ds-palette-mainBlue-70);text-decoration-line:none}.ds-link--standalone:hover,.ds-link--standalone:active{text-decoration-line:underline}.ds-link--standalone:hover{color:var(--ds-palette-mainBlue-80)}.ds-link--standalone:active{color:var(--ds-palette-mainBlue-90)}.ds-link--standalone:focus-visible{color:var(--ds-palette-mainBlue-70)}.ds-link--standalone:visited{color:var(--ds-palette-mainBlue-70)}";export{c as ds_link}

package/dist/component-library/ds-radio-button-group.entry.js

@@ -0,0 +1 @@
+import{r as t,c as e,a as i,h as s,H as r}from"./index-84fd0ee9.js";import{c as o}from"./index-72ac5051.js";import{i as a,c as d}from"./utils-cfc536bc.js";const n=d("ds-radio-button-group"),l=class{constructor(i){t(this,i),this.dsRadioGroupValueChange=e(this,"dsRadioGroupValueChange",7),this.dsRadioGroupInvalidStateChange=e(this,"dsRadioGroupInvalidStateChange",7)}fieldsetId=n.next().value;errorTextId=`${this.fieldsetId}-error`;assistiveTextId=`${this.fieldsetId}-assistive-text`;inheritedAttributes={};get el(){return i(this)}legend;assistiveText;initialValue;direction="vertical";errorText="";value;dsRadioGroupValueChange;dsRadioGroupInvalidStateChange;getRadios=()=>Array.from(this.el.querySelectorAll("ds-radio-button")).filter((t=>!t.disabled));updateFocusableRadioButton=()=>{const t=this.getRadios();if(!t.length)return;let e=null;for(const i of t){const t=i.value===this.value;i.setFocusable(t),t&&(e=i)}e||t[0].setFocusable(!0)};componentWillLoad(){this.value=this.initialValue,this.inheritedAttributes=a(this.el,["aria-labelledby"]),this.updateFocusableRadioButton()}async getValue(){return this.value}errorTextObserver(t){this.dsRadioGroupInvalidStateChange.emit(!!t)}onInputChange(t){t.stopPropagation(),this.value=t.target.value,this.dsRadioGroupValueChange.emit(this.value),this.updateFocusableRadioButton()}onKeyDown(t){if(!["ArrowUp","ArrowLeft","ArrowDown","ArrowRight"].includes(t.key))return;if(t.target&&!this.el.contains(t.target))return;const e=this.getRadios();if(t.target&&!e.includes(t.target))return;t.preventDefault();const i=e.findIndex((e=>e===t.target));let s;["ArrowUp","ArrowLeft"].includes(t.key)&&(s=0===i?e.length-1:i-1),["ArrowDown","ArrowRight"].includes(t.key)&&(s=(i+1)%e.length);const r=e[s];r.setFocus(),r.setChecked()}render(){const t=o("ds-radio-button-group"),e=o("ds-radio-button-group__legend"),i=o("ds-radio-button-group__assistive-text"),a=o("ds-radio-button-group__radio-buttons-slot",{"ds-radio-button-group__radio-buttons-slot--horizontal":"horizontal"===this.direction}),d=o("ds-radio-button-group__error"),n=[!!this.errorText&&this.errorTextId,!!this.assistiveText&&this.assistiveTextId].filter(Boolean).join(" ");return s(r,{key:"c29b30786a96a50976486eb107c707b973c06633","data-invalid":!!this.errorText||void 0},s("fieldset",{key:"90692a539c75bb81ae692b7209bd757c5d8b6b59",class:t,"aria-describedby":n,...this.inheritedAttributes},s("legend",{key:"1d4f2819f0fa4ca020297cddccc87f684fc03461",class:e},s("slot",{key:"d9edb199de4975dd876bf68fa834f7d1b841bad2",name:"legend"},this.legend)),s("slot",{key:"e48f2924efd4e0f47fedb8c30df34735aa6bc2df",name:"assistiveText"},this.assistiveText&&s("small",{key:"ebbb68a63acce035872ce7ef22d2821941ea3ccc",class:i,id:this.assistiveTextId},this.assistiveText)),s("div",{key:"a146cbf465a9fe97e5380db66d0baecaa46797e1",class:a},s("slot",{key:"d7623edbff9870335ae62451bad2b245e394d4d0",onSlotchange:this.updateFocusableRadioButton})),s("div",{key:"85381c3f1b7f28d5508cf866884f0f5df2e2413a",class:d},s("ds-input-validity",{key:"ebf9f79454c11f490261959e1bdb5433744f39a3",id:this.errorTextId,text:this.errorText,type:"error"}))))}static get watchers(){return{errorText:["errorTextObserver"]}}};l.style=".ds-radio-button-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-radio-button-group__radio-buttons-slot{display:inline-flex;flex-direction:column}.ds-radio-button-group__radio-buttons-slot--horizontal{flex-direction:row;gap:var(--ds-spacing-small);flex-wrap:wrap}.ds-radio-button-group__legend{padding-inline:0;color:var(--ds-palette-black-95);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button-group__assistive-text{font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}";export{l as ds_radio_button_group}

package/dist/component-library/ds-radio-button.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,a as e,h as s,F as d}from"./index-84fd0ee9.js";import{b as a,c as o}from"./utils-cfc536bc.js";import{g as r,a as l}from"./controlUtils-c2ba44bd.js";import{c as n}from"./index-72ac5051.js";import{i as c}from"./store-73a56075.js";const h=o("ds-radio-button"),u=class{constructor(e){t(this,e),this.dsRadioButtonChecked=i(this,"dsRadioButtonChecked",7),e.$hostElement$["s-ei"]?this.internals=e.$hostElement$["s-ei"]:(this.internals=e.$hostElement$.attachInternals(),e.$hostElement$["s-ei"]=this.internals)}radioGroup=null;inputElem;dsRadioButtonChecked;get el(){return e(this)}internals;identifier=h.next().value;errorsDisabled=!1;value=this.identifier;legend;assistiveText;text;required=!1;disabled=!1;optional=!1;checked=!1;optionalText;errorText="";focusable=!0;invalid=!!this.errorText;initialChecked=this.checked;validationMessage;errorTextId=`${this.identifier}-error`;assistiveTextId=`${this.identifier}-assistive-text`;async setFocus(){this.inputElem.focus()}async setFocusable(t){this.focusable=t}async setChecked(){this.checked=!0,this.internals?.setFormValue("true"),this.dsRadioButtonChecked.emit(),c("client")&&this.validationMessage&&(this.validationMessage=this.getValidationMessage())}inheritedAttributes={};getValidationMessage=()=>this.errorsDisabled?"":this.errorText||this.internals?.validationMessage||this.inputElem?.validationMessage;componentWillLoad(){this.inheritedAttributes={...a(this,this.el)}}formResetCallback(){this.checked=this.initialChecked,this.internals.setValidity({}),this.internals.setFormValue(this.checked.toString())}connectedCallback(){this.radioGroup=this.el.closest("ds-radio-button-group"),this.radioGroup&&(this.updateCheckedState(),this.invalid=!!this.radioGroup.errorText,this.radioGroup.addEventListener("dsRadioGroupValueChange",this.updateCheckedState),this.radioGroup.addEventListener("dsRadioGroupInvalidStateChange",this.updateInvalidState))}disconnectedCallback(){this.radioGroup&&(this.radioGroup.removeEventListener("dsRadioGroupValueChange",this.updateCheckedState),this.radioGroup.removeEventListener("dsRadioGroupInvalidStateChange",this.updateInvalidState)),this.radioGroup=null}updateCheckedState=async()=>{this.checked=this.value===await this.radioGroup.getValue()};updateInvalidState=t=>{this.invalid=t.detail};handleInput=()=>{this.setChecked()};handleBlur=()=>{c("client")&&(this.validationMessage=this.getValidationMessage())};getLegendText=()=>this.required?r(this.legend):this.optional?l(this.legend,this.optionalText):this.legend;renderRadioIcon(){const t="ds-radio-button__icon",i=n(`${t}__outer-circle`,{[`${t}__outer-circle--checked`]:this.checked}),e=n(`${t}__inner-circle`);return s("slot",{name:"icon"},s("div",{class:t,"aria-hidden":"true"},s("svg",{width:"44",height:"44",viewBox:"0 0 44 44",fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("rect",{x:"10",y:"10",width:"24",height:"24",rx:"12",fill:"white"}),s("circle",{class:i,cx:"22",cy:"22",r:"10",fill:"white",stroke:"#005A94","stroke-width":"2"}),this.checked&&s("circle",{class:e,cx:"22",cy:"22",r:"6",fill:"#005A94"}))))}renderRadioButton(){const t=n("ds-radio-button",{"ds-radio-button--disabled":this.disabled,"ds-radio-button--invalid":!!this.errorText||this.invalid}),i=n("ds-radio-button__input"),e=n("ds-radio-button__text");return s(d,null,s("div",null,s("label",{class:t},s("ds-visually-hidden",null,s("input",{ref:t=>this.inputElem=t,type:"radio",class:i,value:this.value,disabled:this.disabled,onInput:this.handleInput,onBlur:this.handleBlur,checked:this.checked,tabindex:this.focusable?0:-1,...this.inheritedAttributes})),this.renderRadioIcon(),s("slot",null,s("span",{class:e},this.text)))),s("slot",{name:"validity"},s("div",{class:"ds-radio-button__validity"},s("ds-input-validity",{text:this.errorText,type:"error",role:"alert",id:this.errorTextId}))))}renderFieldset(){const t=n("ds-radio-button__fieldset"),i=n("ds-radio-button__fieldset__legend"),e=n("ds-radio-button__fieldset__assistive-text"),d=[!!this.errorText&&this.errorTextId,!!this.assistiveText&&this.assistiveTextId].filter(Boolean).join(" ");return s("fieldset",{class:t,"aria-describedby":d},s("legend",{class:i},s("slot",{name:"legend"},this.getLegendText())),s("slot",{name:"assistiveText"},this.assistiveText&&s("small",{class:e,id:this.assistiveTextId},this.assistiveText)),this.renderRadioButton())}render(){return this.legend?this.renderFieldset():this.renderRadioButton()}static get formAssociated(){return!0}};u.style=":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-radio-button{box-sizing:border-box;display:inline-flex;color:var(--ds-palette-black-95)}.ds-radio-button--disabled{color:var(--ds-palette-black-40)}.ds-radio-button__validity{margin-left:10px}.ds-radio-button__fieldset{display:inline-flex;flex-direction:column;border:none;margin:0;padding:0}.ds-radio-button__fieldset__legend{padding-inline:0;color:var(--ds-palette-black-95);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button__fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.ds-radio-button:focus-within .ds-radio-button__icon{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 5);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-radio-button__icon{border-radius:50%;height:44px;width:44px}.ds-radio-button__text{margin-top:11px}.ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-white)}.ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-mainBlue-70);fill:var(--ds-palette-white)}.ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-70)}.ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-black-10)}.ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-mainBlue-80);fill:var(--ds-palette-white)}.ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-80)}.ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-black-20)}.ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-mainBlue-90);fill:var(--ds-palette-white)}.ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-90)}.ds-radio-button--disabled .ds-radio-button__icon__outer-circle{stroke:var(--ds-overlay-black-15);fill:var(--ds-overlay-black-10)}.ds-radio-button--disabled .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-overlay-black-15);fill:var(--ds-overlay-black-10)}.ds-radio-button--disabled .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-overlay-black-15)}.ds-radio-button--invalid .ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-red-50);fill:var(--ds-palette-white)}.ds-radio-button--invalid .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-red-50);fill:var(--ds-palette-white)}.ds-radio-button--invalid .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-70)}";export{u as ds_radio_button}

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 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}
+import{r as t,c as i,a as e,h as s,F as n}from"./index-84fd0ee9.js";import{c as a}from"./index-72ac5051.js";import{g as d,a as r}from"./controlUtils-c2ba44bd.js";import{i as o}from"./store-73a56075.js";import{b as c,g as l,c as p}from"./utils-cfc536bc.js";const u={search:"search"},h={search:({clearButtonVisible:t})=>t?"cancel_fill":"",password:({passwordInputVisible:t})=>t?"visibility_off_fill":"visibility_fill"},x=p("ds-input"),b=class{constructor(e){t(this,e),this.clear=i(this,"clear",7),e.$hostElement$["s-ei"]?this.internals=e.$hostElement$["s-ei"]:(this.internals=e.$hostElement$.attachInternals(),e.$hostElement$["s-ei"]=this.internals)}inheritedAttributes={};suffixButtonElement;inputElement;assistiveTextId;visuallyHiddenAssistiveTextId;errorTextId;successTextId;hasPrefixSlot=!1;hasSuffixSlot=!1;get el(){return e(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?d(this.label):this.optional?r(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"]'),(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":return void this.clearInput();default:return}};renderPrefixContent(){if(this.hasPrefixSlot)return s("slot",{name:"prefix"});if(this.prefixText)return s("slot",{name:"prefix"},s("span",{class:"prefix"},this.prefixText));const t=this.icon||u[this.type];return t?s("slot",{name:"prefix"},s("ds-icon",{class:"prefix",name:t})):null}renderSuffixContent(){if(this.hasSuffixSlot)return s("slot",{name:"suffix"});if(this.suffixText)return s("slot",{name:"suffix"},s("span",{class:"suffix"},this.suffixText));const t=h[this.type]?.(this)??"";return t?s("slot",{name:"suffix"},s("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 s(n,{key:"9706a2c55f36b1888b7287344d91ddd10f96201d"},s("div",{key:"35eafa8a92261bfdb4e0ed8325d98be85665eca6",class:"ds-input--label-container"},s("slot",{key:"50e67a545686807337bda0c607888f6bf9bf9d58",name:"label"},s("label",{key:"87ce740880e1fb5e966607a05af463a40655410d",htmlFor:this.identifier},this.getLabelText())),s("slot",{key:"f9c002b843341a3934df96611176fe8178c49c0d",name:"help-text"},s("small",{key:"2e780ce79e6e0720dee0360fe7e11a4742a26fca",id:this.assistiveTextId},this.assistiveText),s("ds-visually-hidden",{key:"63d47cc268aaf3128799f907144048411a0e9be5",id:this.visuallyHiddenAssistiveTextId},this.hiddenAssistiveText))),s("div",{key:"a060e806ef56c1b232ad2eacb5a1b675b01891f7",onMouseDown:()=>this.inputActive=!0,onMouseUp:()=>this.inputActive=!1,onClick:t=>this.handleInputContainerClick(t),class:a("ds-input--container",{disabled:this.disabled,readonly:this.readonly,valid:!!this.successText,invalid:!!this.validationMessage,focus:this.hasFocus,active:!!this.inputActive})},this.renderPrefixContent(),s("input",{key:"cb27157fde11dcb0fc305423fbc94fcafdc34b1c",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||a(this.assistiveTextId,this.visuallyHiddenAssistiveTextId,{[this.errorTextId]:Boolean(this.validationMessage),[this.successTextId]:Boolean(this.successText)}),"aria-invalid":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()),s("slot",{key:"8e961d353346bd088e6f5f6d4efa9508598a2596",name:"input-validity"},s("ds-input-validity",{key:"d784f945dec403f64721a71fba72ecc1f836e844",id:this.errorTextId,text:this.validationMessage,type:"error",role:"alert"}),s("ds-input-validity",{key:"f343fc9fdbc4c4f33d345921a23f89fcb27b8a18",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}.dsNoStyleLeak.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-palette-black-95)}.ds-input--label-container.sc-ds-text-input small.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);display:block;margin-block-start:var(--ds-spacing-3xSmall);color:var(--ds-palette-black-70)}.ds-input--container.sc-ds-text-input{box-sizing:border-box;width:100%;display:inline-flex;position:relative;align-items:center;border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-palette-black-50);padding-inline:var(--ds-spacing-xSmall)}.ds-input--container.sc-ds-text-input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);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-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-input--container.invalid.sc-ds-text-input{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}.ds-input--container.invalid.sc-ds-text-input:hover:not(.ds-input--container.invalid:focus-within){background-color:var(--ds-palette-red-10);border-color:var(--ds-palette-red-50)}.ds-input--container.invalid.active.sc-ds-text-input{background-color:var(--ds-palette-red-20);border-color:var(--ds-palette-red-50)}.ds-input--container.valid.sc-ds-text-input{background-color:var(--ds-palette-green-05);border-color:var(--ds-palette-green-50)}.ds-input--container.valid.sc-ds-text-input:hover:not(.ds-input--container.valid:focus-within){background-color:var(--ds-palette-green-10);border-color:var(--ds-palette-green-50)}.ds-input--container.valid.active.sc-ds-text-input{background-color:var(--ds-palette-green-20);border-color:var(--ds-palette-green-50)}.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.disabled.sc-ds-text-input{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15)}.ds-input--container.sc-ds-text-input:has(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-palette-black-50)}.ds-input--container.active.sc-ds-text-input:not(.ds-input--container.disabled,.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.invalid.sc-ds-text-input,.ds-input--container.valid).sc-ds-text-input{border-color:var(--ds-palette-black-50);background-color:var(--ds-palette-black-20)}.ds-input--container.sc-ds-text-input:hover:not(.ds-input--container.disabled,.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.active.sc-ds-text-input,.ds-input--container.invalid.sc-ds-text-input,.ds-input--container.valid.sc-ds-text-input,.ds-input--container.sc-ds-text-input:focus-within){border-color:var(--ds-palette-black-50);background-color:var(--ds-palette-black-10)}.ds-input--container.sc-ds-text-input:focus-within:not(.ds-input--container:focus-within.invalid,.ds-input--container.sc-ds-text-input:focus-within.valid,.ds-input--container.sc-ds-text-input:focus-within.readonly){border-color:var(--ds-palette-mainBlue-70)}.ds-input--container.sc-ds-text-input:focus-within *.sc-ds-text-input>ds-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-overlay-black-10)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);width:100%;box-sizing:border-box;background-color:unset;flex-grow:1;height:var(--ds-spacing-xLarge);line-height:var(--ds-fontSize-24);color:var(--ds-palette-black-95);border:none;padding-block:var(--ds-spacing-4xSmall)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-palette-black-40)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-palette-black-40)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::placeholder{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-palette-black-70)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input: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-palette-black-95)}.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-palette-red-70)}.success-text--container.sc-ds-text-input{color:var(--ds-palette-green-70)}";export{b as ds_text_input}

package/dist/component-library/index-84fd0ee9.js

@@ -0,0 +1,2 @@
+var t=Object.defineProperty,e=(t,e)=>{var n;Object.entries(null!=(n=e.o.t)?n:{}).map((([n,[o]])=>{if(31&o||32&o){const o=t[n],l=Object.getOwnPropertyDescriptor(Object.getPrototypeOf(t),n);Object.defineProperty(t,n,{get(){return l.get.call(this)},set(t){l.set.call(this,t)},configurable:!0,enumerable:!0}),t[n]=e.l.has(n)?e.l.get(n):o}}))},n=t=>{if(t.__stencil__getHostRef)return t.__stencil__getHostRef()},o=(t,n)=>{t.__stencil__getHostRef=()=>n,n.i=t,e(t,n)},l=(t,e)=>e in t,s=(t,e)=>(0,console.error)(t,e),i=new Map,r=new Map,c="slot-fb{display:contents}slot-fb[hidden]{display:none}",u="http://www.w3.org/1999/xlink",f=["formAssociatedCallback","formResetCallback","formDisabledCallback","formStateRestoreCallback"],a="undefined"!=typeof window?window:{},d={u:0,p:"",jmp:t=>t(),raf:t=>requestAnimationFrame(t),ael:(t,e,n,o)=>t.addEventListener(e,n,o),rel:(t,e,n,o)=>t.removeEventListener(e,n,o),ce:(t,e)=>new CustomEvent(t,e)},p=t=>Promise.resolve(t),h=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(t){}return!1})(),v=!1,m=[],y=[],b=(t,e)=>n=>{t.push(n),v||(v=!0,e&&4&d.u?g($):d.raf($))},w=t=>{for(let e=0;e<t.length;e++)try{t[e](performance.now())}catch(t){s(t)}t.length=0},$=()=>{w(m),w(y),(v=m.length>0)&&d.raf($)},g=t=>p().then(t),S=b(y,!0),j=t=>"object"==(t=typeof t)||"function"===t;function O(t){var e,n,o;return null!=(o=null==(n=null==(e=t.head)?void 0:e.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?o:void 0}((e,n)=>{for(var o in n)t(e,o,{get:n[o],enumerable:!0})})({},{err:()=>C,map:()=>E,ok:()=>k,unwrap:()=>x,unwrapErr:()=>M});var k=t=>({isOk:!0,isErr:!1,value:t}),C=t=>({isOk:!1,isErr:!0,value:t});function E(t,e){if(t.isOk){const n=e(t.value);return n instanceof Promise?n.then((t=>k(t))):k(n)}if(t.isErr)return C(t.value);throw"should never get here"}var x=t=>{if(t.isOk)return t.value;throw t.value},M=t=>{if(t.isErr)return t.value;throw t.value},R=t=>{const e=A(t,"childNodes");t.tagName&&t.tagName.includes("-")&&t["s-cr"]&&"SLOT-FB"!==t.tagName&&N(e,t.tagName).forEach((t=>{1===t.nodeType&&"SLOT-FB"===t.tagName&&(t.hidden=!!P(t,F(t),!1).length)}));let n=0;for(n=0;n<e.length;n++){const t=e[n];1===t.nodeType&&A(t,"childNodes").length&&R(t)}};function N(t,e,n){let o,l=0,s=[];for(;l<t.length;l++){if(o=t[l],o["s-sr"]&&(!e||o["s-hn"]===e)&&(void 0===n||F(o)===n)&&(s.push(o),void 0!==n))return s;s=[...s,...N(o.childNodes,e,n)]}return s}var P=(t,e,n=!0)=>{const o=[];(n&&t["s-sr"]||!t["s-sr"])&&o.push(t);let l=t;for(;l=l.nextSibling;)F(l)!==e||!n&&l["s-sr"]||o.push(l);return o},T=(t,e)=>1===t.nodeType?null===t.getAttribute("slot")&&""===e||t.getAttribute("slot")===e:t["s-sn"]===e||""===e,F=t=>"string"==typeof t["s-sn"]?t["s-sn"]:1===t.nodeType&&t.getAttribute("slot")||void 0;function A(t,e){if("__"+e in t){const n=t["__"+e];return"function"!=typeof n?n:n.bind(t)}return"function"!=typeof t[e]?t[e]:t[e].bind(t)}var D,L,U,W=(t,e,...n)=>{let o=null,l=null,s=null,i=!1,r=!1;const c=[],u=e=>{for(let n=0;n<e.length;n++)o=e[n],Array.isArray(o)?u(o):null!=o&&"boolean"!=typeof o&&((i="function"!=typeof t&&!j(o))&&(o+=""),i&&r?c[c.length-1].h+=o:c.push(i?_(null,o):o),r=i)};if(u(n),e){e.key&&(l=e.key),e.name&&(s=e.name);{const t=e.className||e.class;t&&(e.class="object"!=typeof t?t:Object.keys(t).filter((e=>t[e])).join(" "))}}if("function"==typeof t)return t(null===e?{}:e,c,B);const f=_(t,null);return f.v=e,c.length>0&&(f.m=c),f.$=l,f.S=s,f},_=(t,e)=>({u:0,j:t,h:e,O:null,m:null,v:null,$:null,S:null}),H={},B={forEach:(t,e)=>t.map(z).forEach(e),map:(t,e)=>t.map(z).map(e).map(I)},z=t=>({vattrs:t.v,vchildren:t.m,vkey:t.$,vname:t.S,vtag:t.j,vtext:t.h}),I=t=>{if("function"==typeof t.vtag){const e={...t.vattrs};return t.vkey&&(e.key=t.vkey),t.vname&&(e.name=t.vname),W(t.vtag,e,...t.vchildren||[])}const e=_(t.vtag,t.vtext);return e.v=t.vattrs,e.m=t.vchildren,e.$=t.vkey,e.S=t.vname,e},V=(t,e)=>null==t||j(t)?t:4&e?"false"!==t&&(""===t||!!t):2&e?parseFloat(t):1&e?t+"":t,Y=t=>n(t).$hostElement$,q=(t,e,n)=>{const o=Y(t);return{emit:t=>G(o,e,{bubbles:!!(4&n),composed:!!(2&n),cancelable:!!(1&n),detail:t})}},G=(t,e,n)=>{const o=d.ce(e,n);return t.dispatchEvent(o),o},J=new WeakMap,K=t=>"sc-"+t.k,Q=(t,e,n,o,s,i)=>{if(n===o)return;let r=l(t,e),c=e.toLowerCase();if("class"===e){const e=t.classList,l=Z(n);let s=Z(o);e.remove(...l.filter((t=>t&&!s.includes(t)))),e.add(...s.filter((t=>t&&!l.includes(t))))}else if("style"===e){for(const e in n)o&&null!=o[e]||(e.includes("-")?t.style.removeProperty(e):t.style[e]="");for(const e in o)n&&o[e]===n[e]||(e.includes("-")?t.style.setProperty(e,o[e]):t.style[e]=o[e])}else if("key"===e);else if("ref"===e)o&&o(t);else if(r||"o"!==e[0]||"n"!==e[1]){const l=j(o);if((r||l&&null!==o)&&!s)try{if(t.tagName.includes("-"))t[e]!==o&&(t[e]=o);else{const l=null==o?"":o;"list"===e?r=!1:null!=n&&t[e]==l||("function"==typeof t.__lookupSetter__(e)?t[e]=l:t.setAttribute(e,l))}}catch(t){}let f=!1;c!==(c=c.replace(/^xlink\:?/,""))&&(e=c,f=!0),null==o||!1===o?!1===o&&""!==t.getAttribute(e)||(f?t.removeAttributeNS(u,e):t.removeAttribute(e)):(!r||4&i||s)&&!l&&1===t.nodeType&&(o=!0===o?"":o,f?t.setAttributeNS(u,e,o):t.setAttribute(e,o))}else if(e="-"===e[2]?e.slice(3):l(a,c)?c.slice(2):c[2]+e.slice(3),n||o){const l=e.endsWith(tt);e=e.replace(et,""),n&&d.rel(t,e,n,l),o&&d.ael(t,e,o,l)}},X=/\s/,Z=t=>("object"==typeof t&&t&&"baseVal"in t&&(t=t.baseVal),t&&"string"==typeof t?t.split(X):[]),tt="Capture",et=RegExp(tt+"$"),nt=(t,e,n)=>{const o=11===e.O.nodeType&&e.O.host?e.O.host:e.O,l=t&&t.v||{},s=e.v||{};for(const t of ot(Object.keys(l)))t in s||Q(o,t,l[t],void 0,n,e.u);for(const t of ot(Object.keys(s)))Q(o,t,l[t],s[t],n,e.u)};function ot(t){return t.includes("ref")?[...t.filter((t=>"ref"!==t)),"ref"]:t}var lt=!1,st=!1,it=!1,rt=!1,ct=(t,e,n)=>{var o;const l=e.m[n];let s,i,r,c=0;if(lt||(it=!0,"slot"===l.j&&(l.u|=l.m?2:1)),null!==l.h)s=l.O=a.document.createTextNode(l.h);else if(1&l.u)s=l.O=a.document.createTextNode(""),nt(null,l,rt);else{if(rt||(rt="svg"===l.j),!a.document)throw Error("You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component.");if(s=l.O=a.document.createElementNS(rt?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",!lt&&2&l.u?"slot-fb":l.j),rt&&"foreignObject"===l.j&&(rt=!1),nt(null,l,rt),null!=D&&void 0!==D&&s["s-si"]!==D&&s.classList.add(s["s-si"]=D),l.m)for(c=0;c<l.m.length;++c)i=ct(t,l,c),i&&s.appendChild(i);"svg"===l.j?rt=!1:"foreignObject"===s.tagName&&(rt=!0)}return s["s-hn"]=U,3&l.u&&(s["s-sr"]=!0,s["s-cr"]=L,s["s-sn"]=l.S||"",s["s-rf"]=null==(o=l.v)?void 0:o.ref,function(t){if(t.assignedElements||t.assignedNodes||!t["s-sr"])return;const e=e=>function(t){const n=[],o=this["s-sn"];(null==t?void 0:t.flatten)&&console.error("\n          Flattening is not supported for Stencil non-shadow slots. \n          You can use `.childNodes` to nested slot fallback content.\n          If you have a particular use case, please open an issue on the Stencil repo.\n        ");const l=this["s-cr"].parentElement;return(l.__childNodes?l.childNodes:(t=>{const e=[];for(let n=0;n<t.length;n++){const o=t[n]["s-nr"]||void 0;o&&o.isConnected&&e.push(o)}return e})(l.childNodes)).forEach((t=>{o===F(t)&&n.push(t)})),e?n.filter((t=>1===t.nodeType)):n}.bind(t);t.assignedElements=e(!0),t.assignedNodes=e(!1)}(s),r=t&&t.m&&t.m[n],r&&r.j===l.j&&t.O&&ut(t.O,!1),wt(L,s,e.O,null==t?void 0:t.O)),s},ut=(t,e)=>{d.u|=1;const n=Array.from(t.__childNodes||t.childNodes);for(let t=n.length-1;t>=0;t--){const o=n[t];o["s-hn"]!==U&&o["s-ol"]&&(bt(pt(o).parentNode,o,pt(o)),o["s-ol"].remove(),o["s-ol"]=void 0,o["s-sh"]=void 0,it=!0),e&&ut(o,e)}d.u&=-2},ft=(t,e,n,o,l,s)=>{let i,r=t["s-cr"]&&t["s-cr"].parentNode||t;for(r.shadowRoot&&r.tagName===U&&(r=r.shadowRoot);l<=s;++l)o[l]&&(i=ct(null,n,l),i&&(o[l].O=i,bt(r,i,pt(e))))},at=(t,e,n)=>{for(let o=e;o<=n;++o){const e=t[o];if(e){const t=e.O;yt(e),t&&(st=!0,t["s-ol"]?t["s-ol"].remove():ut(t,!0),t.remove())}}},dt=(t,e,n=!1)=>t.j===e.j&&("slot"===t.j?t.S===e.S:n?(n&&!t.$&&e.$&&(t.$=e.$),!0):t.$===e.$),pt=t=>t&&t["s-ol"]||t,ht=(t,e,n=!1)=>{const o=e.O=t.O,l=t.m,s=e.m,i=e.j,r=e.h;let c;null===r?(nt(t,e,rt="svg"===i||"foreignObject"!==i&&rt),null!==l&&null!==s?((t,e,n,o,l=!1)=>{let s,i,r=0,c=0,u=0,f=0,a=e.length-1,d=e[0],p=e[a],h=o.length-1,v=o[0],m=o[h];for(;r<=a&&c<=h;)if(null==d)d=e[++r];else if(null==p)p=e[--a];else if(null==v)v=o[++c];else if(null==m)m=o[--h];else if(dt(d,v,l))ht(d,v,l),d=e[++r],v=o[++c];else if(dt(p,m,l))ht(p,m,l),p=e[--a],m=o[--h];else if(dt(d,m,l))"slot"!==d.j&&"slot"!==m.j||ut(d.O.parentNode,!1),ht(d,m,l),bt(t,d.O,p.O.nextSibling),d=e[++r],m=o[--h];else if(dt(p,v,l))"slot"!==d.j&&"slot"!==m.j||ut(p.O.parentNode,!1),ht(p,v,l),bt(t,p.O,d.O),p=e[--a],v=o[++c];else{for(u=-1,f=r;f<=a;++f)if(e[f]&&null!==e[f].$&&e[f].$===v.$){u=f;break}u>=0?(i=e[u],i.j!==v.j?s=ct(e&&e[c],n,u):(ht(i,v,l),e[u]=void 0,s=i.O),v=o[++c]):(s=ct(e&&e[c],n,c),v=o[++c]),s&&bt(pt(d.O).parentNode,s,pt(d.O))}r>a?ft(t,null==o[h+1]?null:o[h+1].O,n,o,c,h):c>h&&at(e,r,a)})(o,l,e,s,n):null!==s?(null!==t.h&&(o.textContent=""),ft(o,null,e,s,0,s.length-1)):!n&&null!==l&&at(l,0,l.length-1),rt&&"svg"===i&&(rt=!1)):(c=o["s-cr"])?c.parentNode.textContent=r:t.h!==r&&(o.data=r)},vt=[],mt=t=>{let e,n,o;const l=t.__childNodes||t.childNodes;for(const t of l){if(t["s-sr"]&&(e=t["s-cr"])&&e.parentNode){n=e.parentNode.__childNodes||e.parentNode.childNodes;const l=t["s-sn"];for(o=n.length-1;o>=0;o--)if(e=n[o],!e["s-cn"]&&!e["s-nr"]&&e["s-hn"]!==t["s-hn"])if(T(e,l)){let n=vt.find((t=>t.C===e));st=!0,e["s-sn"]=e["s-sn"]||l,n?(n.C["s-sh"]=t["s-hn"],n.M=t):(e["s-sh"]=t["s-hn"],vt.push({M:t,C:e})),e["s-sr"]&&vt.map((t=>{T(t.C,e["s-sn"])&&(n=vt.find((t=>t.C===e)),n&&!t.M&&(t.M=n.M))}))}else vt.some((t=>t.C===e))||vt.push({C:e})}1===t.nodeType&&mt(t)}},yt=t=>{t.v&&t.v.ref&&t.v.ref(null),t.m&&t.m.map(yt)},bt=(t,e,n)=>("string"==typeof e["s-sn"]&&e["s-sr"]&&e["s-cr"]&&wt(e["s-cr"],e,t,e.parentElement),null==t?void 0:t.insertBefore(e,n));function wt(t,e,n,o){var l,s;let i;if(t&&"string"==typeof e["s-sn"]&&e["s-sr"]&&t.parentNode&&t.parentNode["s-sc"]&&(i=e["s-si"]||t.parentNode["s-sc"])){const t=e["s-sn"],r=e["s-hn"];if(null==(l=n.classList)||l.add(i+"-s"),o&&(null==(s=o.classList)?void 0:s.contains(i+"-s"))){let e=(o.__childNodes||o.childNodes)[0],n=!1;for(;e;){if(e["s-sn"]!==t&&e["s-hn"]===r&&e["s-sr"]){n=!0;break}e=e.nextSibling}n||o.classList.remove(i+"-s")}}}var $t=(t,e)=>{if(e&&!t.R&&e["s-p"]){const n=e["s-p"].push(new Promise((o=>t.R=()=>{e["s-p"].splice(n-1,1),o()})))}},gt=(t,e)=>{if(t.u|=16,!(4&t.u))return $t(t,t.N),S((()=>St(t,e)));t.u|=512},St=(t,e)=>{const n=t.$hostElement$,o=t.i;if(!o)throw Error(`Can't render component <${n.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let l;return e?(t.u|=256,t.P&&(t.P.map((([t,e])=>Pt(o,t,e,n))),t.P=void 0),l=Pt(o,"componentWillLoad",void 0,n)):l=Pt(o,"componentWillUpdate",void 0,n),l=jt(l,(()=>Pt(o,"componentWillRender",void 0,n))),jt(l,(()=>kt(t,o,e)))},jt=(t,e)=>Ot(t)?t.then(e).catch((t=>{console.error(t),e()})):e(),Ot=t=>t instanceof Promise||t&&t.then&&"function"==typeof t.then,kt=async(t,e,n)=>{var o;const l=t.$hostElement$,s=l["s-rc"];n&&(t=>{const e=t.o,n=t.$hostElement$,o=e.u,l=((t,e)=>{var n;const o=K(e),l=r.get(o);if(!a.document)return o;if(t=11===t.nodeType?t:a.document,l)if("string"==typeof l){let s,i=J.get(t=t.head||t);if(i||J.set(t,i=new Set),!i.has(o)){{s=document.querySelector(`[sty-id="${o}"]`)||a.document.createElement("style"),s.innerHTML=l;const i=null!=(n=d.T)?n:O(a.document);if(null!=i&&s.setAttribute("nonce",i),!(1&e.u))if("HEAD"===t.nodeName){const e=t.querySelectorAll("link[rel=preconnect]"),n=e.length>0?e[e.length-1].nextSibling:t.querySelector("style");t.insertBefore(s,(null==n?void 0:n.parentNode)===t?n:null)}else if("host"in t)if(h){const e=new CSSStyleSheet;e.replaceSync(l),t.adoptedStyleSheets=[e,...t.adoptedStyleSheets]}else{const e=t.querySelector("style");e?e.innerHTML=l+e.innerHTML:t.prepend(s)}else t.append(s);1&e.u&&t.insertBefore(s,null)}4&e.u&&(s.innerHTML+=c),i&&i.add(o)}}else t.adoptedStyleSheets.includes(l)||(t.adoptedStyleSheets=[...t.adoptedStyleSheets,l]);return o})(n.shadowRoot?n.shadowRoot:n.getRootNode(),e);(10&o&&2&o||128&o)&&(n["s-sc"]=l,n.classList.add(l+"-h"))})(t);Et(t,e,l,n),s&&(s.map((t=>t())),l["s-rc"]=void 0);{const e=null!=(o=l["s-p"])?o:[],n=()=>Mt(t);0===e.length?n():(Promise.all(e).then(n),t.u|=4,e.length=0)}},Ct=null,Et=(t,e,n,o)=>{try{Ct=e,e=e.render(),t.u&=-17,t.u|=2,((t,e,n=!1)=>{var o,l,s,i;const r=t.$hostElement$,c=t.o,u=t.F||_(null,null),f=(t=>t&&t.j===H)(e)?e:W(null,null,e);if(U=r.tagName,n&&f.v)for(const t of Object.keys(f.v))r.hasAttribute(t)&&!["key","ref","style","class"].includes(t)&&(f.v[t]=r[t]);if(f.j=null,f.u|=4,t.F=f,f.O=u.O=r.shadowRoot||r,D=r["s-sc"],lt=!(!(1&c.u)||128&c.u),L=r["s-cr"],st=!1,ht(u,f,n),d.u|=1,it){mt(f.O);for(const t of vt){const e=t.C;if(!e["s-ol"]&&a.document){const t=a.document.createTextNode("");t["s-nr"]=e,bt(e.parentNode,e["s-ol"]=t,e)}}for(const t of vt){const e=t.C,r=t.M;if(r){const t=r.parentNode;let n=r.nextSibling;{let s=null==(o=e["s-ol"])?void 0:o.previousSibling;for(;s;){let o=null!=(l=s["s-nr"])?l:null;if(o&&o["s-sn"]===e["s-sn"]&&t===(o.__parentNode||o.parentNode)){for(o=o.nextSibling;o===e||(null==o?void 0:o["s-sr"]);)o=null==o?void 0:o.nextSibling;if(!o||!o["s-nr"]){n=o;break}}s=s.previousSibling}}(!n&&t!==(e.__parentNode||e.parentNode)||(e.__nextSibling||e.nextSibling)!==n)&&e!==n&&(!e["s-hn"]&&e["s-ol"]&&(e["s-hn"]=e["s-ol"].parentNode.nodeName),bt(t,e,n),1===e.nodeType&&"SLOT-FB"!==e.tagName&&(e.hidden=null!=(s=e["s-ih"])&&s)),e&&"function"==typeof r["s-rf"]&&r["s-rf"](r)}else 1===e.nodeType&&(n&&(e["s-ih"]=null!=(i=e.hidden)&&i),e.hidden=!0)}}st&&R(f.O),d.u&=-2,vt.length=0,L=void 0})(t,e,o)}catch(e){s(e,t.$hostElement$)}return Ct=null,null},xt=()=>Ct,Mt=t=>{const e=t.$hostElement$,n=t.i,o=t.N;Pt(n,"componentDidRender",void 0,e),64&t.u?Pt(n,"componentDidUpdate",void 0,e):(t.u|=64,Tt(e),Pt(n,"componentDidLoad",void 0,e),t.A(e),o||Nt()),t.D(e),t.R&&(t.R(),t.R=void 0),512&t.u&&g((()=>gt(t,!1))),t.u&=-517},Rt=t=>{{const e=n(t),o=e.$hostElement$.isConnected;return o&&2==(18&e.u)&&gt(e,!1),o}},Nt=()=>{g((()=>G(a,"appload",{detail:{namespace:"component-library"}})))},Pt=(t,e,n,o)=>{if(t&&t[e])try{return t[e](n)}catch(t){s(t,o)}},Tt=t=>t.classList.add("hydrated"),Ft=(t,e,o,l)=>{const i=n(t);if(!i)throw Error(`Couldn't find host element for "${l.k}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`);const r=i.$hostElement$,c=i.l.get(e),u=i.u,f=i.i;if(o=V(o,l.t[e][0]),(!(8&u)||void 0===c)&&o!==c&&(!Number.isNaN(c)||!Number.isNaN(o))&&(i.l.set(e,o),f)){if(l.L&&128&u){const t=l.L[e];t&&t.map((t=>{try{f[t](o,c,e)}catch(t){s(t,r)}}))}if(2==(18&u)){if(f.componentShouldUpdate&&!1===f.componentShouldUpdate(o,c,e))return;gt(i,!1)}}},At=(t,e,o)=>{var l,s;const i=t.prototype;if(64&e.u&&1&o&&f.forEach((t=>{Object.defineProperty(i,t,{value(...e){const o=n(this),l=o.i;if(l){const n=l[t];"function"==typeof n&&n.call(l,...e)}else o.U.then((n=>{const o=n[t];"function"==typeof o&&o.call(n,...e)}))}})})),e.t||e.L||t.watchers){t.watchers&&!e.L&&(e.L=t.watchers);const r=Object.entries(null!=(l=e.t)?l:{});if(r.map((([t,[l]])=>{if(31&l||2&o&&32&l){const{get:s,set:r}=Object.getOwnPropertyDescriptor(i,t)||{};s&&(e.t[t][0]|=2048),r&&(e.t[t][0]|=4096),(1&o||!s)&&Object.defineProperty(i,t,{get(){{if(!(2048&e.t[t][0]))return((t,e)=>n(this).l.get(e))(0,t);const o=n(this),l=o?o.i:i;if(!l)return;return l[t]}},configurable:!0,enumerable:!0}),Object.defineProperty(i,t,{set(s){const i=n(this);if(r){const n=32&l?this[t]:i.$hostElement$[t];return void 0===n&&i.l.get(t)?s=i.l.get(t):!i.l.get(t)&&n&&i.l.set(t,n),r.call(this,V(s,l)),void Ft(this,t,s=32&l?this[t]:i.$hostElement$[t],e)}{if(!(1&o&&4096&e.t[t][0]))return Ft(this,t,s,e),void(1&o&&!i.i&&i.U.then((()=>{4096&e.t[t][0]&&i.i[t]!==i.l.get(t)&&(i.i[t]=s)})));const n=()=>{const n=i.i[t];!i.l.get(t)&&n&&i.l.set(t,n),i.i[t]=V(s,l),Ft(this,t,i.i[t],e)};i.i?n():i.U.then((()=>n()))}}})}else 1&o&&64&l&&Object.defineProperty(i,t,{value(...e){var o;const l=n(this);return null==(o=null==l?void 0:l.W)?void 0:o.then((()=>{var n;return null==(n=l.i)?void 0:n[t](...e)}))}})})),1&o){const o=new Map;i.attributeChangedCallback=function(t,l,s){d.jmp((()=>{var r;const c=o.get(t);if(this.hasOwnProperty(c))s=this[c],delete this[c];else{if(i.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==s)return;if(null==c){const o=n(this),i=null==o?void 0:o.u;if(i&&!(8&i)&&128&i&&s!==l){const n=o.i,i=null==(r=e.L)?void 0:r[t];null==i||i.forEach((e=>{null!=n[e]&&n[e].call(n,s,l,t)}))}return}}const u=Object.getOwnPropertyDescriptor(i,c);(s=(null!==s||"boolean"!=typeof this[c])&&s)===this[c]||u.get&&!u.set||(this[c]=s)}))},t.observedAttributes=Array.from(new Set([...Object.keys(null!=(s=e.L)?s:{}),...r.filter((([t,e])=>15&e[0])).map((([t,e])=>{const n=e[1]||t;return o.set(n,t),n}))]))}}return t},Dt=(t,e)=>{Pt(t,"connectedCallback",void 0,e)},Lt=(t,e)=>{Pt(t,"disconnectedCallback",void 0,e||t)},Ut=(t,e={})=>{var o;if(!a.document)return void console.warn("Stencil: No document found. Skipping bootstrapping lazy components.");const l=[],u=e.exclude||[],f=a.customElements,p=a.document.head,v=p.querySelector("meta[charset]"),m=a.document.createElement("style"),y=[];let b,w=!0;Object.assign(d,e),d.p=new URL(e.resourcesUrl||"./",a.document.baseURI).href;let $=!1;if(t.map((t=>{t[1].map((e=>{var o;const c={u:e[0],k:e[1],t:e[2],_:e[3]};4&c.u&&($=!0),c.t=e[2],c._=e[3],c.L=null!=(o=e[4])?o:{};const p=c.k,v=class extends HTMLElement{constructor(t){if(super(t),this.hasRegisteredEventListeners=!1,((t,e)=>{const n={u:0,$hostElement$:t,o:e,l:new Map};n.W=new Promise((t=>n.D=t)),n.U=new Promise((t=>n.A=t)),t["s-p"]=[],t["s-rc"]=[];const o=n;t.__stencil__getHostRef=()=>o})(t=this,c),1&c.u)if(t.shadowRoot){if("open"!==t.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${c.k}! Mode is set to ${t.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else t.attachShadow({mode:"open"})}connectedCallback(){const t=n(this);this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0,_t(this,t,c._)),b&&(clearTimeout(b),b=null),w?y.push(this):d.jmp((()=>(t=>{if(!(1&d.u)){const e=n(t),o=e.o,l=()=>{};if(1&e.u)_t(t,e,o._),(null==e?void 0:e.i)?Dt(e.i,t):(null==e?void 0:e.U)&&e.U.then((()=>Dt(e.i,t)));else{e.u|=1,12&o.u&&(t=>{if(!a.document)return;const e=t["s-cr"]=a.document.createComment("");e["s-cn"]=!0,bt(t,e,t.firstChild)})(t);{let n=t;for(;n=n.parentNode||n.host;)if(n["s-p"]){$t(e,e.N=n);break}}o.t&&Object.entries(o.t).map((([e,[n]])=>{if(31&n&&t.hasOwnProperty(e)){const n=t[e];delete t[e],t[e]=n}})),(async(t,e,n)=>{let o;if(!(32&e.u)){if(e.u|=32,n.H){const l=((t,e)=>{const n=t.k.replace(/-/g,"_"),o=t.H;if(!o)return;const l=i.get(o);return l?l[n]:import(`./${o}.entry.js`).then((t=>(i.set(o,t),t[n])),(t=>{s(t,e.$hostElement$)}))
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n,e);if(l&&"then"in l){const t=()=>{};o=await l,t()}else o=l;if(!o)throw Error(`Constructor for "${n.k}#${e.B}" was not found`);o.isProxied||(n.L=o.watchers,At(o,n,2),o.isProxied=!0);const r=()=>{};e.u|=8;try{new o(e)}catch(e){s(e,t)}e.u&=-9,e.u|=128,r(),Dt(e.i,t)}else o=t.constructor,customElements.whenDefined(t.localName).then((()=>e.u|=128));if(o&&o.style){let t;"string"==typeof o.style&&(t=o.style);const e=K(n);if(!r.has(e)){const o=()=>{};((t,e,n)=>{let o=r.get(t);h&&n?(o=o||new CSSStyleSheet,"string"==typeof o?o=e:o.replaceSync(e)):o=e,r.set(t,o)})(e,t,!!(1&n.u)),o()}}}const l=e.N,c=()=>gt(e,!0);l&&l["s-rc"]?l["s-rc"].push(c):c()})(t,e,o)}l()}})(this)))}disconnectedCallback(){d.jmp((()=>(async t=>{if(!(1&d.u)){const e=n(t);e.I&&(e.I.map((t=>t())),e.I=void 0),(null==e?void 0:e.i)?Lt(e.i,t):(null==e?void 0:e.U)&&e.U.then((()=>Lt(e.i,t)))}J.has(t)&&J.delete(t),t.shadowRoot&&J.has(t.shadowRoot)&&J.delete(t.shadowRoot)})(this))),d.raf((()=>{var t;const e=n(this),o=y.findIndex((t=>t===this));o>-1&&y.splice(o,1),(null==(t=null==e?void 0:e.F)?void 0:t.O)instanceof Node&&!e.F.O.isConnected&&delete e.F.O}))}componentOnReady(){return n(this).U}};64&c.u&&(v.formAssociated=!0),c.H=t[0],u.includes(p)||f.get(p)||(l.push(p),f.define(p,At(v,c,1)))}))})),l.length>0&&($&&(m.textContent+=c),m.textContent+=l.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",m.innerHTML.length)){m.setAttribute("data-styles","");const t=null!=(o=d.T)?o:O(a.document);null!=t&&m.setAttribute("nonce",t),p.insertBefore(m,v?v.nextSibling:p.firstChild)}w=!1,y.length?y.map((t=>t.connectedCallback())):d.jmp((()=>b=setTimeout(Nt,30)))},Wt=(t,e)=>e,_t=(t,e,n)=>{n&&a.document&&n.map((([n,o,l])=>{const s=Bt(a.document,t,n),i=Ht(e,l),r=zt(n);d.ael(s,o,i,r),(e.I=e.I||[]).push((()=>d.rel(s,o,i,r)))}))},Ht=(t,e)=>n=>{var o;try{256&t.u?null==(o=t.i)||o[e](n):(t.P=t.P||[]).push([e,n])}catch(e){s(e,t.$hostElement$)}},Bt=(t,e,n)=>4&n?t:e,zt=t=>({passive:!!(1&t),capture:!!(2&t)}),It=t=>d.T=t;export{Wt as F,H,Y as a,Ut as b,q as c,Rt as f,xt as g,W as h,p,o as r,It as s}

package/dist/component-library/index.esm.js

@@ -1 +1 @@
-export{c as configure}from"./store-b8d17c10.js";import"./index-434995e1.js";
+export{c as configure}from"./store-73a56075.js";import"./index-84fd0ee9.js";

package/dist/component-library/{store-b8d17c10.js → store-73a56075.js}

@@ -1 +1 @@
-import{g as e,f as t}from"./index-434995e1.js";const s=e=>!("isConnected"in e)||e.isConnected,n=(()=>{let e;return(...t)=>{e&&clearTimeout(e),e=setTimeout((()=>{e=0,(e=>{for(let t of e.keys())e.set(t,e.get(t).filter(s))})(...t)}),2e3)}})(),o=e=>"function"==typeof e?e():e,r={validation:"client"},{state:i,set:c}=(()=>{const s=((e,t=((e,t)=>e!==t))=>{const s=o(e);let n=new Map(Object.entries(s??{}));const r={dispose:[],get:[],set:[],reset:[]},i=()=>{n=new Map(Object.entries(o(e)??{})),r.reset.forEach((e=>e()))},c=e=>(r.get.forEach((t=>t(e))),n.get(e)),a=(e,s)=>{const o=n.get(e);t(s,o,e)&&(n.set(e,s),r.set.forEach((t=>t(e,s,o))))},p="undefined"==typeof Proxy?{}:new Proxy(s,{get:(e,t)=>c(t),ownKeys:()=>Array.from(n.keys()),getOwnPropertyDescriptor:()=>({enumerable:!0,configurable:!0}),has:(e,t)=>n.has(t),set:(e,t,s)=>(a(t,s),!0)}),u=(e,t)=>(r[e].push(t),()=>{((e,t)=>{const s=e.indexOf(t);s>=0&&(e[s]=e[e.length-1],e.length--)})(r[e],t)});return{state:p,get:c,set:a,on:u,onChange:(t,s)=>{const n=u("set",((e,n)=>{e===t&&s(n)})),r=u("reset",(()=>s(o(e)[t])));return()=>{n(),r()}},use:(...e)=>{const t=e.reduce(((e,t)=>(t.set&&e.push(u("set",t.set)),t.get&&e.push(u("get",t.get)),t.reset&&e.push(u("reset",t.reset)),t.dispose&&e.push(u("dispose",t.dispose)),e)),[]);return()=>t.forEach((e=>e()))},dispose:()=>{r.dispose.forEach((e=>e())),i()},reset:i,forceUpdate:e=>{const t=n.get(e);r.set.forEach((s=>s(e,t,t)))}}})({...r},void 0);return s.use((()=>{if("function"!=typeof e)return{};const s=new Map;return{dispose:()=>s.clear(),get:t=>{const n=e();n&&((e,t,s)=>{const n=e.get(t);n?n.includes(s)||n.push(s):e.set(t,[s])})(s,t,n)},set:e=>{const o=s.get(e);o&&s.set(e,o.filter(t)),n(s)},reset:()=>{s.forEach((e=>e.forEach(t))),n(s)}}})()),s})(),a=e=>i.validation===e,p=({validation:e})=>{c("validation",e||r.validation)};export{p as c,a as i}
+import{g as e,f as t}from"./index-84fd0ee9.js";const s=e=>!("isConnected"in e)||e.isConnected,n=(()=>{let e;return(...t)=>{e&&clearTimeout(e),e=setTimeout((()=>{e=0,(e=>{for(let t of e.keys())e.set(t,e.get(t).filter(s))})(...t)}),2e3)}})(),o=e=>"function"==typeof e?e():e,r={validation:"client"},{state:i,set:c}=(()=>{const s=((e,t=((e,t)=>e!==t))=>{const s=o(e);let n=new Map(Object.entries(s??{}));const r={dispose:[],get:[],set:[],reset:[]},i=()=>{n=new Map(Object.entries(o(e)??{})),r.reset.forEach((e=>e()))},c=e=>(r.get.forEach((t=>t(e))),n.get(e)),a=(e,s)=>{const o=n.get(e);t(s,o,e)&&(n.set(e,s),r.set.forEach((t=>t(e,s,o))))},p="undefined"==typeof Proxy?{}:new Proxy(s,{get:(e,t)=>c(t),ownKeys:()=>Array.from(n.keys()),getOwnPropertyDescriptor:()=>({enumerable:!0,configurable:!0}),has:(e,t)=>n.has(t),set:(e,t,s)=>(a(t,s),!0)}),u=(e,t)=>(r[e].push(t),()=>{((e,t)=>{const s=e.indexOf(t);s>=0&&(e[s]=e[e.length-1],e.length--)})(r[e],t)});return{state:p,get:c,set:a,on:u,onChange:(t,s)=>{const n=u("set",((e,n)=>{e===t&&s(n)})),r=u("reset",(()=>s(o(e)[t])));return()=>{n(),r()}},use:(...e)=>{const t=e.reduce(((e,t)=>(t.set&&e.push(u("set",t.set)),t.get&&e.push(u("get",t.get)),t.reset&&e.push(u("reset",t.reset)),t.dispose&&e.push(u("dispose",t.dispose)),e)),[]);return()=>t.forEach((e=>e()))},dispose:()=>{r.dispose.forEach((e=>e())),i()},reset:i,forceUpdate:e=>{const t=n.get(e);r.set.forEach((s=>s(e,t,t)))}}})({...r},void 0);return s.use((()=>{if("function"!=typeof e)return{};const s=new Map;return{dispose:()=>s.clear(),get:t=>{const n=e();n&&((e,t,s)=>{const n=e.get(t);n?n.includes(s)||n.push(s):e.set(t,[s])})(s,t,n)},set:e=>{const o=s.get(e);o&&s.set(e,o.filter(t)),n(s)},reset:()=>{s.forEach((e=>e.forEach(t))),n(s)}}})()),s})(),a=e=>i.validation===e,p=({validation:e})=>{c("validation",e||r.validation)};export{p as c,a as i}

package/dist/components/controlUtils.js

@@ -1,4 +1,4 @@
-const getOptionalText = (text, optionalText) => [text, Boolean(optionalText) ? optionalText : '(optional)'].join(' ');
+const getOptionalText = (text, optionalText) => [text, optionalText || '(optional)'].join(' ');
 const getRequiredText = (text) => [text, '*'].join(' ');
 
 export { getOptionalText as a, getRequiredText as g };

package/dist/components/ds-accordion.js

@@ -1,9 +1,11 @@
 import { p as proxyCustomElement, H, h } from './index2.js';
 import { c as classNames } from './index3.js';
-import { d as defineCustomElement$3 } from './ds-button2.js';
-import { d as defineCustomElement$2 } from './ds-icon2.js';
+import { d as defineCustomElement$5 } from './ds-button2.js';
+import { d as defineCustomElement$4 } from './ds-icon2.js';
+import { d as defineCustomElement$3 } from './ds-spinner2.js';
+import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
 
-const dsAccordionCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-accordion__open-button{color:var(--ds-textColor-default);outline:var(--ds-borderWidth-thick) solid transparent;fill:var(--ds-textColor-default);position:relative;all:unset;align-items:flex-start;box-sizing:border-box;display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);position:relative;width:100%}.ds-accordion__open-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-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before,.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after{content:\"\";position:absolute;top:0;width:var(--ds-spacing-small);height:100%}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before{left:calc(var(--ds-spacing-small) * -1)}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after{right:calc(var(--ds-spacing-small) * -1)}.ds-accordion__open-button:hover{cursor:pointer}.ds-accordion__open-button:hover,.ds-accordion__open-button:hover::before,.ds-accordion__open-button:hover::after{background:var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843))}.ds-accordion__open-button:active,.ds-accordion__open-button:active::before,.ds-accordion__open-button:active::after{background:var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078))}.ds-accordion__open-button:focus-visible{z-index:1}.ds-accordion__open-button.ds-accordion--default{padding:var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__open-button.ds-accordion--compact{font-size:var(--ds-fontSize-16);padding:var(--ds-spacing-xSmall) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);line-height:var(--ds-lineHeight-large);font-weight:var(--ds-fontWeight-semibold)}.ds-accordion__open-button.ds-accordion--border-aligned:not(:focus-visible){padding-inline:0;margin-inline:var(--ds-spacing-small);position:relative;width:calc(100% - var(--ds-spacing-large))}:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border){border-top:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC)}:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border):focus-visible{border-top-color:transparent}.ds-accordion__open-button[aria-expanded=false]{border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC)}.ds-accordion__panel--border-aligned{position:relative;width:calc(100% - 32px)}.ds-accordion__panel--border-aligned::before{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;left:0px;background:var(--ds-palette-white);width:var(--ds-spacing-small)}.ds-accordion__panel--border-aligned::after{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;right:0px;background:var(--ds-palette-white);width:var(--ds-spacing-small)}.ds-accordion__panel--expanded{display:block;border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC);padding-inline:var(--ds-spacing-small)}::slotted([slot=header]){color:var(--ds-textColor-default)}.ds-accordion__content{color:var(--ds-textColor-default, #1A1A1A);font-family:var(--ds-fontFamily-body);padding-block:var(--ds-spacing-small)}.ds-accordion__content .ds-accordion--default{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-xLarge);letter-spacing:var(--ds-letterSpacing-wide)}@media (min-width: 30rem){.ds-accordion__content .ds-accordion--default{font-size:var(--ds-fontSize-18)}}.ds-accordion__content .ds-accordion--compact{font-size:var(--fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__close-button{display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);letter-spacing:var(--ds-letterSpacing-wide);width:max-content}";
+const dsAccordionCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-accordion__open-button{color:var(--ds-palette-black-95);outline:var(--ds-borderWidth-thick) solid transparent;fill:var(--ds-palette-black-95);position:relative;all:unset;align-items:flex-start;box-sizing:border-box;display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);position:relative;width:100%}.ds-accordion__open-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before,.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after{content:\"\";position:absolute;top:0;width:var(--ds-spacing-small);height:100%}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before{left:calc(var(--ds-spacing-small) * -1)}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after{right:calc(var(--ds-spacing-small) * -1)}.ds-accordion__open-button:hover{cursor:pointer}.ds-accordion__open-button:hover,.ds-accordion__open-button:hover::before,.ds-accordion__open-button:hover::after{background:var(--ds-overlay-black-10)}.ds-accordion__open-button:active,.ds-accordion__open-button:active::before,.ds-accordion__open-button:active::after{background:var(--ds-overlay-black-15)}.ds-accordion__open-button:focus-visible{z-index:1}.ds-accordion__open-button.ds-accordion--default{padding:var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__open-button.ds-accordion--compact{font-size:var(--ds-fontSize-16);padding:var(--ds-spacing-xSmall) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);line-height:var(--ds-lineHeight-large);font-weight:var(--ds-fontWeight-semibold)}.ds-accordion__open-button.ds-accordion--border-aligned:not(:focus-visible){padding-inline:0;margin-inline:var(--ds-spacing-small);position:relative;width:calc(100% - var(--ds-spacing-large))}:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border){border-top:var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20)}:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border):focus-visible{border-top-color:transparent}.ds-accordion__open-button[aria-expanded=false]{border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20)}.ds-accordion__panel--border-aligned{position:relative;width:calc(100% - 32px)}.ds-accordion__panel--border-aligned::before{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;left:0px;background:var(--ds-palette-white);width:var(--ds-spacing-small)}.ds-accordion__panel--border-aligned::after{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;right:0px;background:var(--ds-palette-white);width:var(--ds-spacing-small)}.ds-accordion__panel--expanded{display:block;border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20);padding-inline:var(--ds-spacing-small)}::slotted([slot=header]){color:var(--ds-palette-black-95)}.ds-accordion__content{color:var(--ds-palette-black-95);font-family:var(--ds-fontFamily-body);padding-block:var(--ds-spacing-small)}.ds-accordion__content .ds-accordion--default{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-xLarge);letter-spacing:var(--ds-letterSpacing-wide)}@media (min-width: 30rem){.ds-accordion__content .ds-accordion--default{font-size:var(--ds-fontSize-18)}}.ds-accordion__content .ds-accordion--compact{font-size:var(--fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__close-button{display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);letter-spacing:var(--ds-letterSpacing-wide);width:max-content}";
 const DsAccordionStyle0 = dsAccordionCss;
 
 const DsAccordion$1 = proxyCustomElement(class DsAccordion extends H {
@@ -43,31 +45,29 @@ const DsAccordion$1 = proxyCustomElement(class DsAccordion extends H {
     handleKeyDown = (event) => {
         switch (event.key) {
             case 'Enter':
-            case ' ':
+            case ' ': {
                 event.preventDefault();
                 const isCloseButton = event.target.closest('.ds-accordion__close-button');
                 this.shouldMoveFocus = isCloseButton ? true : false;
                 this.isExpanded = !this.isExpanded;
                 break;
+            }
         }
     };
     render() {
         const iconSize = this.variant === 'compact' ? '1.5rem' : '2rem';
         const buttonSize = this.variant === 'compact' ? 'small' : 'medium';
-        return (h("div", { key: 'aeaa883c8500bda65c480ccea434cbeadc53ce69', class: classNames('ds-accordion', `ds-accordion--${this.variant}`, {
-                'ds-accordion--border-aligned': this.borderAligned
-            }), role: "presentation" }, h("div", { key: 'a7947fd7784084bcec3a02f2219fa2494366d590', class: "ds-accordion__item" }, h("div", { key: '20532a2d3f109e38341d496ffee0d2d02cfb26f4', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, h("button", { key: '40513d75b15c4701498b83c9a6afbcd7a322c73c', class: classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
+        return (h("div", { key: '4f11a49feb015126dade5f95608ef6d02ddc04be', class: classNames('ds-accordion', `ds-accordion--${this.variant}`, {
+                'ds-accordion--border-aligned': this.borderAligned,
+            }), role: "presentation" }, h("div", { key: '8e8c4eaee0a6d89768856330e42205601da619e7', class: "ds-accordion__item" }, h("div", { key: 'ccc39341fadb2b83eab4b1df6eab08adaef26402', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, h("button", { key: 'ed7493083f683eaf3fb4b62b11d3dec94864f186', class: classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
                 'ds-accordion--border-aligned': this.borderAligned,
-                'ds-accordion--hide-top-border': this.hideTopBorder
-            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, h("span", { key: '883d1cbf50b3cfb0beacd62570a1077aa8bd7a04', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ?
-            h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_up" })
-            : h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), h("slot", { key: 'a8ddede4cec5ab873fb69ab9963e7f143613fe0f', name: "header" }))), h("div", { key: '76cf35006795136597efd9c424237ac1c48bbc74', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: classNames('ds-accordion__panel', `ds-accordion__panel--${this.variant}`, {
+                'ds-accordion--hide-top-border': this.hideTopBorder,
+            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: el => (this.headerButtonRef = el) }, h("span", { key: '7da3b276200740ceec215ca60a3fe9fdf231cff5', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ? h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_up" }) : h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), h("slot", { key: '6703dfa726891be180aa667f985288c0ec86287a', name: "header" }))), h("div", { key: 'c8d05bc7d6f243c5df2acc8bf21f218bbceb9005', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: classNames('ds-accordion__panel', `ds-accordion__panel--${this.variant}`, {
                 'ds-accordion__panel--border-aligned': this.borderAligned,
-                'ds-accordion__panel--expanded': this.isExpanded
-            }), hidden: !this.isExpanded }, h("div", { key: '6236db88bc5735ec4e5618a63e303d997335e1be', class: "ds-accordion__content" }, h("slot", { key: '4d206253394878b4fba531cea6870aaaa3e63821', name: "content" })), this.useCloseButton &&
-            h("ds-button", { key: 'e5c0f76a802e6046f2872509a4944b72aa376bf1', "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, class: classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
-                    'ds-accordion--border-aligned': this.borderAligned
-                }), fontWeight: 'semiBold', variant: 'supplementary', colour: 'black', icon: 'keyboard_arrow_up', iconPosition: 'start', onClick: this.handleClick, onKeyDown: this.handleKeyDown, value: this.closeButtonLabel, size: buttonSize, type: 'button' })))));
+                'ds-accordion__panel--expanded': this.isExpanded,
+            }), hidden: !this.isExpanded }, h("div", { key: '45e490a2d046cb05e403d8fc9be0baa3f0ec8401', class: "ds-accordion__content" }, h("slot", { key: 'efa60ab6f417045bfb0dd34d663581fc935b3307', name: "content" })), this.useCloseButton && (h("ds-button", { key: 'dfb14603e659d905a606cee3cfccedd0b4a9f04e', "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, class: classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
+                'ds-accordion--border-aligned': this.borderAligned,
+            }), fontWeight: "semiBold", variant: "supplementary", colour: "black", icon: "keyboard_arrow_up", iconPosition: "start", onClick: this.handleClick, onKeyDown: this.handleKeyDown, value: this.closeButtonLabel, size: buttonSize, type: "button" }))))));
     }
     static get watchers() { return {
         "isExpanded": ["watchHandler"]
@@ -90,7 +90,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ds-accordion", "ds-button", "ds-icon"];
+    const components = ["ds-accordion", "ds-button", "ds-icon", "ds-spinner", "ds-visually-hidden"];
     components.forEach(tagName => { switch (tagName) {
         case "ds-accordion":
             if (!customElements.get(tagName)) {
@@ -99,10 +99,20 @@ function defineCustomElement$1() {
             break;
         case "ds-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$5();
             }
             break;
         case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ds-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ds-visually-hidden":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/ds-button2.js

@@ -1,9 +1,11 @@
-import { p as proxyCustomElement, H, h } from './index2.js';
+import { p as proxyCustomElement, H, h, F as Fragment } from './index2.js';
 import { c as classNames } from './index3.js';
 import { i as inheritAriaAttributes, a as inheritSpecifiedAttributes, b as inheritAttributes } from './attributes.js';
-import { d as defineCustomElement$1 } from './ds-icon2.js';
+import { d as defineCustomElement$3 } from './ds-icon2.js';
+import { d as defineCustomElement$2 } from './ds-spinner2.js';
+import { d as defineCustomElement$1 } from './ds-visually-hidden2.js';
 
-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 dsButtonCss = ".dsNoStyleLeak.sc-ds-button *.sc-ds-button,.sc-ds-button-h *.sc-ds-button{all:unset;box-sizing:border-box;display:block}.sc-ds-button:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.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:has(ds-spinner) .button-value.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-palette-mainBlue-70);border-color:transparent;color:var(--ds-palette-white)}.ds-button.primary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.blue.sc-ds-button:hover{background-color:var(--ds-palette-mainBlue-80)}.ds-button.primary.blue.sc-ds-button:active,.ds-button.primary.blue--active.sc-ds-button{background-color:var(--ds-palette-mainBlue-90)}.ds-button.primary.blue.disabled.sc-ds-button,.ds-button.primary.blue.sc-ds-button:disabled{background-color:var(--ds-overlay-black-10);border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.primary.black.sc-ds-button{background-color:var(--ds-palette-black-95);border-color:transparent;color:var(--ds-palette-white)}.ds-button.primary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.black.sc-ds-button:hover{background-color:var(--ds-palette-black-80)}.ds-button.primary.black.sc-ds-button:active,.ds-button.primary.black--active.sc-ds-button{background-color:var(--ds-palette-white-70)}.ds-button.primary.black.disabled.sc-ds-button,.ds-button.primary.black.sc-ds-button:disabled{background-color:var(--ds-overlay-black-10);border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.primary.white.sc-ds-button{background-color:var(--ds-palette-white);border-color:transparent;color:var(--ds-palette-black-95)}.ds-button.primary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);outline-color:var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.white.sc-ds-button:hover{background-color:var(--ds-palette-black-10)}.ds-button.primary.white.sc-ds-button:active,.ds-button.primary.white--active.sc-ds-button{background-color:var(--ds-palette-black-20)}.ds-button.primary.white.disabled.sc-ds-button,.ds-button.primary.white.sc-ds-button:disabled{background-color:var(--ds-overlay-white-10);border-color:transparent;color:var(--ds-overlay-white-40)}.ds-button.secondary.blue.sc-ds-button{background-color:var(--ds-palette-white);border-color:var(--ds-palette-mainBlue-70);color:var(--ds-palette-mainBlue-70)}.ds-button.secondary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.blue.sc-ds-button:hover{background-color:var(--ds-palette-mainBlue-05)}.ds-button.secondary.blue.sc-ds-button:active,.ds-button.secondary.blue--active.sc-ds-button{background-color:var(--ds-palette-mainBlue-10)}.ds-button.secondary.blue.disabled.sc-ds-button,.ds-button.secondary.blue.sc-ds-button:disabled{background-color:var(--ds-palette-white);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40)}.ds-button.secondary.black.sc-ds-button{background-color:transparent;border-color:var(--ds-palette-black-95);color:var(--ds-palette-black-95)}.ds-button.secondary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.black.sc-ds-button:hover{background-color:var(--ds-overlay-black-10)}.ds-button.secondary.black.sc-ds-button:active,.ds-button.secondary.black--active.sc-ds-button{background-color:var(--ds-overlay-black-15)}.ds-button.secondary.black.disabled.sc-ds-button,.ds-button.secondary.black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40)}.ds-button.secondary.white.sc-ds-button{background-color:transparent;border-color:var(--ds-palette-white);color:var(--ds-palette-white)}.ds-button.secondary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);outline-color:var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.white.sc-ds-button:hover{background-color:var(--ds-overlay-white-30)}.ds-button.secondary.white.sc-ds-button:active,.ds-button.secondary.white--active.sc-ds-button{background-color:var(--ds-overlay-white-40)}.ds-button.secondary.white.disabled.sc-ds-button,.ds-button.secondary.white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-overlay-white-15);color:var(--ds-overlay-white-40)}.ds-button.supplementary.blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-palette-mainBlue-70)}.ds-button.supplementary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.blue.sc-ds-button:hover{background-color:var(--ds-palette-mainBlue-05)}.ds-button.supplementary.blue.sc-ds-button:active,.ds-button.supplementary.blue--active.sc-ds-button{background-color:var(--ds-palette-mainBlue-10)}.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.disabled.sc-ds-button,.ds-button.supplementary.blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.supplementary.black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-palette-black-95)}.ds-button.supplementary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline-color:var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.black.sc-ds-button:hover{background-color:var(--ds-overlay-black-10)}.ds-button.supplementary.black.sc-ds-button:active,.ds-button.supplementary.black--active.sc-ds-button{background-color:var(--ds-overlay-black-15)}.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.disabled.sc-ds-button,.ds-button.supplementary.black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-palette-black-40)}.ds-button.supplementary.white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-palette-white)}.ds-button.supplementary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);outline-color:var(--ds-palette-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.white.sc-ds-button:hover{background-color:var(--ds-overlay-white-30)}.ds-button.supplementary.white.sc-ds-button:active,.ds-button.supplementary.white--active.sc-ds-button{background-color:var(--ds-overlay-white-40)}.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.disabled.sc-ds-button,.ds-button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-overlay-white-40)}.ds-button.icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}";
 const DsButtonStyle0 = dsButtonCss;
 
 const DsButton = proxyCustomElement(class DsButton extends H {
@@ -24,9 +26,15 @@ const DsButton = proxyCustomElement(class DsButton extends H {
     iconPosition = 'start';
     type = 'button';
     disabled = false;
+    isLoading = false;
+    useSpinner = false;
+    spinnerHiddenText;
     fullWidth = false;
     ariaDisabled = 'false';
     componentWillLoad() {
+        if (this.useSpinner && !this.spinnerHiddenText) {
+            throw new Error('spinnerHiddenText is required when useSpinner is true.');
+        }
         this.inheritedAttributes = {
             ...inheritAriaAttributes(this.el, ['aria-disabled']),
             ...inheritSpecifiedAttributes(this.el, [
@@ -67,15 +75,35 @@ const DsButton = proxyCustomElement(class DsButton extends H {
                 break;
         }
     };
-    render() {
+    getSpinnerColour = () => {
+        if (this.variant === 'primary') {
+            if (this.colour === 'blue')
+                return 'white';
+            if (this.colour === 'white')
+                return 'black';
+            if (this.colour === 'black')
+                return 'white';
+        }
+        return this.colour;
+    };
+    renderButton = () => {
         const classes = classNames(`ds-button ${this.variant} ${this.colour} ${this.size}`, {
             'icon-start': this.icon && this.iconPosition === 'start' && this.value,
             'icon-end': this.icon && this.iconPosition === 'end' && this.value,
             'icon-only': this.icon && !this.value,
         });
         const iconSize = this.size === 'small' ? '1rem' : undefined;
-        const isDisabled = this.disabled || this.ariaDisabled === 'true';
-        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 }))));
+        return (h("button", { ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": this.ariaDisabled == 'true' ? 'true' : 'false', disabled: this.disabled, ...this.inheritedAttributes }, this.isLoading ?
+            h(Fragment, null, h("ds-spinner", { hiddenAssistiveText: this.spinnerHiddenText, spinnerColor: this.getSpinnerColour(), size: this.size == 'small' ? 'small' : 'medium' }), this.value && h("span", { class: "button-value" }, this.value))
+            :
+                h(Fragment, null, h("slot", { name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { name: this.icon, size: iconSize })), this.value && h("span", { class: "button-value" }, this.value), h("slot", { name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { name: this.icon, size: iconSize })))));
+    };
+    render() {
+        const buttonElement = this.renderButton();
+        return (this.useSpinner ?
+            h("div", { "aria-live": "polite" }, buttonElement)
+            :
+                buttonElement);
     }
     static get style() { return DsButtonStyle0; }
 }, [6, "ds-button", {
@@ -88,6 +116,9 @@ const DsButton = proxyCustomElement(class DsButton extends H {
         "iconPosition": [1, "icon-position"],
         "type": [1],
         "disabled": [4],
+        "isLoading": [4, "is-loading"],
+        "useSpinner": [4, "use-spinner"],
+        "spinnerHiddenText": [1, "spinner-hidden-text"],
         "fullWidth": [4, "full-width"],
         "ariaDisabled": [1, "aria-disabled"]
     }]);
@@ -95,7 +126,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ds-button", "ds-icon"];
+    const components = ["ds-button", "ds-icon", "ds-spinner", "ds-visually-hidden"];
     components.forEach(tagName => { switch (tagName) {
         case "ds-button":
             if (!customElements.get(tagName)) {
@@ -103,6 +134,16 @@ function defineCustomElement() {
             }
             break;
         case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ds-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ds-visually-hidden":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }