@govtechsg/sgds-web-component 3.12.0 → 3.13.0

package/css/fouc.css

@@ -5,8 +5,8 @@ sgds-alert:not(:defined),
 sgds-badge:not(:defined),
 sgds-breadcrumb-item:not(:defined),
 sgds-breadcrumb:not(:defined),
-sgds-button:not(:defined),
 sgds-card:not(:defined),
+sgds-button:not(:defined),
 sgds-checkbox-group:not(:defined),
 sgds-checkbox:not(:defined),
 sgds-close-button:not(:defined),

package/css/utility.css

@@ -309,12 +309,25 @@
   --leading-16: var(--sgds-line-height-16);
   --leading-20: var(--sgds-line-height-20);
   --leading-24: var(--sgds-line-height-24);
+  --leading-28: var(--sgds-line-height-28);
   --leading-32: var(--sgds-line-height-32);
   --leading-36: var(--sgds-line-height-36);
   --leading-40: var(--sgds-line-height-40);
+  --leading-44: var(--sgds-line-height-44);
   --leading-48: var(--sgds-line-height-48);
+  --leading-52: var(--sgds-line-height-52);
   --leading-56: var(--sgds-line-height-56);
+  --leading-60: var(--sgds-line-height-60);
   --leading-64: var(--sgds-line-height-64);
+  --leading-3-xs: var(--sgds-line-height-3-xs);
+  --leading-2-xs: var(--sgds-line-height-2-xs);
+  --leading-xs: var(--sgds-line-height-xs);
+  --leading-sm: var(--sgds-line-height-sm);
+  --leading-md: var(--sgds-line-height-md);
+  --leading-lg: var(--sgds-line-height-lg);
+  --leading-xl: var(--sgds-line-height-xl);
+  --leading-2-xl: var(--sgds-line-height-2-xl);
+  --leading-3-xl: var(--sgds-line-height-3-xl);
 
   /* Opacity */
   --opacity-0: var(--sgds-opacity-0);
@@ -357,6 +370,7 @@
   --radius-lg: var(--sgds-border-radius-lg);
   --radius-xl: var(--sgds-border-radius-xl);
   --radius-2-xl: var(--sgds-border-radius-2-xl);
+  --radius-3-xl: var(--sgds-border-radius-3-xl);
   --radius-full: var(--sgds-border-radius-full);
 
   /* Form Border Radius */

package/index.umd.min.js

@@ -2968,7 +2968,7 @@ const Fa=(e,t,s)=>{const i=new Map;for(let a=t;a<=s;a++)i.set(e[a],a);return i};
           </span>
         </div>
       </div>
