@govtechsg/sgds-web-component 3.19.0 → 3.19.1

package/custom-elements.json

@@ -21950,7 +21950,8 @@
               },
               "default": "\"horizontal\"",
               "description": "Defines the placement of headers in the table.\nUse \"horizontal\" for top headers only, \"vertical\" for left headers only,\nor \"both\" for both row and column headers.",
-              "attribute": "headerPosition"
+              "attribute": "headerPosition",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -21960,7 +21961,8 @@
               },
               "default": "false",
               "description": "Enables background styling on horizontal header rows.\nWhen true, applies background color to header cells for better visual distinction.",
-              "attribute": "headerBackground"
+              "attribute": "headerBackground",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -21970,7 +21972,8 @@
               },
               "default": "false",
               "description": "Enables borders around table cells.\nWhen true, displays visible borders between all table cells.",
-              "attribute": "tableBorder"
+              "attribute": "tableBorder",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -21980,7 +21983,8 @@
               },
               "default": "\"auto\"",
               "description": "Controls the CSS `table-layout` algorithm.\nUse \"auto\" to let the browser size columns based on content, or \"fixed\" to distribute column widths evenly regardless of content.",
-              "attribute": "layout"
+              "attribute": "layout",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -26948,7 +26952,7 @@
   "package": {
     "name": "@govtechsg/sgds-web-component",
     "description": "",
-    "version": "3.19.0",
+    "version": "3.19.1",
     "author": "GovTechSG",
     "license": "MIT"
   }

package/index.umd.min.js

@@ -2322,7 +2322,7 @@ const dt=Symbol.for(""),ct=e=>{if(e?.r===dt)return e?._$litStatic$},ht=(e,...t)=
       clip-rule="evenodd"
     />
   </svg>
