@govtechsg/sgds-web-component 0.0.5 → 0.0.7

package/index.js

@@ -27068,8 +27068,10 @@ a[target=_blank]:after {
   display: flex;
   align-self: center;
   gap: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
   height: 100%;
-  margin-left: 1rem;
+  width: 100%;
 }
 
 .navbar-toggler {
@@ -27084,6 +27086,17 @@ slot[name=non-collapsible] {
   display: flex;
   gap: 1rem;
   align-items: center;
+}
+
+.slot-end {
+  display: flex;
+  margin-left: auto;
+  align-items: stretch;
+  gap: 1rem;
+}
+
+.slot-end::slotted(:not(sgds-mainnav-item)) {
+  align-self: center;
 }`;
 
 var top = 'top';
@@ -34220,7 +34233,19 @@ let SgdsMainnav = class SgdsMainnav extends SgdsElement {
           aria-expanded="${this.expanded}"
           aria-label="Toggle navigation"
         >
-          <span class="navbar-toggler-icon"></span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="30"
+            height="30"
+            fill="currentColor"
+            class="bi bi-list"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
+            />
+          </svg>
         </button>
         <div
           class=${this.mode === "default" ? collapseClass : offcanvasClass}
@@ -34231,6 +34256,7 @@ let SgdsMainnav = class SgdsMainnav extends SgdsElement {
         >
           <ul class="navbar-nav">
             <slot></slot>
+            <slot name="end" class=${o$2({ "slot-end": !this.breakpointReached })}></slot>
           </ul>
         </div>
       </nav>