-    `}}Gr.styles=[...Pe.styles,Wr],e([Ve({type:Boolean,reflect:!0})],Gr.prototype,"stacked",void 0),e([Ve({type:Boolean,reflect:!0})],Gr.prototype,"bordered",void 0),rt("sgds-description-list",Gr),rt("sgds-description-list-group",jr);var Xr=n`:host{--container-size:8px}:host([orientation=horizontal]){border-top:var(--border-width) solid var(--sgds-border-color-muted);display:block;margin:calc((var(--container-size) - var(--border-width))/2) 0;width:100%}:host([orientation=vertical]){border-left:var(--border-width) solid var(--sgds-border-color-muted);display:inline-block;height:100%;margin:0 calc((var(--container-size) - var(--border-width))/2)}:host([thickness=thin]){--border-width:var(--sgds-border-width-1)}:host([thickness=thick]){--border-width:var(--sgds-border-width-2)}:host([thickness=thicker]){--border-width:var(--sgds-border-width-4)}`;class Qr extends Pe{constructor(){super(...arguments),this.orientation="horizontal",this.thickness="thin"}connectedCallback(){super.connectedCallback(),this.setAttribute("role","separator"),this.setAttribute("aria-orientation",this.orientation)}}Qr.styles=[Xr],e([Ve({type:String,reflect:!0})],Qr.prototype,"orientation",void 0),e([Ve({type:String,reflect:!0})],Qr.prototype,"thickness",void 0),rt("sgds-divider",Qr);const Jr=new Set;function el(e){Jr.add(e),document.body.style.overflow="hidden"}function tl(e){Jr.delete(e),0===Jr.size&&(document.body.style.overflow="")}var sl=n`:host{display:contents}:host([size=md]) .drawer-end .drawer-panel,:host([size=md]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-768)}:host([size=md]) .drawer-bottom .drawer-panel,:host([size=md]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-768)}:host([size=lg]) .drawer-end .drawer-panel,:host([size=lg]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-1024)}:host([size=lg]) .drawer-bottom .drawer-panel,:host([size=lg]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-1024)}.drawer{height:100%;inset-inline-start:0;overflow:hidden;pointer-events:none;top:0;width:100%}.drawer-fixed{position:fixed;z-index:1100}.drawer-panel{background-color:var(--sgds-surface-default);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);overflow:auto;padding:var(--sgds-padding-lg);pointer-events:all;position:absolute;z-index:2}.drawer-panel:focus{outline:none}.drawer-top .drawer-panel{bottom:auto;height:80%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:0;width:100%}.drawer-end .drawer-panel{bottom:auto;height:100%;inset-inline-end:0;inset-inline-start:auto;max-width:var(--sgds-dimension-512);top:0;width:80%}.drawer-bottom .drawer-panel{bottom:0;height:80%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:auto;width:100%}.drawer-start .drawer-panel{bottom:auto;height:100%;inset-inline-end:auto;inset-inline-start:0;max-width:var(--sgds-dimension-512);top:0;width:80%}.drawer-header{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}slot[name=title]::slotted(*){color:var(--sgds-color-default)!important;font-size:var(--sgds-font-size-24)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);margin-bottom:var(--sgds-margin-none)!important}slot[name=footer]::slotted(*){box-shadow:0 -2px 2px 0 hsla(0,0%,5%,.08);margin:var(--sgds-margin-none) calc(var(--sgds-margin-xs)*-1);padding:var(--sgds-padding-lg) var(--sgds-padding-lg) var(--sgds-padding-none)}sgds-close-button{position:absolute;right:8px;top:8px}.drawer-body{-webkit-overflow-scrolling:touch;display:block;flex:1 1 auto;overflow:auto}.drawer-overlay{background-color:var(--sgds-bg-overlay);bottom:0;display:block;left:0;pointer-events:all;position:fixed;right:0;top:0}.drawer-contained .drawer-overlay{display:none}.drawer-contained{height:unset;width:unset}@media screen and (min-width:512px){.drawer-panel{padding:var(--sgds-padding-2-xl)}slot[name=footer]::slotted(*){margin:var(--sgds-margin-none) calc(var(--sgds-margin-md)*-1);padding:var(--sgds-padding-2-xl) var(--sgds-padding-2-xl) var(--sgds-padding-none)}}`;class il extends Pe{constructor(){super(...arguments),this.open=!1,this.size="sm",this.placement="end",this.contained=!1,this.handleDocumentKeyDown=e=>{this.open&&!this.contained&&"Escape"===e.key&&(e.stopPropagation(),this.requestClose("keyboard"))}}firstUpdated(e){super.firstUpdated(e),this.open&&(this.addOpenListeners(),this.contained||el(this))}disconnectedCallback(){super.disconnectedCallback(),tl(this)}uppercaseFirstLetter(e){return e.charAt(0).toUpperCase()+e.slice(1)}requestClose(e){if(this.emit("sgds-request-close",{cancelable:!0,detail:{source:e}}).defaultPrevented){const e=tt(this,"drawer.denyClose");return void Ke(this.panel,e.keyframes,e.options)}this.hide()}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}async handleOpenChange(){if(this.open){this.emit("sgds-show"),this.addOpenListeners(),this.originalTrigger=document.activeElement,this.contained||el(this);const e=this.querySelector("[autofocus]");e&&e.removeAttribute("autofocus"),await Promise.all([Qe(this.drawer),Qe(this.overlay)]),this.drawer.hidden=!1,requestAnimationFrame(()=>{this.emit("sgds-initial-focus",{cancelable:!0}).defaultPrevented||(e?e.focus({preventScroll:!0}):this.panel.focus({preventScroll:!0})),e&&e.setAttribute("autofocus","")});const t=tt(this,`drawer.show${this.uppercaseFirstLetter(this.placement)}`),s=tt(this,"drawer.overlay.show");await Promise.all([Ke(this.panel,t.keyframes,t.options),Ke(this.overlay,s.keyframes,s.options)]),this.emit("sgds-after-show")}else{this.emit("sgds-hide"),this.removeOpenListeners(),this.contained||tl(this),await Promise.all([Qe(this.drawer),Qe(this.overlay)]);const e=tt(this,`drawer.hide${this.uppercaseFirstLetter(this.placement)}`),t=tt(this,"drawer.overlay.hide");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.drawer.hidden=!0,this.overlay.hidden=!1,this.panel.hidden=!1;const s=this.originalTrigger;"function"==typeof(null==s?void 0:s.focus)&&setTimeout(()=>s.focus()),this.emit("sgds-after-hide")}}handleNoModalChange(){this.open&&!this.contained&&el(this),this.open&&this.contained&&tl(this)}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,t=!this.open&&!e;return ee`
+    `}}Gr.styles=[...Pe.styles,Wr],e([Ve({type:Boolean,reflect:!0})],Gr.prototype,"stacked",void 0),e([Ve({type:Boolean,reflect:!0})],Gr.prototype,"bordered",void 0),rt("sgds-description-list",Gr),rt("sgds-description-list-group",jr);var Xr=n`:host{--container-size:8px}:host([orientation=horizontal]){border-top:var(--border-width) solid var(--sgds-border-color-muted);display:block;margin:calc((var(--container-size) - var(--border-width))/2) 0;width:100%}:host([orientation=vertical]){border-left:var(--border-width) solid var(--sgds-border-color-muted);display:inline-block;height:100%;margin:0 calc((var(--container-size) - var(--border-width))/2)}:host([thickness=thin]){--border-width:var(--sgds-border-width-1)}:host([thickness=thick]){--border-width:var(--sgds-border-width-2)}:host([thickness=thicker]){--border-width:var(--sgds-border-width-4)}`;class Qr extends Pe{constructor(){super(...arguments),this.orientation="horizontal",this.thickness="thin"}connectedCallback(){super.connectedCallback(),this.setAttribute("role","separator"),this.setAttribute("aria-orientation",this.orientation)}}Qr.styles=[Xr],e([Ve({type:String,reflect:!0})],Qr.prototype,"orientation",void 0),e([Ve({type:String,reflect:!0})],Qr.prototype,"thickness",void 0),rt("sgds-divider",Qr);const Jr=new Set;function el(e){Jr.add(e),document.body.style.overflow="hidden"}function tl(e){Jr.delete(e),0===Jr.size&&(document.body.style.overflow="")}var sl=n`:host{display:contents}:host([size=md]) .drawer-end .drawer-panel,:host([size=md]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-768)}:host([size=md]) .drawer-bottom .drawer-panel,:host([size=md]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-768)}:host([size=lg]) .drawer-end .drawer-panel,:host([size=lg]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-1024)}:host([size=lg]) .drawer-bottom .drawer-panel,:host([size=lg]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-1024)}.drawer{height:100%;inset-inline-start:0;overflow:hidden;pointer-events:none;top:0;width:100%}.drawer-fixed{position:fixed;z-index:1100}.drawer-panel{background-color:var(--sgds-surface-default);display:flex;flex-direction:column;overflow:auto;pointer-events:all;position:absolute;z-index:2}.drawer-panel:focus{outline:none}.drawer-top .drawer-panel{bottom:auto;height:80%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:0;width:100%}.drawer-end .drawer-panel{bottom:auto;height:100%;inset-inline-end:0;inset-inline-start:auto;max-width:var(--sgds-dimension-512);top:0;width:80%}.drawer-bottom .drawer-panel{bottom:0;height:80%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:auto;width:100%}.drawer-start .drawer-panel{bottom:auto;height:100%;inset-inline-end:auto;inset-inline-start:0;max-width:var(--sgds-dimension-512);top:0;width:80%}.drawer-close-wrapper{position:sticky;top:0}sgds-close-button.drawer-close{inset-inline-end:8px;position:absolute;top:8px}.drawer-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-lg) var(--sgds-padding-lg) var(--sgds-padding-none)}slot[name=title]::slotted(*){color:var(--sgds-color-default)!important;font-size:var(--sgds-font-size-24)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);margin-bottom:var(--sgds-margin-none)!important}slot[name=footer]::slotted(*){background-color:var(--sgds-surface-default);bottom:0;padding:var(--sgds-padding-lg);position:sticky}.drawer-body{-webkit-overflow-scrolling:touch;display:block;flex:1 1 auto;overflow:hidden;padding:var(--sgds-padding-lg)}.drawer-overlay{background-color:var(--sgds-bg-overlay);display:block;inset:0;pointer-events:all;position:fixed}.drawer-contained .drawer-overlay{display:none}.drawer-contained{height:unset;width:unset}@media screen and (min-width:512px){.drawer-body{padding:var(--sgds-padding-2-xl)}.drawer-header{padding:var(--sgds-padding-2-xl) var(--sgds-padding-2-xl) var(--sgds-padding-none)}slot[name=footer]::slotted(*){padding:var(--sgds-padding-2-xl)}}`;class il extends Pe{constructor(){super(...arguments),this.open=!1,this.size="sm",this.placement="end",this.contained=!1,this.handleDocumentKeyDown=e=>{this.open&&!this.contained&&"Escape"===e.key&&(e.stopPropagation(),this.requestClose("keyboard"))}}firstUpdated(e){super.firstUpdated(e),this.open&&(this.addOpenListeners(),this.contained||el(this))}disconnectedCallback(){super.disconnectedCallback(),tl(this)}uppercaseFirstLetter(e){return e.charAt(0).toUpperCase()+e.slice(1)}requestClose(e){if(this.emit("sgds-request-close",{cancelable:!0,detail:{source:e}}).defaultPrevented){const e=tt(this,"drawer.denyClose");return void Ke(this.panel,e.keyframes,e.options)}this.hide()}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}async handleOpenChange(){if(this.open){this.emit("sgds-show"),this.addOpenListeners(),this.originalTrigger=document.activeElement,this.contained||el(this);const e=this.querySelector("[autofocus]");e&&e.removeAttribute("autofocus"),await Promise.all([Qe(this.drawer),Qe(this.overlay)]),this.drawer.hidden=!1,requestAnimationFrame(()=>{this.emit("sgds-initial-focus",{cancelable:!0}).defaultPrevented||(e?e.focus({preventScroll:!0}):this.panel.focus({preventScroll:!0})),e&&e.setAttribute("autofocus","")});const t=tt(this,`drawer.show${this.uppercaseFirstLetter(this.placement)}`),s=tt(this,"drawer.overlay.show");await Promise.all([Ke(this.panel,t.keyframes,t.options),Ke(this.overlay,s.keyframes,s.options)]),this.emit("sgds-after-show")}else{this.emit("sgds-hide"),this.removeOpenListeners(),this.contained||tl(this),await Promise.all([Qe(this.drawer),Qe(this.overlay)]);const e=tt(this,`drawer.hide${this.uppercaseFirstLetter(this.placement)}`),t=tt(this,"drawer.overlay.hide");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.drawer.hidden=!0,this.overlay.hidden=!1,this.panel.hidden=!1;const s=this.originalTrigger;"function"==typeof(null==s?void 0:s.focus)&&setTimeout(()=>s.focus()),this.emit("sgds-after-hide")}}handleNoModalChange(){this.open&&!this.contained&&el(this),this.open&&this.contained&&tl(this)}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,t=!this.open&&!e;return ee`
       <div
         class=${We({drawer:!0,"drawer-top":"top"===this.placement,"drawer-end":"end"===this.placement,"drawer-bottom":"bottom"===this.placement,"drawer-start":"start"===this.placement,"drawer-contained":this.contained,"drawer-fixed":!this.contained})}
         ?hidden=${t}