-`};var Zt=n`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=xs]) svg{height:var(--sgds-icon-size-xs);width:var(--sgds-icon-size-xs)}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;class Bt extends Pe{constructor(){super(...arguments),this.size="lg"}_getIconByName(e){if(!e)return;const t=It[e];if(t)return t;console.warn(`Icon not found: ${e}`)}render(){const e=this._getIconByName(this.name);return e||ie}}Bt.styles=[...Pe.styles,Zt],e([Ve({type:String,reflect:!0})],Bt.prototype,"name",void 0),e([Ve({type:String,reflect:!0})],Bt.prototype,"size",void 0);var Lt=n`:host([variant=success]) .alert{background-color:var(--sgds-success-surface-default)}:host([variant=warning]) .alert{--sgds-alert-color:var(--sgds-warning-fixed-dark);background-color:var(--sgds-warning-surface-default)}:host([variant=danger]) .alert{background-color:var(--sgds-danger-surface-default)}:host([variant=neutral]) .alert{background-color:var(--sgds-neutral-surface-emphasis)}:host([variant=success][outlined]) .alert{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted)}:host([variant=warning][outlined]) .alert{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted)}:host([variant=danger][outlined]) .alert{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted)}:host([variant=neutral][outlined]) .alert{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted)}:host([outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-primary-color-fixed-dark)}:host([variant=success][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-success-color-fixed-dark)}:host([variant=warning][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-warning-color-fixed-light)}:host([variant=danger][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-danger-color-fixed-dark)}:host([variant=neutral][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-color-fixed-dark)}.alert{--sgds-alert-color:var(--sgds-color-fixed-light);background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);color:var(--sgds-alert-color);display:flex;flex-direction:row;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-lg);position:relative}.alert.outlined{--sgds-alert-color:var(--sgds-color-fixed-dark);background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted)}.alert-content{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-md);padding-right:var(--sgds-padding-2-xl)}.alert-content__upper{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.alert-title{font-size:var(--sgds-font-size-subtitle-sm);font-style:normal;font-weight:var(--sgds-font-weight-semibold);line-height:var(--sgds-line-height-2-xs)}.alert-content__description::slotted(*){font-size:var(--sgds-font-size-body-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.alert sgds-close-button{position:absolute;right:14px;top:14px}`;class Tt extends Pe{constructor(){super(...arguments),this.show=!1,this.dismissible=!1,this.variant="info",this.outlined=!1,this.title=""}close(){this.show=!1}_handleShowChange(){this.show?this.emit("sgds-show"):this.emit("sgds-hide")}render(){return this.dismissible&&this.show||!this.dismissible?pt`
+`};var Zt=n`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=xs]) svg{height:var(--sgds-icon-size-xs);width:var(--sgds-icon-size-xs)}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;class Bt extends Pe{constructor(){super(...arguments),this.size="lg"}_getIconByName(e){if(!e)return;const t=It[e];if(t)return t;console.warn(`Icon not found: ${e}`)}render(){const e=this._getIconByName(this.name);return e||ie}}Bt.styles=[...Pe.styles,Zt],e([Ve({type:String,reflect:!0})],Bt.prototype,"name",void 0),e([Ve({type:String,reflect:!0})],Bt.prototype,"size",void 0);var Lt=n`:host([variant=success]) .alert{background-color:var(--sgds-success-surface-default)}:host([variant=warning]) .alert{--sgds-alert-color:var(--sgds-color-fixed-dark);background-color:var(--sgds-warning-surface-default)}:host([variant=danger]) .alert{background-color:var(--sgds-danger-surface-default)}:host([variant=neutral]) .alert{background-color:var(--sgds-neutral-surface-emphasis)}:host([variant=success][outlined]) .alert{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted)}:host([variant=warning][outlined]) .alert{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted)}:host([variant=danger][outlined]) .alert{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted)}:host([variant=neutral][outlined]) .alert{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted)}:host([outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-primary-color-fixed-dark)}:host([variant=success][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-success-color-fixed-dark)}:host([variant=warning][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-warning-color-fixed-light)}:host([variant=danger][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-danger-color-fixed-dark)}:host([variant=neutral][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-color-fixed-dark)}.alert{--sgds-alert-color:var(--sgds-color-fixed-light);background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);color:var(--sgds-alert-color);display:flex;flex-direction:row;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-lg);position:relative}.alert.outlined{--sgds-alert-color:var(--sgds-color-fixed-dark);background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted)}.alert-content{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-md);padding-right:var(--sgds-padding-2-xl)}.alert-content__upper{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.alert-title{font-size:var(--sgds-font-size-subtitle-sm);font-style:normal;font-weight:var(--sgds-font-weight-semibold);line-height:var(--sgds-line-height-2-xs)}.alert-content__description::slotted(*){font-size:var(--sgds-font-size-body-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.alert sgds-close-button{position:absolute;right:14px;top:14px}`;class Tt extends Pe{constructor(){super(...arguments),this.show=!1,this.dismissible=!1,this.variant="info",this.outlined=!1,this.title=""}close(){this.show=!1}_handleShowChange(){this.show?this.emit("sgds-show"):this.emit("sgds-hide")}render(){return this.dismissible&&this.show||!this.dismissible?pt`
           <div
             class="${We({alert:!0,show:this.show,"alert-dismissible":this.dismissible,outlined:this.outlined})}"
             role="alert"
@@ -3381,7 +3381,7 @@ class gl{constructor(e,t,s,i){if(this.subscribe=!1,this.provided=!1,this.value=v
           </div>
         </div>
       </div>
-    `}}function Ll(e){const t=e.tagName.toLowerCase();return"-1"!==e.getAttribute("tabindex")&&(!e.hasAttribute("disabled")&&((!e.hasAttribute("aria-disabled")||"false"===e.getAttribute("aria-disabled"))&&(!("input"===t&&"radio"===e.getAttribute("type")&&!e.hasAttribute("checked"))&&(null!==e.offsetParent&&("hidden"!==window.getComputedStyle(e).visibility&&(!("audio"!==t&&"video"!==t||!e.hasAttribute("controls"))||(!!e.hasAttribute("tabindex")||(!(!e.hasAttribute("contenteditable")||"false"===e.getAttribute("contenteditable"))||["button","input","select","textarea","a","audio","video","summary"].includes(t)))))))))}Bl.styles=[...Pe.styles,Zl,Ht,Il],e([Ve({type:Boolean,reflect:!0})],Bl.prototype,"fluid",void 0),e([De()],Bl.prototype,"toggleVisibility",void 0),rt("sgds-masthead",Bl);let Tl=[];class Fl{constructor(e){this.tabDirection="forward",this.element=e,this.handleFocusIn=this.handleFocusIn.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleKeyUp=this.handleKeyUp.bind(this)}activate(){Tl.push(this.element),document.addEventListener("focusin",this.handleFocusIn),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keyup",this.handleKeyUp)}deactivate(){Tl=Tl.filter(e=>e!==this.element),document.removeEventListener("focusin",this.handleFocusIn),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("keyup",this.handleKeyUp)}isActive(){return Tl[Tl.length-1]===this.element}checkFocus(){if(this.isActive()&&!this.element.matches(":focus-within")){const{start:e,end:t}=function(e){var t,s;const i=[];return function e(t){t instanceof HTMLElement&&(i.push(t),null!==t.shadowRoot&&"open"===t.shadowRoot.mode&&e(t.shadowRoot)),[...t.children].forEach(t=>e(t))}(e),{start:null!==(t=i.find(e=>Ll(e)))&&void 0!==t?t:null,end:null!==(s=i.reverse().find(e=>Ll(e)))&&void 0!==s?s:null}}(this.element),s="forward"===this.tabDirection?e:t;"function"==typeof(null==s?void 0:s.focus)&&s.focus({preventScroll:!0})}}handleFocusIn(){this.checkFocus()}handleKeyDown(e){"Tab"===e.key&&e.shiftKey&&(this.tabDirection="backward",requestAnimationFrame(()=>this.checkFocus()))}handleKeyUp(){this.tabDirection="forward"}}var Pl=n`:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=xl]) .modal-panel{max-width:var(--sgds-dimension-1280)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--sgds-z-index-modal)}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:auto;max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));width:100%;z-index:2}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0;position:relative}.modal-header__close{position:absolute;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-2-xl);max-height:calc(100% - var(--sgds-margin-2-xl) - var(--sgds-margin-2-xl))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-4-xl) var(--sgds-margin-lg);max-height:calc(100% - var(--sgds-margin-4-xl) - var(--sgds-margin-4-xl));max-width:var(--sgds-dimension-888)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1168)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1312)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-24)!important;gap:1rem;line-height:var(--sgds-line-height-40)!important;margin:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-24);margin:var(--sgds-margin-none)!important}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;class Hl extends Pe{constructor(){super(...arguments),this.hasSlotController=new Hi(this,"footer"),this.open=!1,this.noAnimation=!1,this.size="md",this.hasFooterSlot=!1,this.noCloseButton=!1}connectedCallback(){super.connectedCallback(),this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.modal=new Fl(this),this._resizeHandler=this._debounce(this._onWindowResize.bind(this),200)}disconnectedCallback(){super.disconnectedCallback(),this._removeResizeListener(),tl(this)}firstUpdated(e){super.firstUpdated(e),this._onWindowResize(),this.dialog.hidden=!this.open,this.open&&(this.addOpenListeners(),this.modal.activate(),el(this))}updated(){this.hasFooterSlot||(this.hasFooterSlot=this.hasSlotController.test("footer"))}_debounce(e,t){let s;return(...i)=>{clearTimeout(s),s=window.setTimeout(()=>e(...i),t)}}_onWindowResize(){const e=this.panel.getBoundingClientRect().width,t=this.querySelectorAll("sgds-button[slot='footer']");this.panel&&(t.length<=1||(e<512||"fullscreen"===this.size&&e<xl?t.forEach(e=>{e.fullWidth=!0}):t.forEach(e=>{e.fullWidth=!1})))}_addResizeListener(){window.addEventListener("resize",this._resizeHandler)}_removeResizeListener(){window.removeEventListener("resize",this._resizeHandler)}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")}requestClose(e){if(this.emit("sgds-close",{cancelable:!0,detail:{source:e}}).defaultPrevented){const e=tt(this,"modal.denyClose");return void Ke(this.panel,e.keyframes)}this.hide()}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}handleDocumentKeyDown(e){this.open&&"Escape"===e.key&&(e.stopPropagation(),this.requestClose("keyboard"))}_overlayClickHandler(){"fullscreen"!==this.size&&this.requestClose("overlay")}async handleOpenChange(){if(this.open){this.emit("sgds-show"),this.addOpenListeners(),this.originalTrigger=document.activeElement,this.modal.activate(),el(this),await Promise.all([Qe(this.dialog),Qe(this.overlay)]),this.dialog.hidden=!1;const e=tt(this,"modal.show"),t=tt(this,"modal.overlay.show");!this.noAnimation&&await Promise.all([Ke(this.panel,e.keyframes,e.options),Ke(this.overlay,t.keyframes,t.options)]),this.emit("sgds-after-show"),this.heading.focus(),this._addResizeListener()}else{this.emit("sgds-hide"),this.removeOpenListeners(),this.modal.deactivate(),await Promise.all([Qe(this.dialog),Qe(this.overlay)]);const e=tt(this,"modal.hide"),t=tt(this,"modal.overlay.hide");!this.noAnimation&&await Promise.all([Ke(this.overlay,t.keyframes,t.options).then(()=>{this.overlay.hidden=!0}),Ke(this.panel,e.keyframes,e.options).then(()=>{this.panel.hidden=!0})]),this.dialog.hidden=!0,this.overlay.hidden=!1,this.panel.hidden=!1,tl(this);const s=this.originalTrigger;"function"==typeof(null==s?void 0:s.focus)&&setTimeout(()=>s.focus()),this.emit("sgds-after-hide"),this._removeResizeListener()}}render(){return ee`
+    `}}function Ll(e){const t=e.tagName.toLowerCase();return"-1"!==e.getAttribute("tabindex")&&(!e.hasAttribute("disabled")&&((!e.hasAttribute("aria-disabled")||"false"===e.getAttribute("aria-disabled"))&&(!("input"===t&&"radio"===e.getAttribute("type")&&!e.hasAttribute("checked"))&&(null!==e.offsetParent&&("hidden"!==window.getComputedStyle(e).visibility&&(!("audio"!==t&&"video"!==t||!e.hasAttribute("controls"))||(!!e.hasAttribute("tabindex")||(!(!e.hasAttribute("contenteditable")||"false"===e.getAttribute("contenteditable"))||["button","input","select","textarea","a","audio","video","summary"].includes(t)))))))))}Bl.styles=[...Pe.styles,Zl,Ht,Il],e([Ve({type:Boolean,reflect:!0})],Bl.prototype,"fluid",void 0),e([De()],Bl.prototype,"toggleVisibility",void 0),rt("sgds-masthead",Bl);let Tl=[];class Fl{constructor(e){this.tabDirection="forward",this.element=e,this.handleFocusIn=this.handleFocusIn.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleKeyUp=this.handleKeyUp.bind(this)}activate(){Tl.push(this.element),document.addEventListener("focusin",this.handleFocusIn),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keyup",this.handleKeyUp)}deactivate(){Tl=Tl.filter(e=>e!==this.element),document.removeEventListener("focusin",this.handleFocusIn),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("keyup",this.handleKeyUp)}isActive(){return Tl[Tl.length-1]===this.element}checkFocus(){if(this.isActive()&&!this.element.matches(":focus-within")){const{start:e,end:t}=function(e){var t,s;const i=[];return function e(t){t instanceof HTMLElement&&(i.push(t),null!==t.shadowRoot&&"open"===t.shadowRoot.mode&&e(t.shadowRoot)),[...t.children].forEach(t=>e(t))}(e),{start:null!==(t=i.find(e=>Ll(e)))&&void 0!==t?t:null,end:null!==(s=i.reverse().find(e=>Ll(e)))&&void 0!==s?s:null}}(this.element),s="forward"===this.tabDirection?e:t;"function"==typeof(null==s?void 0:s.focus)&&s.focus({preventScroll:!0})}}handleFocusIn(){this.checkFocus()}handleKeyDown(e){"Tab"===e.key&&e.shiftKey&&(this.tabDirection="backward",requestAnimationFrame(()=>this.checkFocus()))}handleKeyUp(){this.tabDirection="forward"}}var Pl=n`:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=xl]) .modal-panel{max-width:var(--sgds-dimension-1280)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl) var(--sgds-margin-lg)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--sgds-z-index-modal)}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:auto;max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));width:100%;z-index:2}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0;position:relative}.modal-header__close{position:absolute;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-2-xl);max-height:calc(100% - var(--sgds-margin-2-xl) - var(--sgds-margin-2-xl))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-4-xl) var(--sgds-margin-lg);max-height:calc(100% - var(--sgds-margin-4-xl) - var(--sgds-margin-4-xl));max-width:var(--sgds-dimension-888)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1168)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1312)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-24)!important;gap:1rem;line-height:var(--sgds-line-height-40)!important;margin:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-24);margin:var(--sgds-margin-none)!important}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;class Hl extends Pe{constructor(){super(...arguments),this.hasSlotController=new Hi(this,"footer"),this.open=!1,this.noAnimation=!1,this.size="md",this.hasFooterSlot=!1,this.noCloseButton=!1}connectedCallback(){super.connectedCallback(),this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.modal=new Fl(this),this._resizeHandler=this._debounce(this._onWindowResize.bind(this),200)}disconnectedCallback(){super.disconnectedCallback(),this._removeResizeListener(),tl(this)}firstUpdated(e){super.firstUpdated(e),this._onWindowResize(),this.dialog.hidden=!this.open,this.open&&(this.addOpenListeners(),this.modal.activate(),el(this))}updated(){this.hasFooterSlot||(this.hasFooterSlot=this.hasSlotController.test("footer"))}_debounce(e,t){let s;return(...i)=>{clearTimeout(s),s=window.setTimeout(()=>e(...i),t)}}_onWindowResize(){const e=this.panel.getBoundingClientRect().width,t=this.querySelectorAll("sgds-button[slot='footer']");this.panel&&(t.length<=1||(e<512||"fullscreen"===this.size&&e<xl?t.forEach(e=>{e.fullWidth=!0}):t.forEach(e=>{e.fullWidth=!1})))}_addResizeListener(){window.addEventListener("resize",this._resizeHandler)}_removeResizeListener(){window.removeEventListener("resize",this._resizeHandler)}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")}requestClose(e){if(this.emit("sgds-close",{cancelable:!0,detail:{source:e}}).defaultPrevented){const e=tt(this,"modal.denyClose");return void Ke(this.panel,e.keyframes)}this.hide()}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}handleDocumentKeyDown(e){this.open&&"Escape"===e.key&&(e.stopPropagation(),this.requestClose("keyboard"))}_overlayClickHandler(){"fullscreen"!==this.size&&this.requestClose("overlay")}async handleOpenChange(){if(this.open){this.emit("sgds-show"),this.addOpenListeners(),this.originalTrigger=document.activeElement,this.modal.activate(),el(this),await Promise.all([Qe(this.dialog),Qe(this.overlay)]),this.dialog.hidden=!1;const e=tt(this,"modal.show"),t=tt(this,"modal.overlay.show");!this.noAnimation&&await Promise.all([Ke(this.panel,e.keyframes,e.options),Ke(this.overlay,t.keyframes,t.options)]),this.emit("sgds-after-show"),this.heading.focus(),this._addResizeListener()}else{this.emit("sgds-hide"),this.removeOpenListeners(),this.modal.deactivate(),await Promise.all([Qe(this.dialog),Qe(this.overlay)]);const e=tt(this,"modal.hide"),t=tt(this,"modal.overlay.hide");!this.noAnimation&&await Promise.all([Ke(this.overlay,t.keyframes,t.options).then(()=>{this.overlay.hidden=!0}),Ke(this.panel,e.keyframes,e.options).then(()=>{this.panel.hidden=!0})]),this.dialog.hidden=!0,this.overlay.hidden=!1,this.panel.hidden=!1,tl(this);const s=this.originalTrigger;"function"==typeof(null==s?void 0:s.focus)&&setTimeout(()=>s.focus()),this.emit("sgds-after-hide"),this._removeResizeListener()}}render(){return ee`
       <div
         class=${We({modal:!0,show:this.open,"has-footer":this.hasFooterSlot})}
       >
@@ -3785,7 +3785,7 @@ const Ol="important",Nl=" !"+Ol;const Ul=Ye(class extends je{constructor(e){if(s
               `:ie}
         </div>
       </div>
-    `}}gd.styles=[...Pe.styles,hd],gd.dependencies={"sgds-close-button":mt,"sgds-icon":Bt,"sgds-icon-button":er},e([Ve({type:Boolean,reflect:!0})],gd.prototype,"show",void 0),e([Ve({type:Boolean,reflect:!0})],gd.prototype,"dismissible",void 0),e([bl({context:ud}),Ve({type:Boolean})],gd.prototype,"noClampAction",void 0),e([Ve({type:Boolean,reflect:!0})],gd.prototype,"fluid",void 0),e([Le({flatten:!0})],gd.prototype,"bannerItem",void 0),e([Ze(".banner")],gd.prototype,"banner",void 0),e([bl({context:pd}),De()],gd.prototype,"childCount",void 0),e([De()],gd.prototype,"_intervalId",void 0),e([De()],gd.prototype,"_currentIndex",void 0),e([at("show",{waitUntilFirstUpdate:!0})],gd.prototype,"_handleShowChange",null),st("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)"}}),st("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 vd=n`:host{display:block;font-size:var(--sgds-font-size-14,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}::slotted(:not(sgds-icon)){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;line-height:var(--sgds-line-height-20,20px)!important}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-word}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-2-xl);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:1024px){.banner-item__message_and__action{align-items:center;flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2)}}`;class md extends Pe{constructor(){super(...arguments),this.hasActionSlot=!1,this.noClampAction=!1,this.clamped=!1,this.siblingsCount=0,this.hasSlotController=new Hi(this,"action","icon","badge")}async firstUpdated(e){super.firstUpdated(e),await this.updateComplete,this._clampCheck(),this._resizeObserver=new ResizeObserver(()=>this._clampCheck()),this._resizeObserver.observe(this.shadowRoot.querySelector(".message"))}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect()}updated(){this.hasActionSlot||(this.hasActionSlot=this.hasSlotController.test("action")),this.hasSlotController.test("icon")&&this.hasSlotController.test("badge")&&console.error("Both icon and badge slot are used in the same banner item. This is not recommended as it may cause layout issues.")}_clampCheck(){const e=this.shadowRoot.querySelector(".message");requestAnimationFrame(()=>{this.clamped=e.scrollHeight>e.clientHeight})}_handleShowMoreClick(){this.emit("sgds-show-more")}render(){return ee`
+    `}}gd.styles=[...Pe.styles,hd],gd.dependencies={"sgds-close-button":mt,"sgds-icon":Bt,"sgds-icon-button":er},e([Ve({type:Boolean,reflect:!0})],gd.prototype,"show",void 0),e([Ve({type:Boolean,reflect:!0})],gd.prototype,"dismissible",void 0),e([bl({context:ud}),Ve({type:Boolean})],gd.prototype,"noClampAction",void 0),e([Ve({type:Boolean,reflect:!0})],gd.prototype,"fluid",void 0),e([Le({flatten:!0})],gd.prototype,"bannerItem",void 0),e([Ze(".banner")],gd.prototype,"banner",void 0),e([bl({context:pd}),De()],gd.prototype,"childCount",void 0),e([De()],gd.prototype,"_intervalId",void 0),e([De()],gd.prototype,"_currentIndex",void 0),e([at("show",{waitUntilFirstUpdate:!0})],gd.prototype,"_handleShowChange",null),st("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)"}}),st("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 vd=n`:host{display:block;font-size:var(--sgds-font-size-14,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}::slotted(:not(sgds-icon)){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;line-height:var(--sgds-line-height-20,20px)!important}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-word}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-2-xl);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:1024px){.banner-item__message_and__action{align-items:center;flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2)}::slotted(sgds-icon){align-self:center}}`;class md extends Pe{constructor(){super(...arguments),this.hasActionSlot=!1,this.noClampAction=!1,this.clamped=!1,this.siblingsCount=0,this.hasSlotController=new Hi(this,"action","icon","badge")}async firstUpdated(e){super.firstUpdated(e),await this.updateComplete,this._clampCheck(),this._resizeObserver=new ResizeObserver(()=>this._clampCheck()),this._resizeObserver.observe(this.shadowRoot.querySelector(".message"))}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect()}updated(){this.hasActionSlot||(this.hasActionSlot=this.hasSlotController.test("action")),this.hasSlotController.test("icon")&&this.hasSlotController.test("badge")&&console.error("Both icon and badge slot are used in the same banner item. This is not recommended as it may cause layout issues.")}_clampCheck(){const e=this.shadowRoot.querySelector(".message");requestAnimationFrame(()=>{this.clamped=e.scrollHeight>e.clientHeight})}_handleShowMoreClick(){this.emit("sgds-show-more")}render(){return ee`
       <div class="banner-item">
         <slot name="icon"></slot>
         <div class="banner-item__message_and__action">
