@govtechsg/sgds-web-component 3.26.1 → 3.27.0-rc.1

package/components/Mainnav/mainnav-dropdown.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`: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;box-sizing:border-box;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);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.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}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)}}`;
+var css_248z = css`: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;box-sizing:border-box;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);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}: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)}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=mainnav-dropdown.js.map

package/components/Mainnav/mainnav-item.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;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;min-height:100%;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;min-height:100%;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;min-height:100%;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;min-height:100%;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;min-height:100%;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);--sgds-link-color-emphasis:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-color-default)!important;cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);height:auto!important;line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important}@media screen and (min-width:1024px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:active){color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:active){color:var(--sgds-primary-color-default)!important}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
+var css_248z = css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;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;min-height:100%;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;min-height:100%;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;min-height:100%;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;min-height:100%;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;min-height:100%;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);--sgds-link-color-emphasis:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-color-default)!important;cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);height:auto!important;line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important}:host([tone=brand][expand=always]) ::slotted(*),:host([tone^=gradient][expand=always]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) ::slotted(*),:host([tone^=gradient][expand=sm]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) ::slotted(*),:host([tone^=gradient][expand=md]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) ::slotted(*),:host([tone^=gradient][expand=lg]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) ::slotted(*),:host([tone^=gradient][expand=xl]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) ::slotted(*),:host([tone^=gradient][expand=xxl]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}@media screen and (min-width:512px){:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:768px){:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:active){color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:active){color:var(--sgds-primary-color-default)!important}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=mainnav-item.js.map

package/components/Mainnav/mainnav.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 2px 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:space-between;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:80px;padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand{align-items:center;color:var(--sgds-color-default);display:flex;text-decoration:none;white-space:nowrap}.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 2px 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)){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}.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}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4);margin-left:auto}slot[name=non-collapsible].non-collapsible-empty{display:none}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
+var css_248z = css`: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)}:host([tone=brand]) nav{background-color:var(--sgds-primary-surface-default)}:host([tone=gradient-1]) nav{background:var(--sgds-gradient-1)}:host([tone=gradient-2]) nav{background:var(--sgds-gradient-2)}:host([tone=gradient-3]) nav{background:var(--sgds-gradient-3)}:host([tone=gradient-4]) nav{background:var(--sgds-gradient-4)}.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{align-items:center;color:var(--sgds-color-default);display:flex;text-decoration:none;white-space:nowrap}:host([tone=brand]) .navbar-brand,:host([tone^=gradient]) .navbar-brand{color:var(--sgds-color-fixed-light)}.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)}:host([tone=brand]) slot[name=non-collapsible]::slotted(*),:host([tone^=gradient]) slot[name=non-collapsible]::slotted(*){color:var(--sgds-color-fixed-light)}.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}`;
 
 export { css_248z as default };
 //# sourceMappingURL=mainnav.js.map

package/components/Mainnav/sgds-mainnav-profile.d.ts

@@ -0,0 +1,15 @@
+import NavProfileElement from "../../base/nav-profile-element";
+/**
+ * @summary A profile component for the mainnav that shows a full dropdown in desktop and handles its own mobile menu.
+ * In desktop: renders avatar + label + secondaryText with a dropdown.
+ * In mobile: renders the avatar as a toggler that opens a self-contained mobile panel with profile items.
+ * When no dropdown items are slotted, renders as a non-interactive read-only element (no caret, no pointer cursor, not focusable).
+ * When present, it disables the mainnav's default hamburger toggler.
+ *
+ * @slot avatar - Avatar element displayed in both desktop (before label) and mobile (as toggler)
+ * @slot default - Profile menu items (sgds-dropdown-item elements). When empty, the component becomes read-only.
+ */
+export declare class SgdsMainnavProfile extends NavProfileElement {
+    protected _breakpointReached: boolean;
+}
+export default SgdsMainnavProfile;

package/components/Mainnav/sgds-mainnav-profile.js

@@ -0,0 +1,29 @@
+import { __decorate } from 'tslib';
+import { consume } from '@lit/context';
+import { state } from 'lit/decorators.js';
+import NavProfileElement from '../../base/nav-profile-element.js';
+import { MainnavBreakpointContext } from './mainnav-context.js';
+
+/**
+ * @summary A profile component for the mainnav that shows a full dropdown in desktop and handles its own mobile menu.
+ * In desktop: renders avatar + label + secondaryText with a dropdown.
+ * In mobile: renders the avatar as a toggler that opens a self-contained mobile panel with profile items.
+ * When no dropdown items are slotted, renders as a non-interactive read-only element (no caret, no pointer cursor, not focusable).
+ * When present, it disables the mainnav's default hamburger toggler.
+ *
+ * @slot avatar - Avatar element displayed in both desktop (before label) and mobile (as toggler)
+ * @slot default - Profile menu items (sgds-dropdown-item elements). When empty, the component becomes read-only.
+ */
+class SgdsMainnavProfile extends NavProfileElement {
+    constructor() {
+        super(...arguments);
+        this._breakpointReached = true;
+    }
+}
+__decorate([
+    consume({ context: MainnavBreakpointContext, subscribe: true }),
+    state()
+], SgdsMainnavProfile.prototype, "_breakpointReached", void 0);
+
+export { SgdsMainnavProfile, SgdsMainnavProfile as default };
+//# sourceMappingURL=sgds-mainnav-profile.js.map

package/components/Mainnav/sgds-mainnav-profile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-mainnav-profile.js","sources":["../../../src/components/Mainnav/sgds-mainnav-profile.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { state } from \"lit/decorators.js\";\nimport NavProfileElement from \"../../base/nav-profile-element\";\nimport { MainnavBreakpointContext } from \"./mainnav-context\";\n\n/**\n * @summary A profile component for the mainnav that shows a full dropdown in desktop and handles its own mobile menu.\n * In desktop: renders avatar + label + secondaryText with a dropdown.\n * In mobile: renders the avatar as a toggler that opens a self-contained mobile panel with profile items.\n * When no dropdown items are slotted, renders as a non-interactive read-only element (no caret, no pointer cursor, not focusable).\n * When present, it disables the mainnav's default hamburger toggler.\n *\n * @slot avatar - Avatar element displayed in both desktop (before label) and mobile (as toggler)\n * @slot default - Profile menu items (sgds-dropdown-item elements). When empty, the component becomes read-only.\n */\nexport class SgdsMainnavProfile extends NavProfileElement {\n  @consume({ context: MainnavBreakpointContext, subscribe: true })\n  @state()\n  protected override _breakpointReached = true;\n}\n\nexport default SgdsMainnavProfile;\n"],"names":[],"mappings":";;;;;;AAKA;;;;;;;;;AASG;AACG,MAAO,kBAAmB,SAAQ,iBAAiB,CAAA;AAAzD,IAAA,WAAA,GAAA;;QAGqB,IAAkB,CAAA,kBAAA,GAAG,IAAI,CAAC;KAC9C;AAAA,CAAA;AADoB,UAAA,CAAA;IAFlB,OAAO,CAAC,EAAE,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC/D,IAAA,KAAK,EAAE;AACqC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/Mainnav/sgds-mainnav.d.ts

@@ -1,6 +1,4 @@
-import { PropertyValueMap } from "lit";
-import SgdsElement from "../../base/sgds-element";
-import SgdsIconButton from "../IconButton/sgds-icon-button";
+import NavElement from "../../base/nav-element";
 import SgdsMainnavDropdown from "./sgds-mainnav-dropdown";
 import SgdsMainnavItem from "./sgds-mainnav-item";
 export type MainnavExpandSize = "sm" | "md" | "lg" | "xl" | "xxl" | "always" | "never";
@@ -13,75 +11,34 @@ export type MainnavExpandSize = "sm" | "md" | "lg" | "xl" | "xxl" | "always" | "
  * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.
  *
  * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.
+ * @slot start - Elements in this slot will be positioned to the left of the brand.
  * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.
  * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here
+ * @slot profile - Profile slot positioned at the far right in desktop. In mobile, moves into the collapsed menu as the first item.
  * @slot non-collapsible - Elements in this slot will not be collapsed
  *
  */
-export declare class SgdsMainnav extends SgdsElement {
+export declare class SgdsMainnav extends NavElement {
     static styles: import("lit").CSSResult[];
-    /** @internal */
-    static dependencies: {
-        "sgds-icon-button": typeof SgdsIconButton;
-    };
     private _breakpointReached;
-    /** Indicates if mobile menu is open or closed */
-    private expanded;
-    /** Denotes the transition state of mobile mainnav menu opening  */
-    private expanding;
-    /** @internal */
-    nav: HTMLElement;
-    /** @internal */
-    navbar: HTMLElement;
-    /** @internal */
-    header: HTMLElement;
-    /** @internal */
-    body: HTMLElement;
-    /** @internal */
-    navScroll: HTMLElement;
-    /** @internal */
-    nonCollapsibleSlot: HTMLSlotElement;
+    private _expanded;
     /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */
     hasNonCollapsibleSlot: boolean;
-    /** The href link for brand logo */
-    brandHref: string;
-    private collapseId;
-    /** The breakpoint, below which, the Navbar will collapse. When always the Navbar will always be expanded regardless of screen size. When never, the Navbar will always be collapsed */
-    expand: MainnavExpandSize;
     /** When true, removes max-width constraint to allow content to stretch full screen width */
     fluid: boolean;
-    /** @internal */
-    breakpointReached: boolean;
-    /** @internal */
     private defaultNodes;
-    /** @internal */
     private endNodes;
     /** @internal */
     get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[];
     /** @internal */
     get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[];
     private readonly hasSlotController;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    firstUpdated(changedProperties: PropertyValueMap<this>): void;
     updated(): void;
-    private _handleClickOutOfElement;
-    private _handleSummaryClick;
-    private _handleResize;
-    private _handleMobileNavBound;
-    private _handleMobileNav;
-    private _handleDesktopNav;
-    private _animateToShow;
-    private _animateToHide;
-    /** @internal */
-    handleOpenChange(): Promise<void>;
-    /** Shows the menu. For when mainnav is in the collapsed form */
-    show(): Promise<void>;
-    /** Hide the menu. For when mainnav is in the collapsed form */
-    hide(): Promise<void>;
+    protected _onBreakpointReached(reached: boolean): void;
+    protected _isBreakpointReached(): boolean;
     private _handleDefaultSlotChange;
     private _handleSlotChange;
+    private _handleProfileSlotChange;
     render(): import("lit").TemplateResult<1>;
-    _expandClass(): string;
 }
 export default SgdsMainnav;

package/components/Mainnav/sgds-mainnav.js

@@ -1,29 +1,13 @@
 import { __decorate } from 'tslib';
 import { provide } from '@lit/context';
 import { html } from 'lit';
-import { state, query, property, queryAssignedElements } from 'lit/decorators.js';
+import { state, property, queryAssignedElements } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import SgdsElement from '../../base/sgds-element.js';
-import { stopAnimations, animateTo, shimKeyframesHeightAuto } from '../../utils/animate.js';
-import { setDefaultAnimation, getAnimation } from '../../utils/animation-registry.js';
-import { SM_BREAKPOINT, MD_BREAKPOINT, LG_BREAKPOINT, XL_BREAKPOINT, XXL_BREAKPOINT } from '../../utils/breakpoints.js';
-import { waitForEvent } from '../../utils/event.js';
-import genId from '../../utils/generateId.js';
-import { watch } from '../../utils/watch.js';
-import { SgdsIconButton } from '../IconButton/sgds-icon-button.js';
+import NavElement from '../../base/nav-element.js';
+import { HasSlotController } from '../../utils/slot.js';
 import { MainnavBreakpointContext, MainnavExpandedContext } from './mainnav-context.js';
 import css_248z from './mainnav.js';
-import { HasSlotController } from '../../utils/slot.js';
 
-const SIZES = {
-    sm: SM_BREAKPOINT,
-    md: MD_BREAKPOINT,
-    lg: LG_BREAKPOINT,
-    xl: XL_BREAKPOINT,
-    xxl: XXL_BREAKPOINT,
-    never: Infinity,
-    always: -1
-};
 /**
  * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.
  *
@@ -33,32 +17,23 @@ const SIZES = {
  * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.
  *
  * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.
+ * @slot start - Elements in this slot will be positioned to the left of the brand.
  * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.
  * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here
+ * @slot profile - Profile slot positioned at the far right in desktop. In mobile, moves into the collapsed menu as the first item.
  * @slot non-collapsible - Elements in this slot will not be collapsed
  *
  */
-class SgdsMainnav extends SgdsElement {
+class SgdsMainnav extends NavElement {
     constructor() {
         super(...arguments);
         this._breakpointReached = false;
-        /** Indicates if mobile menu is open or closed */
-        this.expanded = false;
-        /** Denotes the transition state of mobile mainnav menu opening  */
-        this.expanding = false;
+        this._expanded = false;
         /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */
         this.hasNonCollapsibleSlot = false;
-        /** The href link for brand logo */
-        this.brandHref = "";
-        this.collapseId = genId("mainnav", "collapse");
-        /** The breakpoint, below which, the Navbar will collapse. When always the Navbar will always be expanded regardless of screen size. When never, the Navbar will always be collapsed */
-        this.expand = "lg";
         /** When true, removes max-width constraint to allow content to stretch full screen width */
         this.fluid = false;
-        /** @internal */
-        this.breakpointReached = false;
         this.hasSlotController = new HasSlotController(this, "non-collapsible");
-        this._handleMobileNavBound = this._handleMobileNav.bind(this);
     }
     /** @internal */
     get defaultSlotItems() {
@@ -68,146 +43,29 @@ class SgdsMainnav extends SgdsElement {
     get endSlotItems() {
         return [...(this.endNodes || [])].filter((node) => typeof node.tagName !== "undefined");
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this._handleResize();
-        window.addEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
-        window.addEventListener("resize", this._handleResize.bind(this));
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        window.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
-        window.removeEventListener("resize", this._handleResize.bind(this));
-    }
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        if (this.breakpointReached && this.body) {
-            this.expanded = false;
-            this.body.hidden = true;
-            this._handleMobileNav();
-            this._breakpointReached = true;
-        }
-    }
     updated() {
         if (!this.hasNonCollapsibleSlot)
             this.hasNonCollapsibleSlot = this.hasSlotController.test("non-collapsible");
+        // Sync expanded state to context
+        this._expanded = this.expanded;
     }
-    _handleClickOutOfElement(e, self) {
-        if (!e.composedPath().includes(self) && !e.composedPath().includes(this.header)) {
-            this.hide();
-        }
-    }
-    _handleSummaryClick() {
-        if (this.expanded) {
-            this.hide();
-        }
-        else {
-            document.body.style.overflow = "hidden";
-            this.show();
-        }
-    }
-    _handleResize() {
-        const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];
-        if (newBreakpointReachedValue !== this.breakpointReached) {
-            this.requestUpdate();
-        }
-        else {
-            this.body ? (this.body.hidden = true) : null;
-            // this.expanded = false;
-            this.expanding = false;
-        }
-        if (newBreakpointReachedValue) {
-            this._handleMobileNav();
-            if (!this._breakpointReached) {
-                this._breakpointReached = true;
-                window.addEventListener("scrollend", this._handleMobileNavBound);
-            }
-        }
-        else {
-            this._handleDesktopNav();
-            this._breakpointReached = false;
-            window.removeEventListener("scrollend", this._handleMobileNavBound);
-        }
-    }
-    async _handleMobileNav() {
-        if (!this.nav)
-            return;
-        this.nav.appendChild(this.body);
-        await customElements.whenDefined("sgds-masthead");
-        const { bottom } = this.nav.getBoundingClientRect();
-        const navBodyPaddingY = parseFloat(getComputedStyle(this.body).paddingTop) + parseFloat(getComputedStyle(this.body).paddingBottom);
-        this.navScroll.style.maxHeight = `calc(100dvh - ${bottom}px - ${navBodyPaddingY}px)`;
-    }
-    _handleDesktopNav() {
-        var _a;
-        (_a = this.navbar) === null || _a === void 0 ? void 0 : _a.insertBefore(this.body, this.nonCollapsibleSlot);
-    }
-    async _animateToShow() {
-        const sgdsShow = this.emit("sgds-show", { cancelable: true });
-        if (sgdsShow.defaultPrevented) {
-            this.expanding = false;
-            this.expanded = false;
-            return;
-        }
-        await stopAnimations(this.body);
-        this.body.hidden = false;
-        const { keyframes, options } = getAnimation(this, "mainnav.show");
-        await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
-        this.body.style.height = "auto";
-        this.emit("sgds-after-show");
-    }
-    async _animateToHide() {
-        const slHide = this.emit("sgds-hide", { cancelable: true });
-        if (slHide.defaultPrevented) {
-            this.expanding = false;
-            this.expanded = true;
-            return;
-        }
-        await stopAnimations(this.body);
-        const { keyframes, options } = getAnimation(this, "mainnav.hide");
-        await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
-        this.body.hidden = true;
-        this.body.style.height = "auto";
-        this.emit("sgds-after-hide");
-    }
-    /** @internal */
-    async handleOpenChange() {
-        if (this.expanding) {
-            // Show
-            await this._animateToShow();
-            this.expanded = true;
-        }
-        else {
-            this.header.focus();
-            // Hide
-            await this._animateToHide();
-            this.expanded = false;
-        }
-    }
-    /** Shows the menu. For when mainnav is in the collapsed form */
-    async show() {
-        if (this.expanded) {
-            return;
-        }
-        this.expanding = true;
-        return waitForEvent(this, "sgds-after-show");
+    _onBreakpointReached(reached) {
+        this._breakpointReached = reached;
     }
-    /** Hide the menu. For when mainnav is in the collapsed form */
-    async hide() {
-        if (!this.expanded) {
-            return;
-        }
-        this.expanding = false;
-        document.body.style.removeProperty("overflow");
-        return waitForEvent(this, "sgds-after-hide");
+    _isBreakpointReached() {
+        return this._breakpointReached;
     }
     _handleDefaultSlotChange(e) {
         const childElements = e.target.assignedElements({ flatten: true });
         childElements.forEach(el => {
             el.setAttribute("expand", this.expand);
         });
+        if (this._hasProfileComponent && childElements.length > 0) {
+            console.warn("[sgds-mainnav] Using <sgds-mainnav-item> alongside <sgds-mainnav-profile> is not recommended. " +
+                "The profile component disables the mainnav hamburger menu, so nav items will have no mobile menu. " +
+                "Use a sidebar for navigation in operational apps.");
+        }
     }
-    // assigning name attribute to elements added in slot="end", to use wildcard css selector to assign styles only to *-mainnav-item
     _handleSlotChange(e) {
         const childElements = e.target.assignedElements({ flatten: true });
         childElements.forEach(e => {
@@ -215,11 +73,24 @@ class SgdsMainnav extends SgdsElement {
             e.setAttribute("expand", this.expand);
         });
     }
+    _handleProfileSlotChange(e) {
+        const childElements = e.target.assignedElements({ flatten: true });
+        childElements.forEach(el => {
+            el.setAttribute("expand", this.expand);
+        });
+    }
     render() {
-        this.breakpointReached = window.innerWidth < SIZES[this.expand];
+        this.breakpointReached =
+            window.innerWidth <
+                (this.expand === "always"
+                    ? -1
+                    : this.expand === "never"
+                        ? Infinity
+                        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);
         return html `
       <nav>
         <div class="navbar ${this._expandClass()}">