@@ -2982,17 +2982,23 @@ const Fa=(e,t,s)=>{const i=new Map;for(let a=t;a<=s;a++)i.set(e[a],a);return i};
           aria-hidden=${this.open?"false":"true"}
           tabindex="0"
         >
-          <header class="drawer-header">
-            <slot name="title"></slot>
-            <slot name="description"></slot>
+          <div class="drawer-close-wrapper">
             <sgds-close-button
               class="drawer-close"
               aria-label="close drawer"
               @click="${()=>this.requestClose("close-button")}"
             ></sgds-close-button>
-          </header>
-          <slot class="drawer-body"></slot>
-          <slot name="footer"></slot>
+          </div>
+          <div class="drawer-header_and_body">
+            <div class="drawer-header">
+              <slot name="title"></slot>
+              <slot name="description"></slot>
+            </div>
+          </div>
+          <div>
+            <slot class="drawer-body"></slot>
+            <slot name="footer"></slot>
+          </div>
         </div>
       </div>
     `}}il.styles=[...Pe.styles,sl],il.dependencies={"sgds-close-button":mt},e([Ie(".drawer")],il.prototype,"drawer",void 0),e([Ie(".drawer-panel")],il.prototype,"panel",void 0),e([Ie(".drawer-overlay")],il.prototype,"overlay",void 0),e([Ve({type:Boolean,reflect:!0})],il.prototype,"open",void 0),e([Ve({type:String,reflect:!0})],il.prototype,"size",void 0),e([Ve({type:String,reflect:!0})],il.prototype,"placement",void 0),e([Ve({type:Boolean,reflect:!0})],il.prototype,"contained",void 0),e([at("open",{waitUntilFirstUpdate:!0})],il.prototype,"handleOpenChange",null),e([at("contained",{waitUntilFirstUpdate:!0})],il.prototype,"handleNoModalChange",null),st("drawer.showTop",{keyframes:[{opacity:0,translate:"0 -100%"},{opacity:1,translate:"0 0"}],options:{duration:250,easing:"ease"}}),st("drawer.hideTop",{keyframes:[{opacity:1,translate:"0 0"},{opacity:0,translate:"0 -100%"}],options:{duration:250,easing:"ease"}}),st("drawer.showEnd",{keyframes:[{opacity:0,translate:"100%"},{opacity:1,translate:"0"}],rtlKeyframes:[{opacity:0,translate:"-100%"},{opacity:1,translate:"0"}],options:{duration:250,easing:"ease"}}),st("drawer.hideEnd",{keyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"100%"}],rtlKeyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"-100%"}],options:{duration:250,easing:"ease"}}),st("drawer.showBottom",{keyframes:[{opacity:0,translate:"0 100%"},{opacity:1,translate:"0 0"}],options:{duration:250,easing:"ease"}}),st("drawer.hideBottom",{keyframes:[{opacity:1,translate:"0 0"},{opacity:0,translate:"0 100%"}],options:{duration:250,easing:"ease"}}),st("drawer.showStart",{keyframes:[{opacity:0,translate:"-100%"},{opacity:1,translate:"0"}],rtlKeyframes:[{opacity:0,translate:"100%"},{opacity:1,translate:"0"}],options:{duration:250,easing:"ease"}}),st("drawer.hideStart",{keyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"-100%"}],rtlKeyframes:[{opacity:1,translate:"0"},{opacity:0,translate:"100%"}],options:{duration:250,easing:"ease"}}),st("drawer.denyClose",{keyframes:[{scale:1},{scale:1.01},{scale:1}],options:{duration:250}}),st("drawer.overlay.show",{keyframes:[{opacity:0},{opacity:1}],options:{duration:250}}),st("drawer.overlay.hide",{keyframes:[{opacity:1},{opacity:0}],options:{duration:250}}),rt("sgds-drawer",il),rt("sgds-dropdown",ji),rt("sgds-dropdown-item",Ki);var al=n`.file-upload{display:flex;flex-direction:column;gap:var(--sgds-form-gap-2-xl)}.file-upload-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.file-upload-list{display:flex;flex-direction:column;gap:var(--sgds-form-gap-xl);list-style-type:none}.file-upload-list-item{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-muted);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-lg);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x)}.file-upload-list-item span:not(:first-of-type){cursor:pointer}ul{margin:0;padding:0}input{display:none}label,sgds-button{cursor:pointer}sgds-close-button{margin-left:auto}sgds-icon.valid{color:var(--sgds-form-success-color-default)}sgds-icon.invalid{color:var(--sgds-color-muted)}`;class ol extends(_a(Ea)){constructor(){super(...arguments),this.multiple=!1,this.accept="",this.hasFeedback=!1,this.required=!1,this.selectedFiles=[],this.inputRef=as()}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}get files(){return this.selectedFiles}_setFileList(e){this.emit("sgds-files-selected",{detail:e})}_handleClick(e){if(e.preventDefault(),!this.disabled){this.inputRef.value.click()}}_handleChange(e){const t=e.target.files;t.length>0&&(this.selectedFiles=Array.from(t)),this._setFileList(t),this.requestUpdate(),super._mixinHandleChange(e)}_removeFileHandler(e){const t=this.inputRef.value,s=t.files,i=new DataTransfer;for(let t=0;t<s.length;t++)e!==t&&i.items.add(s[t]);t.files=i.files,this._setFileList(i.files),this.selectedFiles=Array.from(i.files),this.requestUpdate(),this._mixinValidate(this.input)}_clearAllFiles(){const e=this.inputRef.value,t=new DataTransfer;e.files=t.files,this._setFileList(t.files),this.selectedFiles=Array.from(t.files)}_mixinResetFormControl(){this._clearAllFiles(),this._mixinResetValidity(this.input)}_handleDisabledChange(){this.setInvalid(!1)}_renderLabel(){const e=ee`
