@govtechsg/sgds-web-component 3.16.1-rc.2 → 3.17.0

package/index.umd.min.js

@@ -67,7 +67,7 @@ const Oe=1,Ne=2,Ue=3,qe=4,Ye=e=>(...t)=>({_$litDirective$:e,values:t});class je{
    * @license
    * Copyright 2018 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
-   */const We=Ye(class extends je{constructor(e){if(super(e),e.type!==Oe||"class"!==e.name||e.strings?.length>2)throw new Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter(t=>e[t]).join(" ")+" "}update(e,[t]){if(void 0===this._previousClasses){this._previousClasses=new Set,void 0!==e.strings&&(this._staticClasses=new Set(e.strings.join(" ").split(/\s/).filter(e=>""!==e)));for(const e in t)t[e]&&!this._staticClasses?.has(e)&&this._previousClasses.add(e);return this.render(t)}const s=e.element.classList;for(const e of this._previousClasses)e in t||(s.remove(e),this._previousClasses.delete(e));for(const e in t){const i=!!t[e];i===this._previousClasses.has(e)||this._staticClasses?.has(e)||(i?(s.add(e),this._previousClasses.add(e)):(s.remove(e),this._previousClasses.delete(e)))}return se}});function Ke(e,t,s){return new Promise(i=>{if((null==s?void 0:s.duration)===1/0)throw new Error("Promise-based animations must be finite.");const a=e.animate(t,Object.assign(Object.assign({},s),{duration:Ge()?0:null==s?void 0:s.duration}));a.addEventListener("cancel",i,{once:!0}),a.addEventListener("finish",i,{once:!0})})}function Ge(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}function Xe(e,t){return e.map(e=>Object.assign(Object.assign({},e),{height:"auto"===e.height?`${t}px`:e.height}))}function Qe(e){return Promise.all(e.getAnimations().map(e=>new Promise(t=>{const s=requestAnimationFrame(t);e.addEventListener("cancel",()=>s,{once:!0}),e.addEventListener("finish",()=>s,{once:!0}),e.cancel()})))}const Je=new Map,et=new WeakMap;function tt(e,t){const s=et.get(e);if(null==s?void 0:s[t])return s[t];const i=Je.get(t);return i||{keyframes:[],options:{duration:0}}}function st(e,t){Je.set(e,function(e){return null!=e?e:{keyframes:[],options:{duration:0}}}(t))}function it(e,t){return new Promise(s=>{e.addEventListener(t,function i(a){a.target===e&&(e.removeEventListener(t,i),s())})})}function at(e,t){const s=Object.assign({waitUntilFirstUpdate:!1},t);return(t,i)=>{const{update:a}=t;if(e in t){const o=e;t.update=function(e){if(e.has(o)){const t=e.get(o),a=this[o];t!==a&&(s.waitUntilFirstUpdate&&!this.hasUpdated||this[i](t,a))}a.call(this,e)}}}}var ot=n`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-16);line-height:var(--sgds-line-height-20);padding:var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-sm) var(--sgds-padding-sm)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-bg-transparent);border:0;color:var(--sgds-color-default);display:flex;font-size:var(--sgds-font-size-20);gap:var(--sgds-gap-sm);line-height:var(--sgds-line-height-24);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.collapsed){font-weight:var(--sgds-font-weight-semibold)}.accordion-btn:not(.disabled):hover,.accordion-btn:not(:disabled):hover{background-color:var(--sgds-bg-translucent-subtle);z-index:2}.accordion-btn:not(.disabled):focus,.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus,.accordion-btn:not(:disabled):focus-visible{background-color:var(--sgds-bg-translucent-subtle);z-index:3}.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);margin-left:auto;transition:transform .2s ease-in-out}.accordion-btn:not(.collapsed) slot[name=caret] sgds-icon,.accordion-btn:not(.collapsed) slot[name=caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{overflow:hidden;padding:0}.content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;class nt extends Pe{constructor(){super(...arguments),this.open=!1,this.disabled=!1,this.density="default"}handleSummaryClick(){this.open?this.hide():this.show(),this.header.focus()}handleSummaryKeyDown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.open?this.hide():this.show()),"ArrowUp"!==e.key&&"ArrowLeft"!==e.key||(e.preventDefault(),this.hide()),"ArrowDown"!==e.key&&"ArrowRight"!==e.key||(e.preventDefault(),this.show())}async handleOpenChange(){if(this.open){if(this.emit("sgds-show",{cancelable:!0}).defaultPrevented)return void(this.open=!1);await Qe(this.body),this.body.classList.remove("hidden");const{keyframes:e,options:t}=tt(this,"accordion.show");await Ke(this.body,Xe(e,this.body.scrollHeight),t),this.emit("sgds-after-show")}else{if(this.emit("sgds-hide",{cancelable:!0}).defaultPrevented)return void(this.open=!0);await Qe(this.body);const{keyframes:e,options:t}=tt(this,"accordion.hide"),s=t.duration;setTimeout(()=>{this.body.classList.add("hidden")},s-20),await Ke(this.body,Xe(e,this.body.scrollHeight),t),this.emit("sgds-after-hide")}}async show(){if(!this.open)return this.open=!0,it(this,"sgds-after-show")}async hide(){if(this.open)return this.open=!1,it(this,"sgds-after-hide")}render(){const e=this.hasUpdated;return ee`
+   */const We=Ye(class extends je{constructor(e){if(super(e),e.type!==Oe||"class"!==e.name||e.strings?.length>2)throw new Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter(t=>e[t]).join(" ")+" "}update(e,[t]){if(void 0===this._previousClasses){this._previousClasses=new Set,void 0!==e.strings&&(this._staticClasses=new Set(e.strings.join(" ").split(/\s/).filter(e=>""!==e)));for(const e in t)t[e]&&!this._staticClasses?.has(e)&&this._previousClasses.add(e);return this.render(t)}const s=e.element.classList;for(const e of this._previousClasses)e in t||(s.remove(e),this._previousClasses.delete(e));for(const e in t){const i=!!t[e];i===this._previousClasses.has(e)||this._staticClasses?.has(e)||(i?(s.add(e),this._previousClasses.add(e)):(s.remove(e),this._previousClasses.delete(e)))}return se}});function Ke(e,t,s){return new Promise(i=>{if((null==s?void 0:s.duration)===1/0)throw new Error("Promise-based animations must be finite.");const a=e.animate(t,Object.assign(Object.assign({},s),{duration:Ge()?0:null==s?void 0:s.duration}));a.addEventListener("cancel",i,{once:!0}),a.addEventListener("finish",i,{once:!0})})}function Ge(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}function Xe(e,t){return e.map(e=>Object.assign(Object.assign({},e),{height:"auto"===e.height?`${t}px`:e.height}))}function Qe(e){return Promise.all(e.getAnimations().map(e=>new Promise(t=>{const s=requestAnimationFrame(t);e.addEventListener("cancel",()=>s,{once:!0}),e.addEventListener("finish",()=>s,{once:!0}),e.cancel()})))}const Je=new Map,et=new WeakMap;function tt(e,t){const s=et.get(e);if(null==s?void 0:s[t])return s[t];const i=Je.get(t);return i||{keyframes:[],options:{duration:0}}}function st(e,t){Je.set(e,function(e){return null!=e?e:{keyframes:[],options:{duration:0}}}(t))}function it(e,t){return new Promise(s=>{e.addEventListener(t,function i(a){a.target===e&&(e.removeEventListener(t,i),s())})})}function at(e,t){const s=Object.assign({waitUntilFirstUpdate:!1},t);return(t,i)=>{const{update:a}=t;if(e in t){const o=e;t.update=function(e){if(e.has(o)){const t=e.get(o),a=this[o];t!==a&&(s.waitUntilFirstUpdate&&!this.hasUpdated||this[i](t,a))}a.call(this,e)}}}}var ot=n`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-subtitle-sm);line-height:var(--sgds-line-height-2-xs);padding:var(--sgds-padding-md)}:host([density=spacious]) .accordion-btn{font-size:var(--sgds-font-size-heading-sm);line-height:var(--sgds-line-height-sm);padding:var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-md) var(--sgds-padding-md)}:host([density=spacious]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-xl) var(--sgds-padding-xl)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-bg-transparent);border:0;color:var(--sgds-color-default);display:flex;font-size:var(--sgds-font-size-subtitle-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-md);line-height:var(--sgds-line-height-xs);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.disabled):hover,.accordion-btn:not(:disabled):hover{background-color:var(--sgds-bg-translucent-subtle);z-index:2}.accordion-btn:not(.disabled):focus,.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus,.accordion-btn:not(:disabled):focus-visible{background-color:var(--sgds-bg-translucent-subtle);z-index:3}.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=badge]::slotted(*){margin-left:auto}.accordion-header__trailing{display:flex;gap:var(--sgds-gap-md);margin-left:auto}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);transition:transform .2s ease-in-out}.accordion-btn:not(.collapsed) slot[name=caret] sgds-icon,.accordion-btn:not(.collapsed) slot[name=caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{font-size:var(--sgds-font-size-body-sm);line-height:var(--sgds-line-height-2-xs);overflow:hidden;padding:0}.content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;class nt extends Pe{constructor(){super(...arguments),this.open=!1,this.disabled=!1,this.density="default"}handleSummaryClick(){this.open?this.hide():this.show(),this.header.focus()}handleSummaryKeyDown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.open?this.hide():this.show()),"ArrowUp"!==e.key&&"ArrowLeft"!==e.key||(e.preventDefault(),this.hide()),"ArrowDown"!==e.key&&"ArrowRight"!==e.key||(e.preventDefault(),this.show())}async handleOpenChange(){if(this.open){if(this.emit("sgds-show",{cancelable:!0}).defaultPrevented)return void(this.open=!1);await Qe(this.body),this.body.classList.remove("hidden");const{keyframes:e,options:t}=tt(this,"accordion.show");await Ke(this.body,Xe(e,this.body.scrollHeight),t),this.emit("sgds-after-show")}else{if(this.emit("sgds-hide",{cancelable:!0}).defaultPrevented)return void(this.open=!0);await Qe(this.body);const{keyframes:e,options:t}=tt(this,"accordion.hide"),s=t.duration;setTimeout(()=>{this.body.classList.add("hidden")},s-20),await Ke(this.body,Xe(e,this.body.scrollHeight),t),this.emit("sgds-after-hide")}}async show(){if(!this.open)return this.open=!0,it(this,"sgds-after-show")}async hide(){if(this.open)return this.open=!1,it(this,"sgds-after-hide")}firstUpdated(){this.open||this.body.classList.add("hidden")}render(){return ee`
       <div class="accordion-item">
         <button
           class=${We({"accordion-btn":!0,disabled:this.disabled,collapsed:!this.open})}
@@ -80,14 +80,16 @@ const Oe=1,Ne=2,Ue=3,qe=4,Ye=e=>(...t)=>({_$litDirective$:e,values:t});class je{
           @click=${this.handleSummaryClick}
           @keydown=${this.handleSummaryKeyDown}
         >
+          <slot name="icon"></slot>
           <slot name="header"></slot>
-          <slot name="caret">
-            <sgds-icon name="chevron-down" size=${"compact"===this.density?"md":"lg"}></sgds-icon>
-          </slot>
+          <div class="accordion-header__trailing">
+            <slot name="badge"></slot>
+            <slot name="caret">
+              <sgds-icon name="chevron-down" size=${"compact"===this.density?"md":"lg"}></sgds-icon>
+            </slot>
+          </div>
         </button>
-        <div
-          class=${We({"accordion-body":!0,hidden:!this.open&&!e})}
-        >
+        <div class="accordion-body">
           <slot id="content" name="content" class="content" role="region" aria-labelledby="header"></slot>
         </div>
       </div>
@@ -2485,7 +2487,7 @@ const Tt=e=>e??ie;var Pt=n`:host{cursor:pointer;display:inline-block}.alert-link
    * Copyright 2020 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-class extends je{constructor(e){if(super(e),e.type!==Ue&&e.type!==Oe&&e.type!==qe)throw new Error("The `live` directive is not allowed on child or event bindings");if(!Ut(e))throw new Error("`live` bindings can only contain a single expression")}render(e){return e}update(e,[t]){if(t===se||t===ie)return t;const s=e.element,i=e.name;if(e.type===Ue){if(t===s[i])return se}else if(e.type===qe){if(!!t===s.hasAttribute(i))return se}else if(e.type===Oe&&s.getAttribute(i)===String(t))return se;return Kt(e),t}});var ba=n`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color-default);line-height:var(--sgds-line-height-20)}.invalid-feedback{font-size:var(--sgds-font-size-14);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`,wa=n`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-14);line-height:var(--sgds-line-height-20)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`,ya=n`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-16);line-height:var(--sgds-line-height-24);min-width:0;outline:none;padding:0}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;const xa=(e="value")=>(t,s)=>{const i=t.constructor,a=i.prototype.attributeChangedCallback;i.prototype.attributeChangedCallback=function(t,o,n){var r;const l=i.getPropertyOptions(e);if(t===("string"==typeof l.attribute?l.attribute:e).toLowerCase()){const t=l.converter||x,i=("function"==typeof t?t:null!==(r=null==t?void 0:t.fromAttribute)&&void 0!==r?r:x.fromAttribute)(n,l.type);this[e]!==i&&(this[s]=i)}a.call(this,t,o,n)}};class ka{constructor(e,t){(this.host=e).addController(this),this._internals=e._internals||this.host.attachInternals(),this.options=Object.assign({setInvalid:(e,t)=>{e.invalid=t},value:e=>e.value,input:e=>e.input},t)}hostConnected(){this.host.addEventListener("invalid",e=>this.handleInvalid(e))}hostDisconnected(){this.host.removeEventListener("invalid",e=>this.handleInvalid(e))}handleInvalid(e){e.preventDefault(),this.options.setInvalid(this.host,!0)}handleInput(e){const t=e.target;this.options.setInvalid(this.host,!1),this.validateInput(t)}handleChange(e){const t=e.target;this.validateInput(t),this.options.setInvalid(this.host,!this.checkValidity())}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}updateInvalidState(){this.options.setInvalid(this.host,!this.checkValidity())}resetValidity(){return this._internals.setValidity({})}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}setValidity(e,t,s){return this._internals.setValidity(e,t,s)}setFormValue(){const e=this.options.value(this.host);this._internals.setFormValue(e)}validateInput(e){if(this.options.input(this.host).disabled)return this._internals.setValidity({});const t=e.validity;if(t.valid)this._internals.setValidity({});else for(const s in t)t[s]&&(this.validationError=s.toString(),this._internals.setValidity({[this.validationError]:!0},e.validationMessage,e))}}const _a=t=>{class s extends t{constructor(...e){super(...e),this._isTouched=!1,this._internals=this.attachInternals()}connectedCallback(){var e;super.connectedCallback(),this._mixinShouldSkipSgdsValidation()||null!==(e=this.inputValidationController)&&void 0!==e||(this.inputValidationController=new ka(this))}async firstUpdated(e){super.firstUpdated(e),this.input=this.shadowRoot.querySelector("input")||await this.sgdsInput||this.shadowRoot.querySelector("textarea")||await this.sgdsDatepickerInput,this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this._mixinValidate(this.input)}formResetCallback(){this._mixinResetFormControl?this._mixinResetFormControl():(this.value=this.defaultValue,this._mixinResetValidity(this.input)),this._mixinSetFormValue()}_mixinHandleChange(e){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleChange(e)}_mixinHandleInputChange(e){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleInput(e)}_mixinResetValidity(e){this._mixinShouldSkipSgdsValidation()||(this.inputValidationController.resetValidity(),this.inputValidationController.updateInvalidState(),this.inputValidationController.validateInput(e),this._isTouched&&(this._isTouched=!1))}_mixinValidate(e){this._mixinShouldSkipSgdsValidation()||this.inputValidationController.validateInput(e)}_mixinSetFormValue(){const e=this.value;this._internals.setFormValue(e)}_mixinCheckValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.checkValidity()}_mixinReportValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.reportValidity()}_mixinGetValidity(){return this._internals.validity}_mixinGetValidationMessage(){return this._internals.validationMessage}_mixinSetValidity(e,t,s){if(!this._mixinShouldSkipSgdsValidation())return this.inputValidationController.setValidity(e,t,s)}_mixinShouldSkipSgdsValidation(){const e=this.closest("form");return(null==e?void 0:e.noValidate)||this.noValidate}}return s.formAssociated=!0,e([Be("sgds-input")],s.prototype,"sgdsInput",void 0),e([Be("sgds-datepicker-input")],s.prototype,"sgdsDatepickerInput",void 0),s};var Ca=n`.empty-menu,.loading-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px);pointer-events:none}.loading-menu{align-items:center;display:flex;gap:var(--sgds-gap-xs)}`;class Ma extends(_a(Ui)){constructor(){super(),this.label="",this.hintText="",this.autofocus=!1,this.disabled=!1,this.required=!1,this.loading=!1,this.value="",this.displayValue="",this.defaultValue="",this.hasFeedback=!1,this.invalidFeedback="",this.invalid=!1,this.menuList=[],this.selectedItems=[],this.filteredList=[],this._isTouched=!1,this._controlId=Oi("input"),this._labelId=Oi("label"),this.floatingOpts={middleware:[Bi({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})]}}connectedCallback(){super.connectedCallback(),this.addEventListener("blur",async e=>{var t;const s=this.constructor.childName,i=(null===(t=e.relatedTarget)||void 0===t?void 0:t.tagName.toLowerCase())===s;this.invalid=!i&&!this._mixinReportValidity()})}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_renderFeedback(){return this.invalid&&this.hasFeedback?ee` <div class="invalid-feedback-container">
+class extends je{constructor(e){if(super(e),e.type!==Ue&&e.type!==Oe&&e.type!==qe)throw new Error("The `live` directive is not allowed on child or event bindings");if(!Ut(e))throw new Error("`live` bindings can only contain a single expression")}render(e){return e}update(e,[t]){if(t===se||t===ie)return t;const s=e.element,i=e.name;if(e.type===Ue){if(t===s[i])return se}else if(e.type===qe){if(!!t===s.hasAttribute(i))return se}else if(e.type===Oe&&s.getAttribute(i)===String(t))return se;return Kt(e),t}});var ba=n`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color-default);line-height:var(--sgds-line-height-20)}.invalid-feedback{font-size:var(--sgds-font-size-14);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`,wa=n`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-14);line-height:var(--sgds-line-height-20)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`,ya=n`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-size:var(--sgds-font-size-16);line-height:var(--sgds-line-height-24);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;const xa=(e="value")=>(t,s)=>{const i=t.constructor,a=i.prototype.attributeChangedCallback;i.prototype.attributeChangedCallback=function(t,o,n){var r;const l=i.getPropertyOptions(e);if(t===("string"==typeof l.attribute?l.attribute:e).toLowerCase()){const t=l.converter||x,i=("function"==typeof t?t:null!==(r=null==t?void 0:t.fromAttribute)&&void 0!==r?r:x.fromAttribute)(n,l.type);this[e]!==i&&(this[s]=i)}a.call(this,t,o,n)}};class ka{constructor(e,t){(this.host=e).addController(this),this._internals=e._internals||this.host.attachInternals(),this.options=Object.assign({setInvalid:(e,t)=>{e.invalid=t},value:e=>e.value,input:e=>e.input},t)}hostConnected(){this.host.addEventListener("invalid",e=>this.handleInvalid(e))}hostDisconnected(){this.host.removeEventListener("invalid",e=>this.handleInvalid(e))}handleInvalid(e){e.preventDefault(),this.options.setInvalid(this.host,!0)}handleInput(e){const t=e.target;this.options.setInvalid(this.host,!1),this.validateInput(t)}handleChange(e){const t=e.target;this.validateInput(t),this.options.setInvalid(this.host,!this.checkValidity())}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}updateInvalidState(){this.options.setInvalid(this.host,!this.checkValidity())}resetValidity(){return this._internals.setValidity({})}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}setValidity(e,t,s){return this._internals.setValidity(e,t,s)}setFormValue(){const e=this.options.value(this.host);this._internals.setFormValue(e)}validateInput(e){if(this.options.input(this.host).disabled)return this._internals.setValidity({});const t=e.validity;if(t.valid)this._internals.setValidity({});else for(const s in t)t[s]&&(this.validationError=s.toString(),this._internals.setValidity({[this.validationError]:!0},e.validationMessage,e))}}const _a=t=>{class s extends t{constructor(...e){super(...e),this._isTouched=!1,this._internals=this.attachInternals()}connectedCallback(){var e;super.connectedCallback(),this._mixinShouldSkipSgdsValidation()||null!==(e=this.inputValidationController)&&void 0!==e||(this.inputValidationController=new ka(this))}async firstUpdated(e){super.firstUpdated(e),this.input=this.shadowRoot.querySelector("input")||await this.sgdsInput||this.shadowRoot.querySelector("textarea")||await this.sgdsDatepickerInput,this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this._mixinValidate(this.input)}formResetCallback(){this._mixinResetFormControl?this._mixinResetFormControl():(this.value=this.defaultValue,this._mixinResetValidity(this.input)),this._mixinSetFormValue()}_mixinHandleChange(e){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleChange(e)}_mixinHandleInputChange(e){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleInput(e)}_mixinResetValidity(e){this._mixinShouldSkipSgdsValidation()||(this.inputValidationController.resetValidity(),this.inputValidationController.updateInvalidState(),this.inputValidationController.validateInput(e),this._isTouched&&(this._isTouched=!1))}_mixinValidate(e){this._mixinShouldSkipSgdsValidation()||this.inputValidationController.validateInput(e)}_mixinSetFormValue(){const e=this.value;this._internals.setFormValue(e)}_mixinCheckValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.checkValidity()}_mixinReportValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.reportValidity()}_mixinGetValidity(){return this._internals.validity}_mixinGetValidationMessage(){return this._internals.validationMessage}_mixinSetValidity(e,t,s){if(!this._mixinShouldSkipSgdsValidation())return this.inputValidationController.setValidity(e,t,s)}_mixinShouldSkipSgdsValidation(){const e=this.closest("form");return(null==e?void 0:e.noValidate)||this.noValidate}}return s.formAssociated=!0,e([Be("sgds-input")],s.prototype,"sgdsInput",void 0),e([Be("sgds-datepicker-input")],s.prototype,"sgdsDatepickerInput",void 0),s};var Ca=n`.empty-menu,.loading-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px);pointer-events:none}.loading-menu{align-items:center;display:flex;gap:var(--sgds-gap-xs)}`;class Ma extends(_a(Ui)){constructor(){super(),this.label="",this.hintText="",this.autofocus=!1,this.disabled=!1,this.required=!1,this.loading=!1,this.value="",this.displayValue="",this.defaultValue="",this.hasFeedback=!1,this.invalidFeedback="",this.invalid=!1,this.menuList=[],this.selectedItems=[],this.filteredList=[],this._isTouched=!1,this._controlId=Oi("input"),this._labelId=Oi("label"),this.floatingOpts={middleware:[Bi({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})]}}connectedCallback(){super.connectedCallback(),this.addEventListener("blur",async e=>{var t;const s=this.constructor.childName,i=(null===(t=e.relatedTarget)||void 0===t?void 0:t.tagName.toLowerCase())===s;this.invalid=!i&&!this._mixinReportValidity()})}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_renderFeedback(){return this.invalid&&this.hasFeedback?ee` <div class="invalid-feedback-container">
           <slot name="invalidIcon">
             <sgds-icon name="exclamation-circle-fill" size="md"></sgds-icon>
           </slot>
@@ -2499,7 +2501,7 @@ class extends je{constructor(e){if(super(e),e.type!==Ue&&e.type!==Oe&&e.type!==q
         class=${We({"form-label":!0,required:this.required})}
         >${this.label}</label
       >
-    `;return this.label&&e}_handleClick(){if(this.readonly)return null;this.menuIsOpen?this.hideMenu():this.showMenu()}async _getMenuListFromOptions(e){const t=e.map(async e=>(await e.updateComplete,e)),s=await Promise.all(t);return null==s?void 0:s.map(e=>{var t;return{label:e.innerText,value:e.getAttribute("value"),disabled:null!==(t=e.disabled)&&void 0!==t?t:void 0}})}_renderEmptyMenu(){return ee` <div class="empty-menu">No options</div> `}_renderLoadingMenu(){return ee`<div class="loading-menu"><sgds-spinner size="xs" tone="brand"></sgds-spinner>Loading...</div>`}}Ma.styles=[...Ui.styles,qi,wa,ba,ya,Ca],e([Ve({reflect:!0})],Ma.prototype,"label",void 0),e([Ve({reflect:!0})],Ma.prototype,"hintText",void 0),e([Ve({reflect:!0})],Ma.prototype,"name",void 0),e([Ve({type:String,reflect:!0})],Ma.prototype,"placeholder",void 0),e([Ve({type:Boolean,reflect:!0})],Ma.prototype,"autofocus",void 0),e([Ve({type:Boolean,reflect:!0})],Ma.prototype,"disabled",void 0),e([Ve({type:Boolean,reflect:!0})],Ma.prototype,"required",void 0),e([Ve({type:Boolean,reflect:!0})],Ma.prototype,"loading",void 0),e([Ve({type:String,reflect:!0})],Ma.prototype,"value",void 0),e([De()],Ma.prototype,"displayValue",void 0),e([xa()],Ma.prototype,"defaultValue",void 0),e([Ve({type:Boolean,reflect:!0})],Ma.prototype,"hasFeedback",void 0),e([Ve({type:String,reflect:!0})],Ma.prototype,"invalidFeedback",void 0),e([Ve({type:Boolean,reflect:!0})],Ma.prototype,"invalid",void 0),e([Ve({type:Array})],Ma.prototype,"menuList",void 0),e([De()],Ma.prototype,"selectedItems",void 0),e([De()],Ma.prototype,"filteredList",void 0),e([Be("input.form-control")],Ma.prototype,"_input",void 0);var Sa=n`:host{display:block;position:relative}.dropdown{display:flex;height:100%}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.combobox .form-control-group{height:unset;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256)}.combobox-input-container{align-items:center;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);padding:calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;width:calc(100% - var(--sgds-icon-size-md, 1.25rem))}slot[id=default].d-none,slot[id=default].d-none::slotted(*){display:none}.form-clearable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`,$a=n`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}`;class Aa extends Pe{constructor(){super(...arguments),this.active=!1,this.disabled=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","menuitem"),this.setAttribute("aria-disabled",`${this.disabled}`)}render(){const e={disabled:this.disabled,active:this.active};return ee`
+    `;return this.label&&e}_handleClick(){if(this.readonly)return null;this.menuIsOpen?this.hideMenu():this.showMenu()}async _getMenuListFromOptions(e){const t=e.map(async e=>(await e.updateComplete,e)),s=await Promise.all(t);return null==s?void 0:s.map(e=>{var t;return{label:e.innerText,value:e.getAttribute("value"),disabled:null!==(t=e.disabled)&&void 0!==t?t:void 0}})}_renderEmptyMenu(){return ee` <div class="empty-menu">No options</div> `}_renderLoadingMenu(){return ee`<div class="loading-menu"><sgds-spinner size="xs" tone="brand"></sgds-spinner>Loading...</div>`}}Ma.styles=[...Ui.styles,qi,wa,ba,ya,Ca],e([Ve({reflect:!0})],Ma.prototype,"label",void 0),e([Ve({reflect:!0})],Ma.prototype,"hintText",void 0),e([Ve({reflect:!0})],Ma.prototype,"name",void 0),e([Ve({type:String,reflect:!0})],Ma.prototype,"placeholder",void 0),e([Ve({type:Boolean,reflect:!0})],Ma.prototype,"autofocus",void 0),e([Ve({type:Boolean,reflect:!0})],Ma.prototype,"disabled",void 0),e([Ve({type:Boolean,reflect:!0})],Ma.prototype,"required",void 0),e([Ve({type:Boolean,reflect:!0})],Ma.prototype,"loading",void 0),e([Ve({type:String,reflect:!0})],Ma.prototype,"value",void 0),e([De()],Ma.prototype,"displayValue",void 0),e([xa()],Ma.prototype,"defaultValue",void 0),e([Ve({type:Boolean,reflect:!0})],Ma.prototype,"hasFeedback",void 0),e([Ve({type:String,reflect:!0})],Ma.prototype,"invalidFeedback",void 0),e([Ve({type:Boolean,reflect:!0})],Ma.prototype,"invalid",void 0),e([Ve({type:Array})],Ma.prototype,"menuList",void 0),e([De()],Ma.prototype,"selectedItems",void 0),e([De()],Ma.prototype,"filteredList",void 0),e([Be("input.form-control")],Ma.prototype,"_input",void 0);var Sa=n`:host{display:block;position:relative}.dropdown{display:flex;height:100%}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.combobox .form-control-group{height:unset;min-height:var(--sgds-dimension-48)}.combobox-input-container{align-items:center;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);padding:calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;width:calc(100% - var(--sgds-icon-size-md, 1.25rem))}slot[id=default].d-none,slot[id=default].d-none::slotted(*){display:none}.form-clearable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`,$a=n`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}`;class Aa extends Pe{constructor(){super(...arguments),this.active=!1,this.disabled=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","menuitem"),this.setAttribute("aria-disabled",`${this.disabled}`)}render(){const e={disabled:this.disabled,active:this.active};return ee`
       <div class="dropdown-item ${We(e)}" tabindex=${this.disabled?"-1":"0"}>
         ${this._renderItemContent()}
       </div>