+          <slot name="start"></slot>
           <a class="navbar-brand" href=${this.brandHref} aria-label="brand-link">
             <slot name="brand"></slot>
           </a>
@@ -233,40 +104,17 @@ class SgdsMainnav extends SgdsElement {
               ></slot>
             </div>
           </div>
-          <slot
-            name="non-collapsible"
-            class=${classMap({ "non-collapsible-empty": !this.hasNonCollapsibleSlot })}
-          ></slot>
-          <sgds-icon-button
-            name=${this.expanded ? "cross" : "menu"}
-            variant="ghost"
-            size="sm"
-            class="navbar-toggler"
-            @click=${this._handleSummaryClick}
-            aria-controls="${this.collapseId}"
-            aria-expanded="${this.expanded}"
-            .ariaLabel=${"Toggle navigation"}
-          ></sgds-icon-button>
+          <div class="navbar-end">
+            <slot name="non-collapsible" class=${classMap({ "slot-empty": !this.hasNonCollapsibleSlot })}></slot>
+            <slot name="profile" @slotchange=${this._handleProfileSlotChange}></slot>
+            ${this._renderToggler()}
+          </div>
         </div>
       </nav>
     `;
     }
-    _expandClass() {
-        switch (this.expand) {
-            case "always":
-                return "navbar-expand";
-            case "never":
-                break;
-            default:
-                return `navbar-expand-${this.expand}`;
-        }
-    }
 }
-SgdsMainnav.styles = [...SgdsElement.styles, css_248z];
-/** @internal */
-SgdsMainnav.dependencies = {
-    "sgds-icon-button": SgdsIconButton
-};
+SgdsMainnav.styles = [...NavElement.styles, css_248z];
 __decorate([
     provide({ context: MainnavBreakpointContext }),
     state()
@@ -274,66 +122,20 @@ __decorate([
 __decorate([
     provide({ context: MainnavExpandedContext }),
     state()
-], SgdsMainnav.prototype, "expanded", void 0);
-__decorate([
-    state()
-], SgdsMainnav.prototype, "expanding", void 0);
-__decorate([
-    query("nav")
-], SgdsMainnav.prototype, "nav", void 0);
-__decorate([
-    query(".navbar")
-], SgdsMainnav.prototype, "navbar", void 0);
-__decorate([
-    query(".navbar-toggler")
-], SgdsMainnav.prototype, "header", void 0);
-__decorate([
-    query(".navbar-body")
-], SgdsMainnav.prototype, "body", void 0);
-__decorate([
-    query(".navbar-nav-scroll")
-], SgdsMainnav.prototype, "navScroll", void 0);
-__decorate([
-    query("slot[name='non-collapsible']")
-], SgdsMainnav.prototype, "nonCollapsibleSlot", void 0);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+], SgdsMainnav.prototype, "_expanded", void 0);
 __decorate([
     property({ type: Boolean })
 ], SgdsMainnav.prototype, "hasNonCollapsibleSlot", void 0);
-__decorate([
-    property({ type: String })
-], SgdsMainnav.prototype, "brandHref", void 0);
-__decorate([
-    property({ type: String })
-], SgdsMainnav.prototype, "expand", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsMainnav.prototype, "fluid", void 0);
-__decorate([
-    state()
-], SgdsMainnav.prototype, "breakpointReached", void 0);
 __decorate([
     queryAssignedElements()
 ], SgdsMainnav.prototype, "defaultNodes", void 0);
 __decorate([
     queryAssignedElements({ slot: "end" })
 ], SgdsMainnav.prototype, "endNodes", void 0);
-__decorate([
-    watch("expanding", { waitUntilFirstUpdate: true })
-], SgdsMainnav.prototype, "handleOpenChange", null);
-setDefaultAnimation("mainnav.show", {
-    keyframes: [
-        { height: "0", opacity: "0" },
-        { height: "auto", opacity: "1" }
-    ],
-    options: { duration: 200, easing: "ease-in-out" }
-});
-setDefaultAnimation("mainnav.hide", {
-    keyframes: [
-        { height: "auto", opacity: "1" },
-        { height: "0", opacity: "0" }
-    ],
-    options: { duration: 200, easing: "ease-in-out" }
-});
 
 export { SgdsMainnav, SgdsMainnav as default };
 //# sourceMappingURL=sgds-mainnav.js.map