@@ -3200,7 +3206,7 @@ class pl{constructor(e,t,s,i){if(this.subscribe=!1,this.provided=!1,this.value=v
       </a>
       <slot @slotchange=${this._handleDesktopSlotChange}></slot>
     </sgds-dropdown>`;return this._breakpointReached?e:t}}$l.styles=[...Pe.styles,Yi,qi,Ml],$l.dependencies={"sgds-dropdown":ji,"sgds-dropdown-item":Ki,"sgds-icon":Bt},e([bl({context:yl,subscribe:!0}),De()],$l.prototype,"_breakpointReached",void 0),e([bl({context:xl,subscribe:!0}),De()],$l.prototype,"expanded",void 0),e([Ie(".nav-link")],$l.prototype,"navLink",void 0),e([Ie(".dropdown-items")],$l.prototype,"dropdownItems",void 0),e([Ie(".dropdown-items a")],$l.prototype,"menuHeaderButton",void 0),e([Ie(".dropdown-items span")],$l.prototype,"menuHeaderText",void 0),e([Ve({type:Boolean})],$l.prototype,"active",void 0),e([Ve({type:Boolean,reflect:!0})],$l.prototype,"disabled",void 0),e([Le({slot:"toggler"})],$l.prototype,"togglerNodes",void 0),e([Le()],$l.prototype,"defaultNodes",void 0);var Al=n`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;height:auto!important;min-height:100%;padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none!important;text-decoration:none}@media screen and (max-width:767px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default));outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;class Vl extends Pe{constructor(){super(...arguments),this.active=!1,this.disabled=!1}_handleDisabled(){this.setAttribute("aria-disabled",`${this.disabled}`)}_handleSlotChange(e){const t=e.target,s=t.assignedElements({flatten:!0}).filter(e=>"a"===e.tagName.toLowerCase()||"sgds-link"===e.tagName.toLowerCase());if(s.length>1)console.error("More than one anchor tag is added to sgds-mainnav-item");else{if(0===s.length){t.assignedNodes({flatten:!0}).forEach(e=>{if(e.nodeType===Node.TEXT_NODE){const t=document.createElement("a");t.textContent=e.textContent,e.parentNode.replaceChild(t,e)}})}if(1===s.length){const e=s[0];if(this.active&&e.setAttribute("aria-current","true"),this.disabled)return e.setAttribute("href","javascript:void(0)"),void e.setAttribute("tabindex","-1");e.addEventListener("click",e=>{e.target.closest("sgds-mainnav").hide()})}}}render(){return ee`<slot @slotchange=${this._handleSlotChange}></slot>`}}Vl.styles=[...Pe.styles,Al],e([Ve({type:Boolean,reflect:!0})],Vl.prototype,"active",void 0),e([Ve({type:Boolean,reflect:!0})],Vl.prototype,"disabled",void 0),e([at("disabled")],Vl.prototype,"_handleDisabled",null),rt("sgds-mainnav",Cl),rt("sgds-mainnav-dropdown",$l),rt("sgds-mainnav-item",Vl);var Dl=n`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc;text-decoration:none!important}a[target=_blank]:after{height:var(--sgds-icon-size-sm)!important;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.516 2.933h.017a.4.4 0 1 1 0 .8c-.566 0-.967 0-1.28.026-.31.025-.498.073-.646.149a1.6 1.6 0 0 0-.7.699c-.075.148-.123.336-.148.645-.025.314-.026.714-.026 1.281v2.933c0 .567 0 .968.026 1.282.026.308.073.497.149.645a1.6 1.6 0 0 0 .699.699c.148.075.337.123.645.149.314.025.715.025 1.281.025h2.934c.566 0 .967 0 1.28-.025.31-.026.498-.073.646-.149a1.6 1.6 0 0 0 .7-.7c.075-.147.123-.336.148-.644.025-.314.026-.715.026-1.282a.4.4 0 0 1 .8 0v.018c0 .545 0 .979-.029 1.329-.03.358-.09.663-.233.943a2.4 2.4 0 0 1-1.049 1.049c-.28.142-.585.204-.943.233-.35.028-.784.028-1.329.028H6.516c-.545 0-.979 0-1.329-.028-.358-.03-.664-.09-.943-.233a2.4 2.4 0 0 1-1.05-1.049c-.142-.28-.203-.585-.232-.943-.029-.35-.029-.784-.029-1.33V6.517c0-.546 0-.98.029-1.33.03-.357.09-.663.233-.942a2.4 2.4 0 0 1 1.049-1.05c.28-.142.585-.203.943-.232.35-.029.784-.029 1.329-.029Zm1.75.4c0-.22.18-.4.4-.4h4c.222 0 .4.18.4.4v4a.4.4 0 0 1-.8 0V4.3L8.284 8.283a.4.4 0 0 1-.566-.566l3.984-3.984H8.667a.4.4 0 0 1-.4-.4Z' fill='%230269D0'/%3E%3C/svg%3E")!important;width:var(--sgds-icon-size-sm)!important}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#f7f7f7,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:.25rem var(--sgds-mainnav-padding-x,2rem);width:100%}:host([fluid]) .container{max-width:none}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(#f7f7f7,#1a1a1a)}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}.sgds-masthead-button:focus-visible,a.trusted-websites-link:focus-visible{outline:4px solid #60aaf4}@media screen and (max-width:767px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x,1.25rem)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`,El=n`svg{vertical-align:middle}`;class Zl extends Pe{constructor(){super(...arguments),this.fluid=!1,this.toggleVisibility=!1}_handleKeydown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this._toggleVisibility())}_toggleVisibility(){this.toggleVisibility=!this.toggleVisibility}render(){return ee`
-      <div id="sgds-masthead" class="sgds-masthead" aria-label="A Singapore Government Agency Website" role="banner">
+      <div id="sgds-masthead" class="sgds-masthead">
         <div class="banner">
           <div class="container">
             <div class="masthead-layout">