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

package/custom-elements.json

@@ -116,16 +116,24 @@
           "description": "",
           "name": "SgdsAccordionItem",
           "slots": [
+            {
+              "description": "An icon placed before the header text, typically used to provide visual context for the accordion item.",
+              "name": "icon"
+            },
             {
               "description": "The accordion-item button header slot.",
               "name": "header"
             },
+            {
+              "description": "A badge placed after the header text, aligned to the right via auto left margin.",
+              "name": "badge"
+            },
             {
               "description": "The accordion-item content slot.",
               "name": "content"
             },
             {
-              "description": "The caret icon of accordion-item.",
+              "description": "The caret icon of accordion-item. Defaults to a chevron-down icon.",
               "name": "caret"
             }
           ],
@@ -380,7 +388,7 @@
               "kind": "field",
               "name": "density",
               "type": {
-                "text": "\"default\" | \"compact\""
+                "text": "\"default\" | \"compact\" | \"spacious\""
               },
               "default": "\"default\"",
               "description": "The density of accordion",
@@ -14716,6 +14724,17 @@
               "attribute": "required",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focuses the selected radio input in the group when it becomes checked.",
+              "attribute": "autofocus",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "_handleValueChange",
@@ -15078,6 +15097,15 @@
               "description": "Makes the input as a required field.",
               "fieldName": "required"
             },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focuses the selected radio input in the group when it becomes checked.",
+              "fieldName": "autofocus"
+            },
             {
               "name": "label",
               "type": {
@@ -15246,6 +15274,16 @@
               "attribute": "invalid",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focuses the radio input when it becomes checked.",
+              "attribute": "autofocus"
+            },
             {
               "kind": "field",
               "name": "input",
@@ -15404,6 +15442,15 @@
               "default": "false",
               "description": "Marks the radio input as invalid. Replace the pseudo :invalid selector for absent in custom elements",
               "fieldName": "invalid"
+            },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focuses the radio input when it becomes checked.",
+              "fieldName": "autofocus"
             }
           ],
           "superclass": {
@@ -26259,7 +26306,7 @@
   "package": {
     "name": "@govtechsg/sgds-web-component",
     "description": "",
-    "version": "3.16.1-rc.3",
+    "version": "3.17.0",
     "author": "GovTechSG",
     "license": "MIT"
   }

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>
@@ -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>
@@ -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"