@@ -3872,7 +3872,7 @@ const Ol="important",Nl=" !"+Ol;const Ul=Ye(class extends je{constructor(e){if(s
               </table>`}
         </div>
       </div>
-    `}}$d.styles=[...Pe.styles,Sd],e([Ve({type:String,reflect:!0})],$d.prototype,"responsive",void 0),e([Ve({type:Array})],$d.prototype,"rowHeader",void 0),e([Ve({type:Array})],$d.prototype,"columnHeader",void 0),e([Ve({type:Array})],$d.prototype,"tableData",void 0),e([Ve({type:String})],$d.prototype,"headerPosition",void 0),e([Ve({type:Boolean})],$d.prototype,"headerBackground",void 0),e([Ve({type:Boolean})],$d.prototype,"tableBorder",void 0),e([Ve({type:String})],$d.prototype,"layout",void 0),e([Ve({type:Boolean})],$d.prototype,"hasDefaultSlot",void 0),e([bl({context:Md}),De()],$d.prototype,"_headerBackground",void 0);var Ad=n`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;vertical-align:middle}:host([headerBackground]){background-color:var(--sgds-surface-raised)}.table-head{align-items:center;display:flex;font-weight:var(--sgds-font-weight-semibold);min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}`;class Vd extends Pe{constructor(){super(...arguments),this._headerBackground=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","columnheader")}_handleHeaderBackground(){this._headerBackground?this.setAttribute("headerBackground","true"):this.removeAttribute("headerBackground")}render(){return ee`<div
+    `}}$d.styles=[...Pe.styles,Sd],e([Ve({type:String,reflect:!0})],$d.prototype,"responsive",void 0),e([Ve({type:Array})],$d.prototype,"rowHeader",void 0),e([Ve({type:Array})],$d.prototype,"columnHeader",void 0),e([Ve({type:Array})],$d.prototype,"tableData",void 0),e([Ve({type:String,reflect:!0})],$d.prototype,"headerPosition",void 0),e([Ve({type:Boolean,reflect:!0})],$d.prototype,"headerBackground",void 0),e([Ve({type:Boolean,reflect:!0})],$d.prototype,"tableBorder",void 0),e([Ve({type:String,reflect:!0})],$d.prototype,"layout",void 0),e([Ve({type:Boolean})],$d.prototype,"hasDefaultSlot",void 0),e([bl({context:Md}),De()],$d.prototype,"_headerBackground",void 0);var Ad=n`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;vertical-align:middle}:host([headerBackground]){background-color:var(--sgds-surface-raised)}.table-head{align-items:center;display:flex;font-weight:var(--sgds-font-weight-semibold);min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}`;class Vd extends Pe{constructor(){super(...arguments),this._headerBackground=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","columnheader")}_handleHeaderBackground(){this._headerBackground?this.setAttribute("headerBackground","true"):this.removeAttribute("headerBackground")}render(){return ee`<div
       class=${We({"table-head":!0,"header-background":this._headerBackground})}
     >
       <slot></slot>