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

package/components/Toast/toast.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`: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}`;
+var css_248z = css`: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}`;
 
 export { css_248z as default };
 //# sourceMappingURL=toast.js.map

package/components/index.umd.min.js

@@ -67,7 +67,7 @@ const Ne=1,Ue=2,qe=3,Ye=4,je=e=>(...t)=>({_$litDirective$:e,values:t});class We{
    * @license
    * Copyright 2018 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
-   */const Ke=je(class extends We{constructor(e){if(super(e),e.type!==Ne||"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 ie}});function Ge(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:Xe()?0:null==s?void 0:s.duration}));a.addEventListener("cancel",i,{once:!0}),a.addEventListener("finish",i,{once:!0})})}function Xe(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}function Qe(e,t){return e.map(e=>Object.assign(Object.assign({},e),{height:"auto"===e.height?`${t}px`:e.height}))}function Je(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 et=new Map,tt=new WeakMap;function st(e,t){const s=tt.get(e);if(null==s?void 0:s[t])return s[t];const i=et.get(t);return i||{keyframes:[],options:{duration:0}}}function it(e,t){et.set(e,function(e){return null!=e?e:{keyframes:[],options:{duration:0}}}(t))}function at(e,t){return new Promise(s=>{e.addEventListener(t,function i(a){a.target===e&&(e.removeEventListener(t,i),s())})})}function ot(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 nt=r`: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 rt extends He{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 Je(this.body),this.body.classList.remove("hidden");const{keyframes:e,options:t}=st(this,"accordion.show");await Ge(this.body,Qe(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 Je(this.body);const{keyframes:e,options:t}=st(this,"accordion.hide"),s=t.duration;setTimeout(()=>{this.body.classList.add("hidden")},s-20),await Ge(this.body,Qe(e,this.body.scrollHeight),t),this.emit("sgds-after-hide")}}async show(){if(!this.open)return this.open=!0,at(this,"sgds-after-show")}async hide(){if(this.open)return this.open=!1,at(this,"sgds-after-hide")}render(){const e=this.hasUpdated;return te`
+   */const Ke=je(class extends We{constructor(e){if(super(e),e.type!==Ne||"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 ie}});function Ge(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:Xe()?0:null==s?void 0:s.duration}));a.addEventListener("cancel",i,{once:!0}),a.addEventListener("finish",i,{once:!0})})}function Xe(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}function Qe(e,t){return e.map(e=>Object.assign(Object.assign({},e),{height:"auto"===e.height?`${t}px`:e.height}))}function Je(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 et=new Map,tt=new WeakMap;function st(e,t){const s=tt.get(e);if(null==s?void 0:s[t])return s[t];const i=et.get(t);return i||{keyframes:[],options:{duration:0}}}function it(e,t){et.set(e,function(e){return null!=e?e:{keyframes:[],options:{duration:0}}}(t))}function at(e,t){return new Promise(s=>{e.addEventListener(t,function i(a){a.target===e&&(e.removeEventListener(t,i),s())})})}function ot(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 nt=r`: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 rt extends He{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 Je(this.body),this.body.classList.remove("hidden");const{keyframes:e,options:t}=st(this,"accordion.show");await Ge(this.body,Qe(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 Je(this.body);const{keyframes:e,options:t}=st(this,"accordion.hide"),s=t.duration;setTimeout(()=>{this.body.classList.add("hidden")},s-20),await Ge(this.body,Qe(e,this.body.scrollHeight),t),this.emit("sgds-after-hide")}}async show(){if(!this.open)return this.open=!0,at(this,"sgds-after-show")}async hide(){if(this.open)return this.open=!1,at(this,"sgds-after-hide")}firstUpdated(){this.open||this.body.classList.add("hidden")}render(){return te`
       <div class="accordion-item">
         <button
           class=${Ke({"accordion-btn":!0,disabled:this.disabled,collapsed:!this.open})}
@@ -80,14 +80,16 @@ const Ne=1,Ue=2,qe=3,Ye=4,je=e=>(...t)=>({_$litDirective$:e,values:t});class We{
           @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=${Ke({"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>
@@ -3622,7 +3624,7 @@ const Ul="important",ql=" !"+Ul;const Yl=je(class extends We{constructor(e){if(s
         <div id="announcer" role="region" aria-live="assertive" class="visually-hidden">${this.value}</div>
         ${this._renderFeedback()}
       </div>
-    `}}Gl.styles=[...ka.styles,xa,Ll,Ea,Kl],Gl.dependencies={"sgds-input":Rr,"sgds-icon-button":er},t([Be("sgds-icon-button[ariaLabel^='increase by']")],Gl.prototype,"plusBtn",void 0),t([Be("sgds-icon-button[ariaLabel^='decrease by']")],Gl.prototype,"minusBtn",void 0),t([De({type:Number,reflect:!0})],Gl.prototype,"value",void 0),t([De({type:Number})],Gl.prototype,"step",void 0),t([De({type:Number})],Gl.prototype,"min",void 0),t([De({type:Number})],Gl.prototype,"max",void 0),t([De({type:String,reflect:!0})],Gl.prototype,"hasFeedback",void 0),t([De({type:String,reflect:!0})],Gl.prototype,"invalidFeedback",void 0),t([De({type:Boolean,reflect:!0})],Gl.prototype,"readonly",void 0),t([_a()],Gl.prototype,"defaultValue",void 0),t([Le("sgds-input")],Gl.prototype,"_sgdsInput",void 0);var Xl=r`: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 Ql extends He{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 te`
+    `}}Gl.styles=[...ka.styles,xa,Ll,Ea,Kl],Gl.dependencies={"sgds-input":Rr,"sgds-icon-button":er},t([Be("sgds-icon-button[ariaLabel^='increase by']")],Gl.prototype,"plusBtn",void 0),t([Be("sgds-icon-button[ariaLabel^='decrease by']")],Gl.prototype,"minusBtn",void 0),t([De({type:Number,reflect:!0})],Gl.prototype,"value",void 0),t([De({type:Number})],Gl.prototype,"step",void 0),t([De({type:Number})],Gl.prototype,"min",void 0),t([De({type:Number})],Gl.prototype,"max",void 0),t([De({type:String,reflect:!0})],Gl.prototype,"hasFeedback",void 0),t([De({type:String,reflect:!0})],Gl.prototype,"invalidFeedback",void 0),t([De({type:Boolean,reflect:!0})],Gl.prototype,"readonly",void 0),t([_a()],Gl.prototype,"defaultValue",void 0),t([Le("sgds-input")],Gl.prototype,"_sgdsInput",void 0);var Xl=r`: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 Ql extends He{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 te`
       <div class="form-check">
         <input
           class=${Ke({"form-check-input":!0,"is-invalid":this.invalid})}
@@ -3639,7 +3641,7 @@ const Ul="important",ql=" !"+Ul;const Yl=je(class extends We{constructor(e){if(s
           <slot></slot>
         </label>
       </div>
-    `}}Ql.styles=[...He.styles,$a,ya,Xl],t([De({type:Boolean,reflect:!0})],Ql.prototype,"checked",void 0),t([De()],Ql.prototype,"value",void 0),t([De({type:Boolean,reflect:!0})],Ql.prototype,"disabled",void 0),t([De({type:Boolean,reflect:!0})],Ql.prototype,"invalid",void 0),t([Be("input")],Ql.prototype,"input",void 0),t([ot("checked")],Ql.prototype,"handleCheckedChange",null),t([ot("disabled",{waitUntilFirstUpdate:!0})],Ql.prototype,"handleDisabledChange",null);var Jl=r`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 ed extends(Sa(ka)){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=te` <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=te`
+    `}}Ql.styles=[...He.styles,$a,ya,Xl],t([De({type:Boolean,reflect:!0})],Ql.prototype,"checked",void 0),t([De()],Ql.prototype,"value",void 0),t([De({type:Boolean,reflect:!0})],Ql.prototype,"disabled",void 0),t([De({type:Boolean,reflect:!0})],Ql.prototype,"invalid",void 0),t([De({type:Boolean,reflect:!1})],Ql.prototype,"autofocus",void 0),t([Be("input")],Ql.prototype,"input",void 0),t([ot("checked")],Ql.prototype,"handleCheckedChange",null),t([ot("disabled",{waitUntilFirstUpdate:!0})],Ql.prototype,"handleDisabledChange",null);var Jl=r`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 ed extends(Sa(ka)){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=te` <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=te`
       <slot
         class="radio-container"
         @click=${this._handleRadioClick}
@@ -3683,7 +3685,7 @@ const Ul="important",ql=" !"+Ul;const Yl=je(class extends We{constructor(e){if(s
               </div>
             `:ae}
       </fieldset>
-    `}}ed.styles=[...ka.styles,Jl],t([Be("slot:not([name])")],ed.prototype,"defaultSlot",void 0),t([Ee()],ed.prototype,"defaultValue",void 0),t([De({reflect:!0})],ed.prototype,"value",void 0),t([De({type:String,reflect:!0})],ed.prototype,"invalidFeedback",void 0),t([De({type:Boolean,reflect:!0})],ed.prototype,"hasFeedback",void 0),t([De({type:Boolean,reflect:!0})],ed.prototype,"required",void 0),t([ot("value",{waitUntilFirstUpdate:!0})],ed.prototype,"_handleValueChange",null),t([ot("invalid",{waitUntilFirstUpdate:!0})],ed.prototype,"_handleInvalidChange",null),t([Ee()],ed.prototype,"_isTouched",void 0),t([Te()],ed.prototype,"_radios",void 0),t([ot("_isTouched",{waitUntilFirstUpdate:!0})],ed.prototype,"_handleIsTouched",null),t([ot("disabled",{waitUntilFirstUpdate:!0})],ed.prototype,"_handleDisabledChange",null);var td=r`: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}slot[id=default].is-loading,slot[id=default].is-loading::slotted(*){display:none}`;class sd extends Ta{constructor(){super(...arguments),this._renderItemContent=()=>te`<div class="normal-item-content">
+    `}}ed.styles=[...ka.styles,Jl],t([Be("slot:not([name])")],ed.prototype,"defaultSlot",void 0),t([Ee()],ed.prototype,"defaultValue",void 0),t([De({reflect:!0})],ed.prototype,"value",void 0),t([De({type:String,reflect:!0})],ed.prototype,"invalidFeedback",void 0),t([De({type:Boolean,reflect:!0})],ed.prototype,"hasFeedback",void 0),t([De({type:Boolean,reflect:!0})],ed.prototype,"required",void 0),t([De({type:Boolean,reflect:!0})],ed.prototype,"autofocus",void 0),t([ot("value",{waitUntilFirstUpdate:!0})],ed.prototype,"_handleValueChange",null),t([ot("invalid",{waitUntilFirstUpdate:!0})],ed.prototype,"_handleInvalidChange",null),t([Ee()],ed.prototype,"_isTouched",void 0),t([Te()],ed.prototype,"_radios",void 0),t([ot("_isTouched",{waitUntilFirstUpdate:!0})],ed.prototype,"_handleIsTouched",null),t([ot("disabled",{waitUntilFirstUpdate:!0})],ed.prototype,"_handleDisabledChange",null);var td=r`: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}slot[id=default].is-loading,slot[id=default].is-loading::slotted(*){display:none}`;class sd extends Ta{constructor(){super(...arguments),this._renderItemContent=()=>te`<div class="normal-item-content">
       <slot></slot>
       ${this.active?te` <sgds-icon name="check"></sgds-icon> `:ae}
     </div>`}}sd.dependencies={"sgds-icon":Bt};class id extends Za{constructor(){super(...arguments),this._blockInputKeydown=e=>{"Tab"!==e.key&&e.preventDefault()}}connectedCallback(){super.connectedCallback(),this.addEventListener("sgds-hide",async()=>{(await this._input).focus()})}async firstUpdated(e){super.firstUpdated(e),this._updateDisplayValue(),this.input=await this._input,this._mixinValidate(this.input),this.menuIsOpen&&await this.updateFloatingPosition()}async _handleSlotChange(e){const t=e.target.assignedElements({flatten:!0});t.forEach(e=>e.addEventListener("click",e=>{e.target.disabled||this._handleItemSelected(e)})),t.forEach(e=>e.addEventListener("keydown",e=>{"Enter"===e.key&&this._handleItemSelected(e)})),this.menuList=await this._getMenuListFromOptions(t),this._updateDisplayValue(),this.input=await this._input,this._mixinValidate(this.input)}_updateDisplayValue(){if(this.value&&this.menuList.length>0){const e=this.menuList.filter(({value:e})=>e===this.value);this.displayValue=e[0].label,this._setActiveToOption()}}_setActiveToOption(){const e=this.menuList.findIndex(e=>e.value.toString()===this.value);this.options.forEach((t,s)=>{t.active=s===e})}async _handleValueChange(){this._setActiveToOption(),this.emit("sgds-change"),this.value&&this.emit("sgds-select");const e=await this._input;this._mixinSetFormValue(),this._mixinValidate(e),this._updateDisplayValue(),(this._isTouched||""!==this.value)&&(this.invalid=!this._mixinReportValidity())}async _handleItemSelected(e){var t,s,i;const a=e.target,o=null!==(s=null===(t=a.textContent)||void 0===t?void 0:t.trim())&&void 0!==s?s:"",n={label:o,value:null!==(i=a.getAttribute("value"))&&void 0!==i?i:o};this.value=n.value.toString(),this.displayValue=n.label,this.hideMenu()}_handleFocus(){this.emit("sgds-focus")}async _handleInputBlur(e){e.preventDefault(),this.emit("sgds-blur")}async _mixinResetFormControl(){this.value=this.defaultValue;const e=this.menuList.filter(({value:e})=>e===this.value);e.length<=0?this.displayValue="":this.displayValue=e[0].label,this._mixinResetValidity(await this._input)}_renderMenu(){const e=this.menuList.map(e=>{const t=e.value===this.value;return te`
@@ -3967,16 +3969,17 @@ const Ul="important",ql=" !"+Ul;const Yl=je(class extends We{constructor(e){if(s
               `:ae}
         </div>
       </div>
-    `}}Bd.styles=[...He.styles,Zd],Bd.dependencies={"sgds-close-button":mt,"sgds-icon":Bt,"sgds-icon-button":er},t([De({type:Boolean,reflect:!0})],Bd.prototype,"show",void 0),t([De({type:Boolean,reflect:!0})],Bd.prototype,"dismissible",void 0),t([xl({context:"no-clamp-action-context"}),De({type:Boolean})],Bd.prototype,"noClampAction",void 0),t([De({type:Boolean,reflect:!0})],Bd.prototype,"fluid",void 0),t([Te({flatten:!0})],Bd.prototype,"bannerItem",void 0),t([Be(".banner")],Bd.prototype,"banner",void 0),t([xl({context:"system-banner-children-count-context"}),Ee()],Bd.prototype,"childCount",void 0),t([Ee()],Bd.prototype,"_intervalId",void 0),t([Ee()],Bd.prototype,"_currentIndex",void 0),t([ot("show",{waitUntilFirstUpdate:!0})],Bd.prototype,"_handleShowChange",null),it("banner.item.next",{keyframes:[{opacity:0,transform:"translateY(-100%)"},{opacity:1,transform:"translateY(0)"}],options:{duration:500,easing:"cubic-bezier(0.45,0.05,0.55,0.95)"}}),it("banner.item.prev",{keyframes:[{opacity:0,transform:"translateY(100%)"},{opacity:1,transform:"translateY(0)"}],options:{duration:500,easing:"cubic-bezier(0.45,0.05,0.55,0.95)"}});var Ld=r`: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 Td=0;class Fd extends He{constructor(){super(...arguments),this.attrId=++Td,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 te`
+    `}}Bd.styles=[...He.styles,Zd],Bd.dependencies={"sgds-close-button":mt,"sgds-icon":Bt,"sgds-icon-button":er},t([De({type:Boolean,reflect:!0})],Bd.prototype,"show",void 0),t([De({type:Boolean,reflect:!0})],Bd.prototype,"dismissible",void 0),t([xl({context:"no-clamp-action-context"}),De({type:Boolean})],Bd.prototype,"noClampAction",void 0),t([De({type:Boolean,reflect:!0})],Bd.prototype,"fluid",void 0),t([Te({flatten:!0})],Bd.prototype,"bannerItem",void 0),t([Be(".banner")],Bd.prototype,"banner",void 0),t([xl({context:"system-banner-children-count-context"}),Ee()],Bd.prototype,"childCount",void 0),t([Ee()],Bd.prototype,"_intervalId",void 0),t([Ee()],Bd.prototype,"_currentIndex",void 0),t([ot("show",{waitUntilFirstUpdate:!0})],Bd.prototype,"_handleShowChange",null),it("banner.item.next",{keyframes:[{opacity:0,transform:"translateY(-100%)"},{opacity:1,transform:"translateY(0)"}],options:{duration:500,easing:"cubic-bezier(0.45,0.05,0.55,0.95)"}}),it("banner.item.prev",{keyframes:[{opacity:0,transform:"translateY(100%)"},{opacity:1,transform:"translateY(0)"}],options:{duration:500,easing:"cubic-bezier(0.45,0.05,0.55,0.95)"}});var Ld=r`: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 Td=0;class Fd extends He{constructor(){super(...arguments),this.attrId=++Td,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 te`
       <div data-testid="inner-tab" tabindex=${this.disabled?"-1":"0"} class="tab">
         <slot name="icon"></slot>
         <slot></slot>
       </div>
-    `}}Fd.styles=[Ld],t([Be(".tab")],Fd.prototype,"tab",void 0),t([De({reflect:!0})],Fd.prototype,"panel",void 0),t([De({type:Boolean,reflect:!0})],Fd.prototype,"active",void 0),t([De({type:Boolean,reflect:!0})],Fd.prototype,"disabled",void 0),t([ot("active")],Fd.prototype,"handleActiveChange",null),t([ot("disabled")],Fd.prototype,"handleDisabledChange",null);var Pd=r`.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 Hd extends He{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 te`
+    `}}Fd.styles=[Ld],t([Be(".tab")],Fd.prototype,"tab",void 0),t([De({reflect:!0})],Fd.prototype,"panel",void 0),t([De({type:Boolean,reflect:!0})],Fd.prototype,"active",void 0),t([De({type:Boolean,reflect:!0})],Fd.prototype,"disabled",void 0),t([ot("active")],Fd.prototype,"handleActiveChange",null),t([ot("disabled")],Fd.prototype,"handleDisabledChange",null);var Pd=r`.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 Hd extends He{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 te`
       <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>
@@ -4112,7 +4115,7 @@ const Ul="important",ql=" !"+Ul;const Yl=je(class extends We{constructor(e){if(s
           </slot>
         </div>
       </${e}>
-    `}}ic.styles=[...ga.styles,sc],t([Fe({slot:"upper",flatten:!0})],ic.prototype,"_upperNode",void 0),t([De({type:Boolean,reflect:!0})],ic.prototype,"noPadding",void 0);var ac=r`: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 oc extends He{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,at(this,"sgds-after-show")}async hideToast(){if(this.show)return this.show=!1,at(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=st(this,"toast.show");this.noAnimation||await Ge(this.toast,e.keyframes,e.options),this.emit("sgds-after-show")}else{this.emit("sgds-hide");const e=st(this,"toast.hide");this.noAnimation||await Ge(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),te`
+    `}}ic.styles=[...ga.styles,sc],t([Fe({slot:"upper",flatten:!0})],ic.prototype,"_upperNode",void 0),t([De({type:Boolean,reflect:!0})],ic.prototype,"noPadding",void 0);var ac=r`: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 oc extends He{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,at(this,"sgds-after-show")}async hideToast(){if(this.show)return this.show=!1,at(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=st(this,"toast.show");this.noAnimation||await Ge(this.toast,e.keyframes,e.options),this.emit("sgds-after-show")}else{this.emit("sgds-hide");const e=st(this,"toast.hide");this.noAnimation||await Ge(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),te`
       <div
         class="toast"
         role="alert"