@govtechsg/sgds-web-component 3.30.0 → 3.30.1-rc.0

package/custom-elements.json

@@ -16361,6 +16361,16 @@
               "description": "Used only for SSR to indicate the presence of the `non-collapsible` slot.",
               "attribute": "hasNonCollapsibleSlot"
             },
+            {
+              "kind": "field",
+              "name": "hasProfileSlot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Used only for SSR to indicate the presence of the `profile` slot.",
+              "attribute": "hasProfileSlot"
+            },
             {
               "kind": "field",
               "name": "fluid",
@@ -16393,7 +16403,7 @@
               "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, \"non-collapsible\")",
+              "default": "new HasSlotController(this, \"non-collapsible\", \"profile\")",
               "type": {}
             },
             {
@@ -16895,6 +16905,15 @@
               "description": "Used only for SSR to indicate the presence of the `non-collapsible` slot.",
               "fieldName": "hasNonCollapsibleSlot"
             },
+            {
+              "name": "hasProfileSlot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Used only for SSR to indicate the presence of the `profile` slot.",
+              "fieldName": "hasProfileSlot"
+            },
             {
               "name": "fluid",
               "type": {
@@ -32017,7 +32036,7 @@
   "package": {
     "name": "@govtechsg/sgds-web-component",
     "description": "",
-    "version": "3.30.0",
+    "version": "3.30.1-rc.0",
     "author": "GovTechSG",
     "license": "MIT"
   }

package/index.umd.min.js

@@ -3304,7 +3304,7 @@ super(`context-provider`,{bubbles:!0,composed:!0}),this.context=e,this.contextTa
       aria-controls="${this.collapseId}"
       aria-expanded="${this.expanded}"
       .ariaLabel=${`Toggle navigation`}
-    ></sgds-icon-button>`}};w([x()],Y.prototype,`expanded`,void 0),w([x()],Y.prototype,`expanding`,void 0),w([S(`nav`)],Y.prototype,`nav`,void 0),w([S(`.navbar`)],Y.prototype,`navbar`,void 0),w([S(`.navbar-toggler`)],Y.prototype,`header`,void 0),w([S(`.navbar-body`)],Y.prototype,`body`,void 0),w([S(`.navbar-nav-scroll`)],Y.prototype,`navScroll`,void 0),w([S(`.navbar-end`)],Y.prototype,`navbarEnd`,void 0),w([b({type:String})],Y.prototype,`brandHref`,void 0),w([b({type:String})],Y.prototype,`expand`,void 0),w([x()],Y.prototype,`breakpointReached`,void 0),w([x()],Y.prototype,`_hasProfileComponent`,void 0),w([N(`expanding`,{waitUntilFirstUpdate:!0})],Y.prototype,`handleOpenChange`,null),j(`nav.show`,{keyframes:[{height:`0`,opacity:`0`},{height:`auto`,opacity:`1`}],options:{duration:200,easing:`ease-in-out`}}),j(`nav.hide`,{keyframes:[{height:`auto`,opacity:`1`},{height:`0`,opacity:`0`}],options:{duration:200,easing:`ease-in-out`}});let kv=yv(`mainnav-context`),Av=yv(`mainnav-expanded-context`);y();var jv=l`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);justify-content:flex-start;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:var(--sgds-mainnav-height,72px);padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand,::slotted(.navbar-brand){align-items:center;align-self:center;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-40);text-decoration:none;white-space:nowrap}.navbar-brand ::slotted(img){height:100%}.navbar-brand:focus-visible,::slotted(.navbar-brand:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown):not(sgds-mainnav-profile)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-end{align-items:center;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}slot[name=non-collapsible].slot-empty{display:none}slot[name=profile]{align-self:stretch;display:flex}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4)}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);height:inherit;margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;y();var Mv=class extends Y{constructor(...e){super(...e),this._breakpointReached=!1,this._expanded=!1,this.hasNonCollapsibleSlot=!1,this.fluid=!1,this.hasSlotController=new Eg(this,`non-collapsible`)}static{this.styles=[...Y.styles,jv]}get defaultSlotItems(){return[...this.defaultNodes||[]].filter(e=>e.tagName!==void 0)}get endSlotItems(){return[...this.endNodes||[]].filter(e=>e.tagName!==void 0)}updated(){this.hasNonCollapsibleSlot||=this.hasSlotController.test(`non-collapsible`),this._expanded=this.expanded}_onBreakpointReached(e){this._breakpointReached=e}_isBreakpointReached(){return this._breakpointReached}_handleDefaultSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{e.setAttribute(`expand`,this.expand)})}_handleSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{e.setAttribute(`name`,e.tagName.toLowerCase()),e.setAttribute(`expand`,this.expand)})}_handleProfileSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{e.setAttribute(`expand`,this.expand)})}render(){return this.breakpointReached=window.innerWidth<(this.expand===`always`?-1:this.expand===`never`?1/0:{sm:512,md:768,lg:1024,xl:1280,xxl:1440}[this.expand]),_`
+    ></sgds-icon-button>`}};w([x()],Y.prototype,`expanded`,void 0),w([x()],Y.prototype,`expanding`,void 0),w([S(`nav`)],Y.prototype,`nav`,void 0),w([S(`.navbar`)],Y.prototype,`navbar`,void 0),w([S(`.navbar-toggler`)],Y.prototype,`header`,void 0),w([S(`.navbar-body`)],Y.prototype,`body`,void 0),w([S(`.navbar-nav-scroll`)],Y.prototype,`navScroll`,void 0),w([S(`.navbar-end`)],Y.prototype,`navbarEnd`,void 0),w([b({type:String})],Y.prototype,`brandHref`,void 0),w([b({type:String})],Y.prototype,`expand`,void 0),w([x()],Y.prototype,`breakpointReached`,void 0),w([x()],Y.prototype,`_hasProfileComponent`,void 0),w([N(`expanding`,{waitUntilFirstUpdate:!0})],Y.prototype,`handleOpenChange`,null),j(`nav.show`,{keyframes:[{height:`0`,opacity:`0`},{height:`auto`,opacity:`1`}],options:{duration:200,easing:`ease-in-out`}}),j(`nav.hide`,{keyframes:[{height:`auto`,opacity:`1`},{height:`0`,opacity:`0`}],options:{duration:200,easing:`ease-in-out`}});let kv=yv(`mainnav-context`),Av=yv(`mainnav-expanded-context`);y();var jv=l`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);justify-content:flex-start;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:var(--sgds-mainnav-height,72px);padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand,::slotted(.navbar-brand){align-items:center;align-self:center;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-40);text-decoration:none;white-space:nowrap}.navbar-brand ::slotted(img){height:100%}.navbar-brand:focus-visible,::slotted(.navbar-brand:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown):not(sgds-mainnav-profile)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-end{align-items:center;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.navbar-end--empty{display:none}slot[name=profile]{align-self:stretch;display:flex}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4)}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);height:inherit;margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}slot.slot-empty{display:none}`;y();var Mv=class extends Y{constructor(...e){super(...e),this._breakpointReached=!1,this._expanded=!1,this.hasNonCollapsibleSlot=!1,this.hasProfileSlot=!1,this.fluid=!1,this.hasSlotController=new Eg(this,`non-collapsible`,`profile`)}static{this.styles=[...Y.styles,jv]}get defaultSlotItems(){return[...this.defaultNodes||[]].filter(e=>e.tagName!==void 0)}get endSlotItems(){return[...this.endNodes||[]].filter(e=>e.tagName!==void 0)}updated(){this.hasNonCollapsibleSlot||=this.hasSlotController.test(`non-collapsible`),this.hasProfileSlot||=this.hasSlotController.test(`profile`),this._expanded=this.expanded}_onBreakpointReached(e){this._breakpointReached=e}_isBreakpointReached(){return this._breakpointReached}_handleDefaultSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{e.setAttribute(`expand`,this.expand)})}_handleSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{e.setAttribute(`name`,e.tagName.toLowerCase()),e.setAttribute(`expand`,this.expand)})}_handleProfileSlotChange(e){let t=e.target.assignedElements({flatten:!0});this.hasProfileSlot=t.length>0,t.forEach(e=>{e.setAttribute(`expand`,this.expand)})}render(){return this.breakpointReached=window.innerWidth<(this.expand===`always`?-1:this.expand===`never`?1/0:{sm:512,md:768,lg:1024,xl:1280,xxl:1440}[this.expand]),_`
       <nav aria-label="Main navigation">
         <div class="navbar ${this._expandClass()}">
           ${this.brandHref?_`<a class="navbar-brand" href=${em(this.brandHref)??``}>
@@ -3320,14 +3320,20 @@ super(`context-provider`,{bubbles:!0,composed:!0}),this.context=e,this.contextTa
               ></slot>
             </div>
           </div>
-          <div class="navbar-end">
+          <div
+            class=${E({"navbar-end":!0,"navbar-end--empty":!this.hasNonCollapsibleSlot&&!this.hasProfileSlot&&!this.breakpointReached})}
+          >
             <slot name="non-collapsible" class=${E({"slot-empty":!this.hasNonCollapsibleSlot})}></slot>
-            <slot name="profile" @slotchange=${this._handleProfileSlotChange}></slot>
+            <slot
+              name="profile"
+              class=${E({"slot-empty":!this.hasProfileSlot})}
+              @slotchange=${this._handleProfileSlotChange}
+            ></slot>
             ${this._renderToggler()}
           </div>
         </div>
       </nav>
-    `}};w([wv({context:kv}),x()],Mv.prototype,`_breakpointReached`,void 0),w([wv({context:Av}),x()],Mv.prototype,`_expanded`,void 0),w([b({type:Boolean})],Mv.prototype,`hasNonCollapsibleSlot`,void 0),w([b({type:Boolean,reflect:!0})],Mv.prototype,`fluid`,void 0),w([C()],Mv.prototype,`defaultNodes`,void 0),w([C({slot:`end`})],Mv.prototype,`endNodes`,void 0),y();var Nv=l`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;background:none;border:none;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-family:inherit;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-align:left;text-decoration:none;width:100%}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}:host([tone=brand][expand=always]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=always]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=sm]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=md]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=lg]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xxl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;y();let Pv=`Enter`;var Fv=class extends T{constructor(...e){super(...e),this._breakpointReached=!0,this.togglerId=Ag(`dropdown`,`button`),this.active=!1,this.disabled=!1}static{this.styles=[...T.styles,Pg,Ng,Nv]}static{this.dependencies={"sgds-dropdown":Fg,"sgds-dropdown-item":Lg,"sgds-icon":I}}get defaultSlotItems(){return[...this.defaultNodes||[]].filter(e=>e.tagName!==void 0)}updated(){this._breakpointReached&&(this._copyTextToMenu(),this._resetDropdownMenu(),this._hideDropdownMenuItems())}_handleSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{e.addEventListener(`keydown`,this._handleKeyboardMenuItemsEvent.bind(this));let t=e.shadowRoot.querySelector(`.dropdown-item`);t.classList.add(`mainnav-dropdown-link`);let n=e.shadowRoot?.querySelector(`a`)||e.querySelector(`a`);n.tabIndex=-1,t.classList.contains(`disabled`)?(n.setAttribute(`href`,`javascript:void(0)`),n.setAttribute(`tabindex`,`-1`)):n.addEventListener(`click`,e=>{e.target.closest(`sgds-mainnav`).hide()})})}_handleDesktopSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{let t=e.shadowRoot.querySelector(`.dropdown-item`);t.classList.remove(`mainnav-dropdown-link`),e.shadowRoot.querySelector(`.dropdown-item slot`).assignedElements({flatten:!0}).forEach(e=>{t.classList.contains(`disabled`)&&(e.setAttribute(`href`,`javascript:void(0)`),e.setAttribute(`tabindex`,`-1`))})})}_handleKeyboardMenuItemsEvent(e){if(!this._breakpointReached)return;let t=this.defaultSlotItems.filter(e=>!e.hasAttribute(`disabled`)),n=[this.menuHeaderButton,...t],r=n.length;if(r===0)return;let i=n[0],a=n[r-1].shadowRoot.querySelector(`.dropdown-item`),o=document.activeElement;if(o===this&&(o=this.shadowRoot.activeElement),e.key===`Tab`){if(e.shiftKey)o===i&&(e.preventDefault(),setTimeout(()=>{a.focus()},0));else{let t=o.shadowRoot?o.shadowRoot.querySelector(`.dropdown-item`):null;t&&t===a&&(e.preventDefault(),i.focus())}}}_copyTextToMenu(){this.menuHeaderText.textContent=this.togglerNodes[0].textContent}_handleTogglerSlotChange(){}_hideDropdownMenuItems(){this.dropdownItems.style.display=`none`,this.dropdownItems.setAttribute(`aria-hidden`,`true`)}_resetDropdownMenu(){let e=this._getNavbarBody();return e?new Promise(t=>{let n=r=>{r.propertyName===`transform`&&(e.removeEventListener(`transitionend`,n),t())};getComputedStyle(e).transitionProperty.includes(`transform`)?(e.addEventListener(`transitionend`,n),e.style.removeProperty(`transform`)):(e.style.removeProperty(`transform`),t())}):Promise.resolve()}_handleKeyboardOpen(e){this.disabled||(e.key===Pv||e.key===` `)&&(e.preventDefault(),this._openMenu())}_getNavbarBody(){let e=document.querySelector(`sgds-mainnav`);if(!e?.shadowRoot){console.warn(`sgds-mainnav or its shadowRoot not found`);return}let t=e.shadowRoot.querySelector(`.navbar-body`);if(!t){console.warn(`.navbar-body not found in sgds-mainnav`);return}return t}_openMenu(){let e=this._getNavbarBody();e.style.transform=`translateX(-100%)`,this.dropdownItems.style.removeProperty(`display`),this.dropdownItems.setAttribute(`aria-hidden`,`false`),setTimeout(()=>{this.menuHeaderButton.focus()},50)}_handleHeaderKeyboardEvent(e){switch(e.key){case`Tab`:this._handleKeyboardMenuItemsEvent(e);break;case Pv:case` `:e.preventDefault(),this._closeMenu()}}async _closeMenu(){await this._resetDropdownMenu(),this._hideDropdownMenuItems(),this.navLink.focus()}render(){let e=_`
+    `}};w([wv({context:kv}),x()],Mv.prototype,`_breakpointReached`,void 0),w([wv({context:Av}),x()],Mv.prototype,`_expanded`,void 0),w([b({type:Boolean})],Mv.prototype,`hasNonCollapsibleSlot`,void 0),w([b({type:Boolean})],Mv.prototype,`hasProfileSlot`,void 0),w([b({type:Boolean,reflect:!0})],Mv.prototype,`fluid`,void 0),w([C()],Mv.prototype,`defaultNodes`,void 0),w([C({slot:`end`})],Mv.prototype,`endNodes`,void 0),y();var Nv=l`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;background:none;border:none;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-family:inherit;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-align:left;text-decoration:none;width:100%}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}:host([tone=brand][expand=always]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=always]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=sm]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=md]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=lg]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xxl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;y();let Pv=`Enter`;var Fv=class extends T{constructor(...e){super(...e),this._breakpointReached=!0,this.togglerId=Ag(`dropdown`,`button`),this.active=!1,this.disabled=!1}static{this.styles=[...T.styles,Pg,Ng,Nv]}static{this.dependencies={"sgds-dropdown":Fg,"sgds-dropdown-item":Lg,"sgds-icon":I}}get defaultSlotItems(){return[...this.defaultNodes||[]].filter(e=>e.tagName!==void 0)}updated(){this._breakpointReached&&(this._copyTextToMenu(),this._resetDropdownMenu(),this._hideDropdownMenuItems())}_handleSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{e.addEventListener(`keydown`,this._handleKeyboardMenuItemsEvent.bind(this));let t=e.shadowRoot.querySelector(`.dropdown-item`);t.classList.add(`mainnav-dropdown-link`);let n=e.shadowRoot?.querySelector(`a`)||e.querySelector(`a`);n.tabIndex=-1,t.classList.contains(`disabled`)?(n.setAttribute(`href`,`javascript:void(0)`),n.setAttribute(`tabindex`,`-1`)):n.addEventListener(`click`,e=>{e.target.closest(`sgds-mainnav`).hide()})})}_handleDesktopSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{let t=e.shadowRoot.querySelector(`.dropdown-item`);t.classList.remove(`mainnav-dropdown-link`),e.shadowRoot.querySelector(`.dropdown-item slot`).assignedElements({flatten:!0}).forEach(e=>{t.classList.contains(`disabled`)&&(e.setAttribute(`href`,`javascript:void(0)`),e.setAttribute(`tabindex`,`-1`))})})}_handleKeyboardMenuItemsEvent(e){if(!this._breakpointReached)return;let t=this.defaultSlotItems.filter(e=>!e.hasAttribute(`disabled`)),n=[this.menuHeaderButton,...t],r=n.length;if(r===0)return;let i=n[0],a=n[r-1].shadowRoot.querySelector(`.dropdown-item`),o=document.activeElement;if(o===this&&(o=this.shadowRoot.activeElement),e.key===`Tab`){if(e.shiftKey)o===i&&(e.preventDefault(),setTimeout(()=>{a.focus()},0));else{let t=o.shadowRoot?o.shadowRoot.querySelector(`.dropdown-item`):null;t&&t===a&&(e.preventDefault(),i.focus())}}}_copyTextToMenu(){this.menuHeaderText.textContent=this.togglerNodes[0].textContent}_handleTogglerSlotChange(){}_hideDropdownMenuItems(){this.dropdownItems.style.display=`none`,this.dropdownItems.setAttribute(`aria-hidden`,`true`)}_resetDropdownMenu(){let e=this._getNavbarBody();return e?new Promise(t=>{let n=r=>{r.propertyName===`transform`&&(e.removeEventListener(`transitionend`,n),t())};getComputedStyle(e).transitionProperty.includes(`transform`)?(e.addEventListener(`transitionend`,n),e.style.removeProperty(`transform`)):(e.style.removeProperty(`transform`),t())}):Promise.resolve()}_handleKeyboardOpen(e){this.disabled||(e.key===Pv||e.key===` `)&&(e.preventDefault(),this._openMenu())}_getNavbarBody(){let e=document.querySelector(`sgds-mainnav`);if(!e?.shadowRoot){console.warn(`sgds-mainnav or its shadowRoot not found`);return}let t=e.shadowRoot.querySelector(`.navbar-body`);if(!t){console.warn(`.navbar-body not found in sgds-mainnav`);return}return t}_openMenu(){let e=this._getNavbarBody();e.style.transform=`translateX(-100%)`,this.dropdownItems.style.removeProperty(`display`),this.dropdownItems.setAttribute(`aria-hidden`,`false`),setTimeout(()=>{this.menuHeaderButton.focus()},50)}_handleHeaderKeyboardEvent(e){switch(e.key){case`Tab`:this._handleKeyboardMenuItemsEvent(e);break;case Pv:case` `:e.preventDefault(),this._closeMenu()}}async _closeMenu(){await this._resetDropdownMenu(),this._hideDropdownMenuItems(),this.navLink.focus()}render(){let e=_`
       <button
         class="${E({"nav-link":!0,active:this.active,disabled:this.disabled})}"
         aria-disabled=${this.disabled?`true`:`false`}