@@ -2628,7 +2630,7 @@ const Fa=(e,t,s)=>{const i=new Map;for(let a=t;a<=s;a++)i.set(e[a],a);return i};
       </div>
     `}_renderFeedbackMenu(){return this.loading?this._renderLoadingMenu():this.async?this.emptyMenuAsync||0===this.optionList.length?this._renderEmptyMenu():ie:0===this.optionList.length||this.emptyMenuAfterFiltering&&this.optionList.length>0?this._renderEmptyMenu():ie}render(){const e=(this.isFocused||this.menuIsOpen)&&""!==this.value&&this.clearable&&!this.readonly;return ee`
       <div
-        class=${We({"form-control-container":!0,disabled:this.disabled,combobox:!0})}
+        class=${We({"form-control-container":!0,"m-width-256":!0,disabled:this.disabled,combobox:!0})}
         @keydown=${this._handleMultiSelectKeyDown}
       >
         ${this._renderLabel()}
@@ -2861,7 +2863,7 @@ const Fa=(e,t,s)=>{const i=new Map;for(let a=t;a<=s;a++)i.set(e[a],a);return i};
       >
     `;return this.label&&e}_renderHintText(){const e=pt` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;return this.hintText&&e}render(){return pt`
       <div
-        class="form-control-container ${We({disabled:this.disabled})}"
+        class="form-control-container m-width-160 ${We({disabled:this.disabled})}"
       >
         ${this._renderLabel()}
         <div class="form-control-row">
@@ -2881,8 +2883,8 @@ const Fa=(e,t,s)=>{const i=new Map;for(let a=t;a<=s;a++)i.set(e[a],a);return i};
         </div>
         ${this._renderFeedback()}
       </div>
-    `}}Nr.styles=[...Rr.styles,Or],e([Ve({type:String})],Nr.prototype,"minDate",void 0),e([Ve({type:String})],Nr.prototype,"maxDate",void 0),e([Ve({type:String,reflect:!0})],Nr.prototype,"mode",void 0),e([Be("input")],Nr.prototype,"shadowInput",void 0);var Ur=n`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg:var(--sgds-primary-100);--datepicker-bg:#fff;--datepicker-close-btn-bg:var(--datepicker-theme-color);--datepicker-close-btn-hover-bg:var(--sgds-primary-700);--datepicker-close-btn-color:#fff;--datepicker-selected-date-bg:var(--sgds-primary);--datepicker-selected-date-color:#fff;font-size:var(--sgds-font-size-14)}:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{background-color:var(--sgds-form-surface-default);display:flex;flex-direction:column;gap:var(--sgds-form-gap-sm);overflow:unset;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);width:var(--sgds-dimension-320)}.dropdown{display:flex;height:100%}sgds-datepicker-input{--input-border-radius:var(--sgds-form-border-radius-md) 0 0 var(--sgds-form-border-radius-md);flex:1;margin-right:0}sgds-icon-button{--btn-border-radius:0 var(--sgds-form-border-radius-md) var(--sgds-form-border-radius-md) 0}.datepicker-container{display:flex}.calendar-btn:not(.with-hint-text){align-self:center}.calendar-btn:not(.with-hint-text).with-label{align-self:end;margin-top:calc(var(--sgds-line-height-24) - var(--sgds-line-height-20))}.calendar-btn.with-hint-text.with-label{align-self:center;margin-top:calc(var(--sgds-line-height-24) - var(--sgds-line-height-20))}`;class qr extends(_a(Ni)){constructor(){super(),this.required=!1,this.disabled=!1,this.value="",this.initialValue=[],this.dateFormat="DD/MM/YYYY",this.minDate="",this.maxDate="",this.mode="single",this.hasFeedback=!1,this.label="",this.hintText="",this.noFlip=!1,this.drop="down",this.defaultValue="",this.invalid=!1,this.view="days",this.selectedDateRange=[],this.focusedTabIndex=3,this.initialDisplayDate=new Date,this._makeInputValueString=(e,t,s)=>{if(!e&&!t)return this.value;const i=e=>Ro(e,qn[s].fnsPattern);switch(this.mode){case"single":e&&(this.value=i(e));break;case"range":e&&t&&(this.value=`${i(e)} - ${i(t)}`),e&&!t&&(this.value=`${i(e)} - ${this.dateFormat}`)}return this.value},this._dialogAriaLabels={days:"Choose date",months:"Choose month",years:"Choose year"},this.floatingOpts={placement:"bottom-end"}}isValueEmpty(){return""===this.value||"DD/MM/YYYY"===this.value||"DD/MM/YYYY - DD/MM/YYYY"===this.value}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}async connectedCallback(){if(super.connectedCallback(),this.addEventListener("sgds-view",this._handleViewChanged),this.addEventListener("sgds-change-calendar",this._handleDateChanged),this.addEventListener("sgds-update-focus",this._handleFocusDateChanged),this.addEventListener("sgds-selectmonth",this._handleSelectMonth),this.addEventListener("sgds-selectyear",this._handleSelectYear),this.addEventListener("sgds-selectdates",this._handleSelectDatesAndClose),this.addEventListener("sgds-selectdates-input",this._handleSelectDatesInput),this.addEventListener("sgds-empty-input",this._handleEmptyInput),this.addEventListener("keydown",this._handleTab),this.addEventListener("sgds-hide",this._handleCloseMenu),this.addEventListener("sgds-show",this._handleOpenMenu),this.addEventListener("blur",this._mixinCheckValidity),this.initialValue=this.value?this.value.split(" - ").map(e=>e.trim()):this.initialValue,this.initialDisplayDate=this.displayDate||new Date,this.initialValue&&this.initialValue.length>0){const e=new RegExp(this._getDateFormatRegex()),t=this.initialValue.filter(t=>!e.test(t));if(t.length>0)return console.error("Invalid date format in initialValue:",t);{const e=this.initialValue.map(e=>Wn(Nn(e,qn[this.dateFormat].fnsPattern,new Date)));this._handleSelectDates(e)}}else this.displayDate=this.initialDisplayDate}async firstUpdated(e){if(super.firstUpdated(e),this.menuIsOpen){const e=await this.datepickerInputAsync;await this.updateFloatingPosition();(await this.calendar).focusOnCalendar(e)}}_getDateFormatRegex(){return this.dateFormat.replace(/[.*+?^${}()|[\]\\]/g,"\\$&").replace("MM","\\d{2}").replace("DD","\\d{2}").replace("YYYY","\\d{4}").replace("/","\\/")}_handleTab(e){if(!this.menuIsOpen)return;const t=Array(4);e.shiftKey&&"Tab"===e.key?(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex-1+t.length)%t.length):"Tab"===e.key&&(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex+1+t.length)%t.length)}_handleValueChange(){this.emit("sgds-change-date")}async _handleCloseMenu(){if((await this.datepickerInputAsync).focus(),0===this.selectedDateRange.length)this.displayDate=this.initialDisplayDate;else{const e=this.selectedDateRange.length;this.displayDate=this.selectedDateRange[e-1];(await this.calendar)._updateFocusedDate()}}async _handleOpenMenu(){const e=await this.calendar,t=await this.datepickerInputAsync;e.focusOnCalendar(t)}_handleSelectDatesInput(e){this._handleSelectDates(e.detail)}async _handleSelectDates(e){e.sort((e,t)=>e.getTime()-t.getTime()),this.displayDate=e[0],this.focusedDate=e[0],this.selectedDateRange=e;const t=this._makeInputValueString(this.selectedDateRange[0],this.selectedDateRange[1],this.dateFormat);this.value=t;(await this.datepickerInputAsync).updateMaskValue(),this._manageInternalsValid()}async _handleSelectDatesAndClose(e){await this._handleSelectDates(e.detail),("range"===this.mode&&2===this.selectedDateRange.length||"single"===this.mode&&1===this.selectedDateRange.length)&&this.hideMenu()}_handleViewChanged(e){this.view=e.detail}_handleDateChanged(e){this.displayDate=e.detail}_handleFocusDateChanged(e){this.focusedDate=e.detail}_handleSelectMonth(e){this.displayDate=e.detail}_handleSelectYear(e){this.displayDate=e.detail}async _handleInvalidInput(){this.selectedDateRange=[],this.displayDate=this.initialDisplayDate,this.invalid=!0,this._manageInternalsBadInput()}async _handleEmptyInput(){this.required&&this._manageEmptyInput()}async _resetDatepicker(e=""){this.displayDate=this.initialDisplayDate,this.selectedDateRange=[],this.value=e,this.view="days";const t=await this.datepickerInputAsync;t.setInvalid(!1),t.destroyInputMask(),await t.applyInputMask(),this._mixinResetValidity(t),this.isValueEmpty()&&this._handleEmptyInput()}_manageInternalsBadInput(){this._mixinSetValidity({badInput:!0},"Invalid date input",this.datepickerInput)}_manageEmptyInput(){this._mixinSetValidity({valueMissing:!0},"Please fill in this field",this.datepickerInput)}_manageInternalsValid(){this._mixinSetValidity({}),this.invalid=this.datepickerInput.invalid=!1,this._mixinSetFormValue()}async _mixinResetFormControl(){this._resetDatepicker(this.defaultValue)}async _handleInputMaskChange(e){this.value=e.detail,this.isValueEmpty()&&this._resetDatepicker()}render(){return ee`
-      <div class="datepicker-container">
+    `}}Nr.styles=[...Rr.styles,Or],e([Ve({type:String})],Nr.prototype,"minDate",void 0),e([Ve({type:String})],Nr.prototype,"maxDate",void 0),e([Ve({type:String,reflect:!0})],Nr.prototype,"mode",void 0),e([Be("input")],Nr.prototype,"shadowInput",void 0);var Ur=n`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg:var(--sgds-primary-100);--datepicker-bg:#fff;--datepicker-close-btn-bg:var(--datepicker-theme-color);--datepicker-close-btn-hover-bg:var(--sgds-primary-700);--datepicker-close-btn-color:#fff;--datepicker-selected-date-bg:var(--sgds-primary);--datepicker-selected-date-color:#fff;font-size:var(--sgds-font-size-14)}:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{background-color:var(--sgds-form-surface-default);display:flex;flex-direction:column;gap:var(--sgds-form-gap-sm);overflow:unset;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);width:var(--sgds-dimension-320)}.dropdown{display:flex;height:100%}sgds-datepicker-input{--input-border-radius:var(--sgds-form-border-radius-md) 0 0 var(--sgds-form-border-radius-md);flex:1;margin-right:0}sgds-icon-button{--btn-border-radius:0 var(--sgds-form-border-radius-md) var(--sgds-form-border-radius-md) 0}.m-width-160{min-width:var(--sgds-dimension-160)}.datepicker-container{display:flex}.calendar-btn:not(.with-hint-text){align-self:center}.calendar-btn:not(.with-hint-text).with-label{align-self:end;margin-top:calc(var(--sgds-line-height-24) - var(--sgds-line-height-20))}.calendar-btn.with-hint-text.with-label{align-self:center;margin-top:calc(var(--sgds-line-height-24) - var(--sgds-line-height-20))}`;class qr extends(_a(Ni)){constructor(){super(),this.required=!1,this.disabled=!1,this.value="",this.initialValue=[],this.dateFormat="DD/MM/YYYY",this.minDate="",this.maxDate="",this.mode="single",this.hasFeedback=!1,this.label="",this.hintText="",this.noFlip=!1,this.drop="down",this.defaultValue="",this.invalid=!1,this.view="days",this.selectedDateRange=[],this.focusedTabIndex=3,this.initialDisplayDate=new Date,this._makeInputValueString=(e,t,s)=>{if(!e&&!t)return this.value;const i=e=>Ro(e,qn[s].fnsPattern);switch(this.mode){case"single":e&&(this.value=i(e));break;case"range":e&&t&&(this.value=`${i(e)} - ${i(t)}`),e&&!t&&(this.value=`${i(e)} - ${this.dateFormat}`)}return this.value},this._dialogAriaLabels={days:"Choose date",months:"Choose month",years:"Choose year"},this.floatingOpts={placement:"bottom-end"}}isValueEmpty(){return""===this.value||"DD/MM/YYYY"===this.value||"DD/MM/YYYY - DD/MM/YYYY"===this.value}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}async connectedCallback(){if(super.connectedCallback(),this.addEventListener("sgds-view",this._handleViewChanged),this.addEventListener("sgds-change-calendar",this._handleDateChanged),this.addEventListener("sgds-update-focus",this._handleFocusDateChanged),this.addEventListener("sgds-selectmonth",this._handleSelectMonth),this.addEventListener("sgds-selectyear",this._handleSelectYear),this.addEventListener("sgds-selectdates",this._handleSelectDatesAndClose),this.addEventListener("sgds-selectdates-input",this._handleSelectDatesInput),this.addEventListener("sgds-empty-input",this._handleEmptyInput),this.addEventListener("keydown",this._handleTab),this.addEventListener("sgds-hide",this._handleCloseMenu),this.addEventListener("sgds-show",this._handleOpenMenu),this.addEventListener("blur",this._mixinCheckValidity),this.initialValue=this.value?this.value.split(" - ").map(e=>e.trim()):this.initialValue,this.initialDisplayDate=this.displayDate||new Date,this.initialValue&&this.initialValue.length>0){const e=new RegExp(this._getDateFormatRegex()),t=this.initialValue.filter(t=>!e.test(t));if(t.length>0)return console.error("Invalid date format in initialValue:",t);{const e=this.initialValue.map(e=>Wn(Nn(e,qn[this.dateFormat].fnsPattern,new Date)));this._handleSelectDates(e)}}else this.displayDate=this.initialDisplayDate}async firstUpdated(e){if(super.firstUpdated(e),this.menuIsOpen){const e=await this.datepickerInputAsync;await this.updateFloatingPosition();(await this.calendar).focusOnCalendar(e)}}_getDateFormatRegex(){return this.dateFormat.replace(/[.*+?^${}()|[\]\\]/g,"\\$&").replace("MM","\\d{2}").replace("DD","\\d{2}").replace("YYYY","\\d{4}").replace("/","\\/")}_handleTab(e){if(!this.menuIsOpen)return;const t=Array(4);e.shiftKey&&"Tab"===e.key?(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex-1+t.length)%t.length):"Tab"===e.key&&(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex+1+t.length)%t.length)}_handleValueChange(){this.emit("sgds-change-date")}async _handleCloseMenu(){if((await this.datepickerInputAsync).focus(),0===this.selectedDateRange.length)this.displayDate=this.initialDisplayDate;else{const e=this.selectedDateRange.length;this.displayDate=this.selectedDateRange[e-1];(await this.calendar)._updateFocusedDate()}}async _handleOpenMenu(){const e=await this.calendar,t=await this.datepickerInputAsync;e.focusOnCalendar(t)}_handleSelectDatesInput(e){this._handleSelectDates(e.detail)}async _handleSelectDates(e){e.sort((e,t)=>e.getTime()-t.getTime()),this.displayDate=e[0],this.focusedDate=e[0],this.selectedDateRange=e;const t=this._makeInputValueString(this.selectedDateRange[0],this.selectedDateRange[1],this.dateFormat);this.value=t;(await this.datepickerInputAsync).updateMaskValue(),this._manageInternalsValid()}async _handleSelectDatesAndClose(e){await this._handleSelectDates(e.detail),("range"===this.mode&&2===this.selectedDateRange.length||"single"===this.mode&&1===this.selectedDateRange.length)&&this.hideMenu()}_handleViewChanged(e){this.view=e.detail}_handleDateChanged(e){this.displayDate=e.detail}_handleFocusDateChanged(e){this.focusedDate=e.detail}_handleSelectMonth(e){this.displayDate=e.detail}_handleSelectYear(e){this.displayDate=e.detail}async _handleInvalidInput(){this.selectedDateRange=[],this.displayDate=this.initialDisplayDate,this.invalid=!0,this._manageInternalsBadInput()}async _handleEmptyInput(){this.required&&this._manageEmptyInput()}async _resetDatepicker(e=""){this.displayDate=this.initialDisplayDate,this.selectedDateRange=[],this.value=e,this.view="days";const t=await this.datepickerInputAsync;t.setInvalid(!1),t.destroyInputMask(),await t.applyInputMask(),this._mixinResetValidity(t),this.isValueEmpty()&&this._handleEmptyInput()}_manageInternalsBadInput(){this._mixinSetValidity({badInput:!0},"Invalid date input",this.datepickerInput)}_manageEmptyInput(){this._mixinSetValidity({valueMissing:!0},"Please fill in this field",this.datepickerInput)}_manageInternalsValid(){this._mixinSetValidity({}),this.invalid=this.datepickerInput.invalid=!1,this._mixinSetFormValue()}async _mixinResetFormControl(){this._resetDatepicker(this.defaultValue)}async _handleInputMaskChange(e){this.value=e.detail,this.isValueEmpty()&&this._resetDatepicker()}render(){return ee`
+      <div class="datepicker-container m-width-160">
         <sgds-datepicker-input
           .value=${fa(this.value)}
           ?required=${this.required}
@@ -3528,7 +3530,7 @@ const zl="important",Rl=" !"+zl;const Ol=Ye(class extends je{constructor(e){if(s
         >${this.label}</label
       >
     `;return this.label&&e}_renderHintText(){const e=pt` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;return this.hintText&&e}render(){return pt`
-      <div class="form-control-container">
+      <div class="form-control-container m-width-256">
         ${this._renderLabel()}
         <div class="input-group">
           <sgds-icon-button
@@ -3569,7 +3571,7 @@ const zl="important",Rl=" !"+zl;const Ol=Ye(class extends je{constructor(e){if(s
         <div id="announcer" role="region" aria-live="assertive" class="visually-hidden">${this.value}</div>
         ${this._renderFeedback()}
       </div>
-    `}}Yl.styles=[...Ea.styles,Da,El,ya,ql],Yl.dependencies={"sgds-input":Rr,"sgds-icon-button":er},e([Ze("sgds-icon-button[ariaLabel^='increase by']")],Yl.prototype,"plusBtn",void 0),e([Ze("sgds-icon-button[ariaLabel^='decrease by']")],Yl.prototype,"minusBtn",void 0),e([Ve({type:Number,reflect:!0})],Yl.prototype,"value",void 0),e([Ve({type:Number})],Yl.prototype,"step",void 0),e([Ve({type:Number})],Yl.prototype,"min",void 0),e([Ve({type:Number})],Yl.prototype,"max",void 0),e([Ve({type:String,reflect:!0})],Yl.prototype,"hasFeedback",void 0),e([Ve({type:String,reflect:!0})],Yl.prototype,"invalidFeedback",void 0),e([Ve({type:Boolean,reflect:!0})],Yl.prototype,"readonly",void 0),e([xa()],Yl.prototype,"defaultValue",void 0),e([Be("sgds-input")],Yl.prototype,"_sgdsInput",void 0),rt("sgds-quantity-toggle",Yl);var jl=n`:host{outline:0}.form-check-input[type=radio]{border-radius:50%}.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg width="8" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" fill="%23fff"/></svg>')}.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-surface-default)}`;class Wl extends Pe{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.invalid=!1,this.radioId=Oi("radio")}connectedCallback(){super.connectedCallback(),this.setInitialAttributes(),this.addEventListeners()}handleCheckedChange(){var e;this.checked&&(null===(e=this.input)||void 0===e||e.focus()),this.setAttribute("aria-checked",this.checked?"true":"false"),this.setAttribute("tabindex",this.checked?"0":"-1")}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false")}handleBlur(){this.emit("sgds-blur")}handleClick(){this.disabled||(this.checked=!0)}handleFocus(){this.emit("sgds-focus")}addEventListeners(){this.addEventListener("blur",()=>this.handleBlur()),this.addEventListener("click",()=>this.handleClick()),this.addEventListener("focus",()=>this.handleFocus())}setInitialAttributes(){this.setAttribute("role","radio"),this.setAttribute("tabindex","-1"),this.setAttribute("aria-disabled",this.disabled?"true":"false")}render(){return ee`
+    `}}Yl.styles=[...Ea.styles,Da,El,ya,ql],Yl.dependencies={"sgds-input":Rr,"sgds-icon-button":er},e([Ze("sgds-icon-button[ariaLabel^='increase by']")],Yl.prototype,"plusBtn",void 0),e([Ze("sgds-icon-button[ariaLabel^='decrease by']")],Yl.prototype,"minusBtn",void 0),e([Ve({type:Number,reflect:!0})],Yl.prototype,"value",void 0),e([Ve({type:Number})],Yl.prototype,"step",void 0),e([Ve({type:Number})],Yl.prototype,"min",void 0),e([Ve({type:Number})],Yl.prototype,"max",void 0),e([Ve({type:String,reflect:!0})],Yl.prototype,"hasFeedback",void 0),e([Ve({type:String,reflect:!0})],Yl.prototype,"invalidFeedback",void 0),e([Ve({type:Boolean,reflect:!0})],Yl.prototype,"readonly",void 0),e([xa()],Yl.prototype,"defaultValue",void 0),e([Be("sgds-input")],Yl.prototype,"_sgdsInput",void 0),rt("sgds-quantity-toggle",Yl);var jl=n`:host{outline:0}.form-check-input[type=radio]{border-radius:50%}.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg width="8" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" fill="%23fff"/></svg>')}.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-surface-default)}`;class Wl extends Pe{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.invalid=!1,this.autofocus=!1,this.radioId=Oi("radio")}connectedCallback(){super.connectedCallback(),this.setInitialAttributes(),this.addEventListeners()}handleCheckedChange(){var e;this.checked&&this.autofocus&&(null===(e=this.input)||void 0===e||e.focus()),this.setAttribute("aria-checked",this.checked?"true":"false"),this.setAttribute("tabindex",this.checked?"0":"-1")}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false")}handleBlur(){this.emit("sgds-blur")}handleClick(){this.disabled||(this.checked=!0)}handleFocus(){this.emit("sgds-focus")}addEventListeners(){this.addEventListener("blur",()=>this.handleBlur()),this.addEventListener("click",()=>this.handleClick()),this.addEventListener("focus",()=>this.handleFocus())}setInitialAttributes(){this.setAttribute("role","radio"),this.setAttribute("tabindex","-1"),this.setAttribute("aria-disabled",this.disabled?"true":"false")}render(){return ee`
       <div class="form-check">
         <input
           class=${We({"form-check-input":!0,"is-invalid":this.invalid})}
@@ -3586,7 +3588,7 @@ const zl="important",Rl=" !"+zl;const Ol=Ye(class extends je{constructor(e){if(s
           <slot></slot>
         </label>
       </div>
-    `}}Wl.styles=[...Pe.styles,Za,Va,jl],e([Ve({type:Boolean,reflect:!0})],Wl.prototype,"checked",void 0),e([Ve()],Wl.prototype,"value",void 0),e([Ve({type:Boolean,reflect:!0})],Wl.prototype,"disabled",void 0),e([Ve({type:Boolean,reflect:!0})],Wl.prototype,"invalid",void 0),e([Ze("input")],Wl.prototype,"input",void 0),e([at("checked")],Wl.prototype,"handleCheckedChange",null),e([at("disabled",{waitUntilFirstUpdate:!0})],Wl.prototype,"handleDisabledChange",null);var Kl=n`fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.radio-group-validation-input{display:none}.radio-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;class Gl extends(_a(Ea)){constructor(){super(...arguments),this.defaultValue="",this.value="",this.invalidFeedback="",this.hasFeedback=!1,this.required=!1,this._isTouched=!1}_handleValueChange(){this.emit("sgds-change",{detail:{value:this.value}}),this._updateCheckedRadio()}_handleInvalidChange(){this._radios.forEach(e=>e.invalid=this.invalid)}_mixinResetFormControl(){this.value=this.input.value=this.defaultValue,this._updateInputValue("reset"),this._mixinResetValidity(this.input)}connectedCallback(){super.connectedCallback(),this.defaultValue=this.value,this.addEventListener("sgds-blur",()=>{this._isTouched=!0})}firstUpdated(e){super.firstUpdated(e);const t=this._radios;t.forEach((e,s)=>{if(t.length>1)switch(s){case 0:e.setAttribute("first-of-type","");break;case t.length-1:e.setAttribute("last-of-type","");break;default:e.setAttribute("nth-of-type","")}}),this.value&&this._updateInputValue("change")}_handleRadioClick(e){e.preventDefault();const t=e.target;if(t.disabled)return;this.value=t.value,this._updateInputValue();this._radios.forEach(e=>e.checked=e===t)}_updateInputValue(e="change"){this.input.value=this.value,this.input.dispatchEvent(new InputEvent(e))}_handleKeyDown(e){var t;if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(e.key))return;const s=this._radios.filter(e=>!e.disabled),i=null!==(t=s.find(e=>e.checked))&&void 0!==t?t:s[0],a=" "===e.key?0:["ArrowUp","ArrowLeft"].includes(e.key)?-1:1;let o=s.indexOf(i)+a;o<0&&(o=s.length-1),o>s.length-1&&(o=0),this._radios.forEach(e=>{e.checked=!1,e.tabIndex=-1}),this.value=s[o].value,this._updateInputValue(),s[o].checked=!0,s[o].tabIndex=0,e.preventDefault()}_handleSlotChange(){const e=this._radios;e.forEach(e=>e.checked=e.value===this.value),this._disabledChildRadios(),e.some(e=>e.checked)||e[0]&&(e[0].tabIndex=0)}_updateCheckedRadio(){this._radios.forEach(e=>e.checked=e.value===this.value)}_renderHintText(){const e=ee` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;return this.hintText&&e}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_handleIsTouched(){this._isTouched&&(this.invalid=!this.input.checkValidity())}_handleDisabledChange(){this.setInvalid(!1),this._disabledChildRadios()}_disabledChildRadios(){if(this.disabled){this._radios.forEach(e=>e.disabled=this.disabled)}}render(){const e=ee`
+    `}}Wl.styles=[...Pe.styles,Za,Va,jl],e([Ve({type:Boolean,reflect:!0})],Wl.prototype,"checked",void 0),e([Ve()],Wl.prototype,"value",void 0),e([Ve({type:Boolean,reflect:!0})],Wl.prototype,"disabled",void 0),e([Ve({type:Boolean,reflect:!0})],Wl.prototype,"invalid",void 0),e([Ve({type:Boolean,reflect:!1})],Wl.prototype,"autofocus",void 0),e([Ze("input")],Wl.prototype,"input",void 0),e([at("checked")],Wl.prototype,"handleCheckedChange",null),e([at("disabled",{waitUntilFirstUpdate:!0})],Wl.prototype,"handleDisabledChange",null);var Kl=n`fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.radio-group-validation-input{display:none}.radio-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;class Gl extends(_a(Ea)){constructor(){super(...arguments),this.defaultValue="",this.value="",this.invalidFeedback="",this.hasFeedback=!1,this.required=!1,this.autofocus=!1,this._isTouched=!1}_handleValueChange(){this.emit("sgds-change",{detail:{value:this.value}}),this._updateCheckedRadio()}_handleInvalidChange(){this._radios.forEach(e=>e.invalid=this.invalid)}_mixinResetFormControl(){this.value=this.input.value=this.defaultValue,this._updateInputValue("reset"),this._mixinResetValidity(this.input)}connectedCallback(){super.connectedCallback(),this.defaultValue=this.value,this.addEventListener("sgds-blur",()=>{this._isTouched=!0})}firstUpdated(e){super.firstUpdated(e);const t=this._radios;t.forEach((e,s)=>{if(t.length>1)switch(s){case 0:e.setAttribute("first-of-type","");break;case t.length-1:e.setAttribute("last-of-type","");break;default:e.setAttribute("nth-of-type","")}}),this.value&&this._updateInputValue("change")}_handleRadioClick(e){e.preventDefault();const t=e.target;if(t.disabled)return;this.value=t.value,this._updateInputValue();this._radios.forEach(e=>e.checked=e===t)}_updateInputValue(e="change"){this.input.value=this.value,this.input.dispatchEvent(new InputEvent(e))}_handleKeyDown(e){var t;if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(e.key))return;const s=this._radios.filter(e=>!e.disabled),i=null!==(t=s.find(e=>e.checked))&&void 0!==t?t:s[0],a=" "===e.key?0:["ArrowUp","ArrowLeft"].includes(e.key)?-1:1;let o=s.indexOf(i)+a;o<0&&(o=s.length-1),o>s.length-1&&(o=0),this._radios.forEach(e=>{e.checked=!1,e.tabIndex=-1}),this.value=s[o].value,this._updateInputValue(),s[o].checked=!0,s[o].tabIndex=0,e.preventDefault()}_handleSlotChange(){const e=this._radios;e.forEach(e=>(e.autofocus=this.autofocus,e.checked=e.value===this.value,e)),this._disabledChildRadios(),e.some(e=>e.checked)||e[0]&&(e[0].tabIndex=0)}_updateCheckedRadio(){this._radios.forEach(e=>e.checked=e.value===this.value)}_renderHintText(){const e=ee` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;return this.hintText&&e}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_handleIsTouched(){this._isTouched&&(this.invalid=!this.input.checkValidity())}_handleDisabledChange(){this.setInvalid(!1),this._disabledChildRadios()}_disabledChildRadios(){if(this.disabled){this._radios.forEach(e=>e.disabled=this.disabled)}}render(){const e=ee`
       <slot
         class="radio-container"
         @click=${this._handleRadioClick}
@@ -3630,7 +3632,7 @@ const zl="important",Rl=" !"+zl;const Ol=Ye(class extends je{constructor(e){if(s
               </div>
             `:ie}
       </fieldset>
-    `}}Gl.styles=[...Ea.styles,Kl],e([Ze("slot:not([name])")],Gl.prototype,"defaultSlot",void 0),e([De()],Gl.prototype,"defaultValue",void 0),e([Ve({reflect:!0})],Gl.prototype,"value",void 0),e([Ve({type:String,reflect:!0})],Gl.prototype,"invalidFeedback",void 0),e([Ve({type:Boolean,reflect:!0})],Gl.prototype,"hasFeedback",void 0),e([Ve({type:Boolean,reflect:!0})],Gl.prototype,"required",void 0),e([at("value",{waitUntilFirstUpdate:!0})],Gl.prototype,"_handleValueChange",null),e([at("invalid",{waitUntilFirstUpdate:!0})],Gl.prototype,"_handleInvalidChange",null),e([De()],Gl.prototype,"_isTouched",void 0),e([Le()],Gl.prototype,"_radios",void 0),e([at("_isTouched",{waitUntilFirstUpdate:!0})],Gl.prototype,"_handleIsTouched",null),e([at("disabled",{waitUntilFirstUpdate:!0})],Gl.prototype,"_handleDisabledChange",null),rt("sgds-radio",Wl),rt("sgds-radio-group",Gl);var Xl=n`:host{--sidenav-sticky-top:0rem}.sticky{height:calc(100vh - var(--sidenav-sticky-top));overflow-y:visible;position:sticky;top:var(--sidenav-sticky-top)}`;class Ql extends Pe{constructor(){super(...arguments),this.sticky=!1}get items(){return[...this.defaultNodes||[]].filter(e=>void 0!==e.tagName)}async onToggle(e){const t="SGDS-SIDENAV-LINK"===e.target.tagName;if(e.defaultPrevented||t)return;this.items}render(){return ee`
+    `}}Gl.styles=[...Ea.styles,Kl],e([Ze("slot:not([name])")],Gl.prototype,"defaultSlot",void 0),e([De()],Gl.prototype,"defaultValue",void 0),e([Ve({reflect:!0})],Gl.prototype,"value",void 0),e([Ve({type:String,reflect:!0})],Gl.prototype,"invalidFeedback",void 0),e([Ve({type:Boolean,reflect:!0})],Gl.prototype,"hasFeedback",void 0),e([Ve({type:Boolean,reflect:!0})],Gl.prototype,"required",void 0),e([Ve({type:Boolean,reflect:!0})],Gl.prototype,"autofocus",void 0),e([at("value",{waitUntilFirstUpdate:!0})],Gl.prototype,"_handleValueChange",null),e([at("invalid",{waitUntilFirstUpdate:!0})],Gl.prototype,"_handleInvalidChange",null),e([De()],Gl.prototype,"_isTouched",void 0),e([Le()],Gl.prototype,"_radios",void 0),e([at("_isTouched",{waitUntilFirstUpdate:!0})],Gl.prototype,"_handleIsTouched",null),e([at("disabled",{waitUntilFirstUpdate:!0})],Gl.prototype,"_handleDisabledChange",null),rt("sgds-radio",Wl),rt("sgds-radio-group",Gl);var Xl=n`:host{--sidenav-sticky-top:0rem}.sticky{height:calc(100vh - var(--sidenav-sticky-top));overflow-y:visible;position:sticky;top:var(--sidenav-sticky-top)}`;class Ql extends Pe{constructor(){super(...arguments),this.sticky=!1}get items(){return[...this.defaultNodes||[]].filter(e=>void 0!==e.tagName)}async onToggle(e){const t="SGDS-SIDENAV-LINK"===e.target.tagName;if(e.defaultPrevented||t)return;this.items}render(){return ee`
       <nav class=${We({sticky:this.sticky})}>
         <div>
           <slot @click=${this.onToggle}></slot>
@@ -3775,16 +3777,17 @@ const zl="important",Rl=" !"+zl;const Ol=Ye(class extends je{constructor(e){if(s
               `:ie}
         </div>
       </div>
-    `}}gd.styles=[...Pe.styles,pd],e([Ve({type:Boolean})],gd.prototype,"hasActionSlot",void 0),e([bl({context:cd,subscribe:!0}),Ve({type:Boolean})],gd.prototype,"noClampAction",void 0),e([De()],gd.prototype,"clamped",void 0),e([bl({context:hd,subscribe:!0}),De()],gd.prototype,"siblingsCount",void 0),customElements.define("sgds-system-banner",ud),customElements.define("sgds-system-banner-item",gd);var vd=n`:host([density=compact]) .tab{font-size:var(--sgds-font-size-14);padding:var(--sgds-spacer-3) var(--sgds-spacer-5)}:host(:not([active])) .tab{cursor:pointer}:host([variant=solid]) .tab{background-color:var(--sgds-bg-translucent-subtle);border-radius:var(--sgds-border-radius-md)}:host([variant=solid][active]) .tab{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus,:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([variant=solid]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent)}:host([disabled]) .tab{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=underlined][active]) .tab{color:var(--sgds-primary-color-default)}:host([variant=underlined][orientation=vertical]) .tab{border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([variant=underlined][orientation=vertical][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:0;content:"";height:100%;position:absolute;right:-1px;width:var(--sgds-border-width-4)}:host([variant=underlined][orientation=horizontal]) .tab{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([variant=underlined][orientation=horizontal][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:-1px;content:"";height:var(--sgds-border-width-4);left:0;position:absolute;width:100%}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus,:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent-subtle);outline:0}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([variant=underlined]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent-subtle)}.tab{align-items:center;color:var(--sgds-color-default);display:flex;gap:var(--sgds-spacer-3);padding:var(--sgds-spacer-4) var(--sgds-spacer-5);position:relative}.tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;let md=0;class fd extends Pe{constructor(){super(...arguments),this.attrId=++md,this.componentId=`sgds-tab-${this.attrId}`,this.panel="",this.active=!1,this.disabled=!1}connectedCallback(){super.connectedCallback(),this.id=this.id.length>0?this.id:this.componentId,this.setAttribute("role","tab")}focus(e){var t,s;null===(s=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".tab"))||void 0===s||s.focus(e)}blur(){this.tab.blur()}handleActiveChange(){this.setAttribute("aria-selected",this.active?"true":"false")}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false"),this.disabled&&(this.active=!1)}render(){return ee`
+    `}}gd.styles=[...Pe.styles,pd],e([Ve({type:Boolean})],gd.prototype,"hasActionSlot",void 0),e([bl({context:cd,subscribe:!0}),Ve({type:Boolean})],gd.prototype,"noClampAction",void 0),e([De()],gd.prototype,"clamped",void 0),e([bl({context:hd,subscribe:!0}),De()],gd.prototype,"siblingsCount",void 0),customElements.define("sgds-system-banner",ud),customElements.define("sgds-system-banner-item",gd);var vd=n`:host([density=compact]) .tab{font-size:var(--sgds-font-size-14);padding:var(--sgds-spacer-3) var(--sgds-spacer-5)}:host(:not([active])) .tab{cursor:pointer}:host([variant=solid]) .tab{background-color:var(--sgds-bg-translucent-subtle);border-radius:var(--sgds-border-radius-md)}:host([variant=solid][active]) .tab{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus,:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([variant=solid]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent)}:host([disabled]) .tab{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=underlined][active]) .tab{color:var(--sgds-primary-color-default)}:host([variant=underlined][orientation=vertical][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:0;content:"";height:100%;position:absolute;right:-1px;width:var(--sgds-border-width-4)}:host([variant=underlined][orientation=horizontal][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:-1px;content:"";height:var(--sgds-border-width-4);left:0;position:absolute;width:100%}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus,:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent-subtle);outline:0}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([variant=underlined]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent-subtle)}.tab{align-items:center;color:var(--sgds-color-default);display:flex;gap:var(--sgds-spacer-3);padding:var(--sgds-spacer-4) var(--sgds-spacer-5);position:relative}.tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;let md=0;class fd extends Pe{constructor(){super(...arguments),this.attrId=++md,this.componentId=`sgds-tab-${this.attrId}`,this.panel="",this.active=!1,this.disabled=!1}connectedCallback(){super.connectedCallback(),this.id=this.id.length>0?this.id:this.componentId,this.setAttribute("role","tab")}focus(e){var t,s;null===(s=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".tab"))||void 0===s||s.focus(e)}blur(){this.tab.blur()}handleActiveChange(){this.setAttribute("aria-selected",this.active?"true":"false")}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false"),this.disabled&&(this.active=!1)}render(){return ee`
       <div data-testid="inner-tab" tabindex=${this.disabled?"-1":"0"} class="tab">
         <slot name="icon"></slot>
         <slot></slot>
       </div>
-    `}}fd.styles=[vd],e([Ze(".tab")],fd.prototype,"tab",void 0),e([Ve({reflect:!0})],fd.prototype,"panel",void 0),e([Ve({type:Boolean,reflect:!0})],fd.prototype,"active",void 0),e([Ve({type:Boolean,reflect:!0})],fd.prototype,"disabled",void 0),e([at("active")],fd.prototype,"handleActiveChange",null),e([at("disabled")],fd.prototype,"handleDisabledChange",null);var bd=n`.tab-group{display:flex;flex-direction:column;gap:var(--sgds-gap-xl)}.tab-group__nav{display:flex;flex-direction:row}.tab-group__content{flex:1}:host([orientation=vertical]) .tab-group{flex-direction:row}:host([orientation=vertical]) .tab-group__nav{flex-direction:column}:host([variant=solid]) .tab-group__nav{gap:var(--sgds-gap-xs)}`;class wd extends Pe{constructor(){super(...arguments),this._tabs=[],this._panels=[],this.variant="underlined",this.orientation="horizontal",this.density="default"}connectedCallback(){const e=Promise.all([customElements.whenDefined("sgds-tab"),customElements.whenDefined("sgds-tab-panel")]);super.connectedCallback(),this._resizeObserver=new ResizeObserver(()=>{}),this._mutationObserver=new MutationObserver(e=>{e.some(e=>!["aria-labelledby","aria-controls"].includes(e.attributeName))&&setTimeout(()=>this._setAriaLabels()),e.some(e=>"disabled"===e.attributeName)&&this._syncTabsAndPanels()}),this.updateComplete.then(()=>{this._syncTabsAndPanels(),this._mutationObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}),this._resizeObserver.observe(this._nav),e.then(()=>{new IntersectionObserver((e,t)=>{var s;e[0].intersectionRatio>0&&(this._setAriaLabels(),this._setActiveTab(null!==(s=this._getActiveTab())&&void 0!==s?s:this._tabs[0],{emitEvents:!1}),t.unobserve(e[0].target))}).observe(this._tabGroup)})})}disconnectedCallback(){this._mutationObserver.disconnect(),this._resizeObserver.unobserve(this._nav)}show(e){const t=this._tabs.find(t=>t.panel===e);t&&this._setActiveTab(t)}_getAllTabs(e={includeDisabled:!0}){return[...this.shadowRoot.querySelector('slot[name="nav"]').assignedElements()].filter(t=>e.includeDisabled?"sgds-tab"===t.tagName.toLowerCase():"sgds-tab"===t.tagName.toLowerCase()&&!t.disabled)}_getAllPanels(){return[...this._body.assignedElements()].filter(e=>"sgds-tab-panel"===e.tagName.toLowerCase())}_getActiveTab(){return this._tabs.find(e=>e.active)}_handleClick(e){const t=e.target.closest("sgds-tab");(null==t?void 0:t.closest("sgds-tab-group"))===this&&null!==t&&this._setActiveTab(t)}_handleKeyDown(e){const t=e.target.closest("sgds-tab");if((null==t?void 0:t.closest("sgds-tab-group"))===this&&(["Enter"," "].includes(e.key)&&null!==t&&(this._setActiveTab(t),e.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key))){const t=this._tabs.find(e=>e.matches(":focus"));if("sgds-tab"===(null==t?void 0:t.tagName.toLowerCase())){let s=this._tabs.indexOf(t);"Home"===e.key?s=0:"End"===e.key?s=this._tabs.length-1:"ArrowUp"===e.key||"ArrowLeft"===e.key?s--:"ArrowDown"!==e.key&&"ArrowRight"!==e.key||s++,s<0&&(s=this._tabs.length-1),s>this._tabs.length-1&&(s=0),this._tabs[s].focus({preventScroll:!0}),this._setActiveTab(this._tabs[s]),e.preventDefault()}}}_setActiveTab(e,t){if(t=Object.assign({emitEvents:!0},t),e!==this._activeTab&&!e.disabled){const s=this._activeTab;this._activeTab=e,this._tabs.forEach(e=>{e.active=e===this._activeTab}),this._panels.map(e=>{var t;return e.active=e.name===(null===(t=this._activeTab)||void 0===t?void 0:t.panel)}),t.emitEvents&&(s&&this.emit("sgds-tab-hide",{detail:{name:s.panel}}),this.emit("sgds-tab-show",{detail:{name:this._activeTab.panel}}))}}_setAriaLabels(){this._tabs.forEach(e=>{const t=this._panels.find(t=>t.name===e.panel);t&&(e.setAttribute("aria-controls",t.getAttribute("id")),t.setAttribute("aria-labelledby",e.getAttribute("id")))})}_syncTabsAndPanels(){this._tabs=this._getAllTabs({includeDisabled:!1}),this._panels=this._getAllPanels()}_updateTabsAttribute(e){if(!this._navSlot)return;this._navSlot.forEach(t=>{t.setAttribute(e,this[e])})}_handleSlotChange(){this._updateTabsAttribute("variant"),this._updateTabsAttribute("orientation"),this._updateTabsAttribute("density"),this._syncTabsAndPanels()}willUpdate(e){e.has("variant")&&this._updateTabsAttribute("variant"),e.has("orientation")&&this._updateTabsAttribute("orientation"),e.has("density")&&this._updateTabsAttribute("density")}render(){return ee`
+    `}}fd.styles=[vd],e([Ze(".tab")],fd.prototype,"tab",void 0),e([Ve({reflect:!0})],fd.prototype,"panel",void 0),e([Ve({type:Boolean,reflect:!0})],fd.prototype,"active",void 0),e([Ve({type:Boolean,reflect:!0})],fd.prototype,"disabled",void 0),e([at("active")],fd.prototype,"handleActiveChange",null),e([at("disabled")],fd.prototype,"handleDisabledChange",null);var bd=n`.tab-group{display:flex;flex-direction:column;gap:var(--sgds-gap-xl)}.tab-group__nav{display:flex;flex-direction:row}.tab-group__content{flex:1}:host([orientation=vertical]) .tab-group{flex-direction:row}:host([orientation=vertical]) .tab-group__nav{flex-direction:column}:host([variant=solid]) .tab-group__nav{gap:var(--sgds-gap-xs)}:host([variant=underlined][orientation=horizontal]) .tab-group__nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:flex;flex-direction:row}:host([variant=underlined][orientation=vertical]) .tab-group__nav{border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}`;class wd extends Pe{constructor(){super(...arguments),this._tabs=[],this._panels=[],this.variant="underlined",this.orientation="horizontal",this.density="default"}connectedCallback(){const e=Promise.all([customElements.whenDefined("sgds-tab"),customElements.whenDefined("sgds-tab-panel")]);super.connectedCallback(),this._resizeObserver=new ResizeObserver(()=>{}),this._mutationObserver=new MutationObserver(e=>{e.some(e=>!["aria-labelledby","aria-controls"].includes(e.attributeName))&&setTimeout(()=>this._setAriaLabels()),e.some(e=>"disabled"===e.attributeName)&&this._syncTabsAndPanels()}),this.updateComplete.then(()=>{this._syncTabsAndPanels(),this._mutationObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}),this._resizeObserver.observe(this._nav),e.then(()=>{new IntersectionObserver((e,t)=>{var s;e[0].intersectionRatio>0&&(this._setAriaLabels(),this._setActiveTab(null!==(s=this._getActiveTab())&&void 0!==s?s:this._tabs[0],{emitEvents:!1}),t.unobserve(e[0].target))}).observe(this._tabGroup)})})}disconnectedCallback(){this._mutationObserver.disconnect(),this._resizeObserver.unobserve(this._nav)}show(e){const t=this._tabs.find(t=>t.panel===e);t&&this._setActiveTab(t)}_getAllTabs(e={includeDisabled:!0}){return[...this.shadowRoot.querySelector('slot[name="nav"]').assignedElements()].filter(t=>e.includeDisabled?"sgds-tab"===t.tagName.toLowerCase():"sgds-tab"===t.tagName.toLowerCase()&&!t.disabled)}_getAllPanels(){return[...this._body.assignedElements()].filter(e=>"sgds-tab-panel"===e.tagName.toLowerCase())}_getActiveTab(){return this._tabs.find(e=>e.active)}_handleClick(e){const t=e.target.closest("sgds-tab");(null==t?void 0:t.closest("sgds-tab-group"))===this&&null!==t&&this._setActiveTab(t)}_handleKeyDown(e){const t=e.target.closest("sgds-tab");if((null==t?void 0:t.closest("sgds-tab-group"))===this&&(["Enter"," "].includes(e.key)&&null!==t&&(this._setActiveTab(t),e.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key))){const t=this._tabs.find(e=>e.matches(":focus"));if("sgds-tab"===(null==t?void 0:t.tagName.toLowerCase())){let s=this._tabs.indexOf(t);"Home"===e.key?s=0:"End"===e.key?s=this._tabs.length-1:"ArrowUp"===e.key||"ArrowLeft"===e.key?s--:"ArrowDown"!==e.key&&"ArrowRight"!==e.key||s++,s<0&&(s=this._tabs.length-1),s>this._tabs.length-1&&(s=0),this._tabs[s].focus({preventScroll:!0}),this._setActiveTab(this._tabs[s]),e.preventDefault()}}}_setActiveTab(e,t){if(t=Object.assign({emitEvents:!0},t),e!==this._activeTab&&!e.disabled){const s=this._activeTab;this._activeTab=e,this._tabs.forEach(e=>{e.active=e===this._activeTab}),this._panels.map(e=>{var t;return e.active=e.name===(null===(t=this._activeTab)||void 0===t?void 0:t.panel)}),t.emitEvents&&(s&&this.emit("sgds-tab-hide",{detail:{name:s.panel}}),this.emit("sgds-tab-show",{detail:{name:this._activeTab.panel}}))}}_setAriaLabels(){this._tabs.forEach(e=>{const t=this._panels.find(t=>t.name===e.panel);t&&(e.setAttribute("aria-controls",t.getAttribute("id")),t.setAttribute("aria-labelledby",e.getAttribute("id")))})}_syncTabsAndPanels(){this._tabs=this._getAllTabs({includeDisabled:!1}),this._panels=this._getAllPanels()}_updateTabsAttribute(e){if(!this._navSlot)return;this._navSlot.forEach(t=>{t.setAttribute(e,this[e])})}_handleSlotChange(){this._updateTabsAttribute("variant"),this._updateTabsAttribute("orientation"),this._updateTabsAttribute("density"),this._syncTabsAndPanels()}willUpdate(e){e.has("variant")&&this._updateTabsAttribute("variant"),e.has("orientation")&&this._updateTabsAttribute("orientation"),e.has("density")&&this._updateTabsAttribute("density")}render(){return ee`
       <div class="tab-group" @click=${this._handleClick} @keydown=${this._handleKeyDown}>
         <div class="tab-group__nav" role="tablist">
           <slot name="nav" @slotchange=${this._handleSlotChange}></slot>
         </div>
+
         <div class="tab-group__content">
           <slot class="tab-group__body" @slotchange=${this._syncTabsAndPanels}></slot>
         </div>
@@ -3851,7 +3854,7 @@ const zl="important",Rl=" !"+zl;const Ol=Ye(class extends je{constructor(e){if(s
       </div>
     `}render(){return pt`
       <div
-        class="form-control-container ${We({disabled:this.disabled})}"
+        class="form-control-container m-width-256 ${We({disabled:this.disabled})}"
       >
         <label for=${this._controlId} class="form-label">${this.label}</label>
         <textarea
@@ -3889,7 +3892,7 @@ const zl="important",Rl=" !"+zl;const Ol=Ye(class extends je{constructor(e){if(s
           ${this.maxlength>0?this._wordCount():ie}
         </div>
       </div>
-    `}}Zd.styles=[...Ea.styles,ya,Id],e([Ze("textarea.form-control-group")],Zd.prototype,"textarea",void 0),e([Ve({type:String,reflect:!0})],Zd.prototype,"name",void 0),e([Ve({type:String,reflect:!0})],Zd.prototype,"value",void 0),e([Ve({type:Number,reflect:!0})],Zd.prototype,"minlength",void 0),e([Ve({type:Number,reflect:!0})],Zd.prototype,"maxlength",void 0),e([Ve({type:Boolean,reflect:!0})],Zd.prototype,"spellcheck",void 0),e([Ve({type:Number})],Zd.prototype,"rows",void 0),e([Ve({type:String,reflect:!0})],Zd.prototype,"placeholder",void 0),e([Ve({type:String,reflect:!0})],Zd.prototype,"invalidFeedback",void 0),e([Ve({type:Boolean,reflect:!0})],Zd.prototype,"autofocus",void 0),e([Ve({type:Boolean,reflect:!0})],Zd.prototype,"readonly",void 0),e([Ve({type:String,reflect:!0})],Zd.prototype,"resize",void 0),e([Ve({type:String,reflect:!0})],Zd.prototype,"inputmode",void 0),e([Ve({type:Boolean,reflect:!0})],Zd.prototype,"autocorrect",void 0),e([xa()],Zd.prototype,"defaultValue",void 0),e([Ve({type:Boolean,reflect:!0})],Zd.prototype,"hasFeedback",void 0),e([Ve({type:Boolean,reflect:!0})],Zd.prototype,"required",void 0),e([Ve({type:Boolean,reflect:!0})],Zd.prototype,"noValidate",void 0),e([Ve({reflect:!0})],Zd.prototype,"hintText",void 0),e([De()],Zd.prototype,"_isTouched",void 0),e([at("rows",{waitUntilFirstUpdate:!0})],Zd.prototype,"_handleRowsChange",null),e([at("_isTouched",{waitUntilFirstUpdate:!0})],Zd.prototype,"_handleIsTouched",null),e([at("disabled",{waitUntilFirstUpdate:!0})],Zd.prototype,"_handleDisabledChange",null),e([at("value",{waitUntilFirstUpdate:!0})],Zd.prototype,"_handleValueChange",null),rt("sgds-textarea",Zd);var Bd=n`:host([variant=info]) slot[name=icon]::slotted(*){color:var(--sgds-primary-color-default)}:host([variant=success]) slot[name=icon]::slotted(*){color:var(--sgds-success-color-default)}:host([variant=danger]) slot[name=icon]::slotted(*){color:var(--sgds-danger-color-default)}:host([variant=warning]) slot[name=icon]::slotted(*){color:var(--sgds-warning-color-fixed-light)}.toast{align-items:flex-start;background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);flex-direction:row;max-width:var(--sgds-dimension-480);min-width:var(--sgds-dimension-320);padding:var(--sgds-padding-md);pointer-events:auto;width:320px}.toast,.toast-content{display:flex;gap:var(--sgds-gap-sm)}.toast-content{word-wrap:break-word;flex-direction:column}.toast-body{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.toast-body__title{font-size:var(--sgds-font-size-subtitle-sm);font-weight:var(--sgds-font-weight-semibold);margin:0}.toast-body__message,.toast-body__title{line-height:var(--sgds-line-height-2-xs)}.toast-body__message{color:var(--sgds-color-subtle,#525252);font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular)}.toast-action{word-wrap:break-word;color:var(--sgds-link-color-default)}.toast-header strong{margin-right:auto;word-break:break-all}.close-btn{position:absolute;right:10px;top:10px}.d-none{display:none}`;class Ld extends Pe{constructor(){super(...arguments),this.show=!1,this.title="Title",this.noAnimation=!1,this.autohide=!1,this.delay=5e3,this.variant="info",this.dismissible=!1}async showToast(){if(!this.show)return this.show=!0,it(this,"sgds-after-show")}async hideToast(){if(this.show)return this.show=!1,it(this,"sgds-after-hide")}handleCloseClick(){this.show=!1,this.emit("sgds-close")}async handleShowChange(){if(this.show){this.emit("sgds-show"),this.toast.classList.remove("d-none");const e=tt(this,"toast.show");this.noAnimation||await Ke(this.toast,e.keyframes,e.options),this.emit("sgds-after-show")}else{this.emit("sgds-hide");const e=tt(this,"toast.hide");this.noAnimation||await Ke(this.toast,e.keyframes,e.options),this.toast.classList.add("d-none"),this.emit("sgds-after-hide")}}firstUpdated(e){var t;if(super.firstUpdated(e),this.show||this.toast.classList.add("d-none"),0===this._actionNodes.length)return null===(t=this.shadowRoot.querySelector("slot[name='action']"))||void 0===t?void 0:t.classList.add("d-none")}render(){return this.autohide&&this.show&&setTimeout(()=>{this.show=!1},this.delay),ee`
+    `}}Zd.styles=[...Ea.styles,ya,Id],e([Ze("textarea.form-control-group")],Zd.prototype,"textarea",void 0),e([Ve({type:String,reflect:!0})],Zd.prototype,"name",void 0),e([Ve({type:String,reflect:!0})],Zd.prototype,"value",void 0),e([Ve({type:Number,reflect:!0})],Zd.prototype,"minlength",void 0),e([Ve({type:Number,reflect:!0})],Zd.prototype,"maxlength",void 0),e([Ve({type:Boolean,reflect:!0})],Zd.prototype,"spellcheck",void 0),e([Ve({type:Number})],Zd.prototype,"rows",void 0),e([Ve({type:String,reflect:!0})],Zd.prototype,"placeholder",void 0),e([Ve({type:String,reflect:!0})],Zd.prototype,"invalidFeedback",void 0),e([Ve({type:Boolean,reflect:!0})],Zd.prototype,"autofocus",void 0),e([Ve({type:Boolean,reflect:!0})],Zd.prototype,"readonly",void 0),e([Ve({type:String,reflect:!0})],Zd.prototype,"resize",void 0),e([Ve({type:String,reflect:!0})],Zd.prototype,"inputmode",void 0),e([Ve({type:Boolean,reflect:!0})],Zd.prototype,"autocorrect",void 0),e([xa()],Zd.prototype,"defaultValue",void 0),e([Ve({type:Boolean,reflect:!0})],Zd.prototype,"hasFeedback",void 0),e([Ve({type:Boolean,reflect:!0})],Zd.prototype,"required",void 0),e([Ve({type:Boolean,reflect:!0})],Zd.prototype,"noValidate",void 0),e([Ve({reflect:!0})],Zd.prototype,"hintText",void 0),e([De()],Zd.prototype,"_isTouched",void 0),e([at("rows",{waitUntilFirstUpdate:!0})],Zd.prototype,"_handleRowsChange",null),e([at("_isTouched",{waitUntilFirstUpdate:!0})],Zd.prototype,"_handleIsTouched",null),e([at("disabled",{waitUntilFirstUpdate:!0})],Zd.prototype,"_handleDisabledChange",null),e([at("value",{waitUntilFirstUpdate:!0})],Zd.prototype,"_handleValueChange",null),rt("sgds-textarea",Zd);var Bd=n`:host([variant=info]) slot[name=icon]::slotted(*){color:var(--sgds-primary-color-default)}:host([variant=success]) slot[name=icon]::slotted(*){color:var(--sgds-success-color-default)}:host([variant=danger]) slot[name=icon]::slotted(*){color:var(--sgds-danger-color-default)}:host([variant=warning]) slot[name=icon]::slotted(*){color:var(--sgds-warning-color-fixed-light)}.toast{align-items:flex-start;background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);display:inline-flex;flex-direction:row;gap:var(--sgds-gap-sm);max-width:var(--sgds-dimension-480);min-width:var(--sgds-dimension-280);padding:var(--sgds-padding-md);pointer-events:auto;position:relative}.toast-content{word-wrap:break-word;gap:var(--sgds-gap-sm);padding-right:var(--sgds-padding-xl)}.toast-body,.toast-content{display:flex;flex-direction:column}.toast-body{gap:var(--sgds-gap-2-xs)}.toast-body__title{font-size:var(--sgds-font-size-subtitle-sm);font-weight:var(--sgds-font-weight-semibold);margin:0}.toast-body__message,.toast-body__title{line-height:var(--sgds-line-height-2-xs)}.toast-body__message{color:var(--sgds-color-subtle,#525252);font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular)}.toast-action{word-wrap:break-word;color:var(--sgds-link-color-default)}.toast-header strong{margin-right:auto;word-break:break-all}.close-btn{position:absolute;right:10px;top:10px}.d-none{display:none}`;class Ld extends Pe{constructor(){super(...arguments),this.show=!1,this.title="Title",this.noAnimation=!1,this.autohide=!1,this.delay=5e3,this.variant="info",this.dismissible=!1}async showToast(){if(!this.show)return this.show=!0,it(this,"sgds-after-show")}async hideToast(){if(this.show)return this.show=!1,it(this,"sgds-after-hide")}handleCloseClick(){this.show=!1,this.emit("sgds-close")}async handleShowChange(){if(this.show){this.emit("sgds-show"),this.toast.classList.remove("d-none");const e=tt(this,"toast.show");this.noAnimation||await Ke(this.toast,e.keyframes,e.options),this.emit("sgds-after-show")}else{this.emit("sgds-hide");const e=tt(this,"toast.hide");this.noAnimation||await Ke(this.toast,e.keyframes,e.options),this.toast.classList.add("d-none"),this.emit("sgds-after-hide")}}firstUpdated(e){var t;if(super.firstUpdated(e),this.show||this.toast.classList.add("d-none"),0===this._actionNodes.length)return null===(t=this.shadowRoot.querySelector("slot[name='action']"))||void 0===t?void 0:t.classList.add("d-none")}render(){return this.autohide&&this.show&&setTimeout(()=>{this.show=!1},this.delay),ee`
       <div
         class="toast"
         role="alert"
@@ -3992,7 +3995,7 @@ const zl="important",Rl=" !"+zl;const Ol=Ye(class extends je{constructor(e){if(s
       </div>
     `}render(){return ee`
       <div
-        class=${We({disabled:this.disabled,select:!0,"form-control-container":!0})}
+        class=${We({disabled:this.disabled,select:!0,"form-control-container":!0,"m-width-160":!0})}
       >
         ${this._renderLabel()}
         <!-- The input -->