From dc398cacee0007167ca674dd7fc8c7c86dac7d39 Mon Sep 17 00:00:00 2001
From: Tong Hau <tonghau_Lee@hive.gov.sg>
Date: Thu, 26 Dec 2024 12:58:36 +0800
Subject: [PATCH 01/16] chore(link element): add tab index to hyperlink

---
 src/base/link-element.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/base/link-element.ts b/src/base/link-element.ts
index 5ffce35e..3f318346 100644
--- a/src/base/link-element.ts
+++ b/src/base/link-element.ts
@@ -37,6 +37,7 @@ export default class LinkElement extends SgdsElement {
         })} "
         ?disabled=${this.disabled}
         aria-disabled=${this.disabled ? "true" : "false"}
+        tabindex=${this.disabled ? "-1" : "0"}
       >
         <slot></slot>
       </a>

From 7797ba49b3ac91ed55b13cd1b342a03e36ff7947 Mon Sep 17 00:00:00 2001
From: Tong Hau <tonghau_Lee@hive.gov.sg>
Date: Thu, 26 Dec 2024 12:59:35 +0800
Subject: [PATCH 02/16] chore(icon): add menu icon

---
 src/components/Icon/icon-registry.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/Icon/icon-registry.ts b/src/components/Icon/icon-registry.ts
index 4b869d32..30d91cf4 100644
--- a/src/components/Icon/icon-registry.ts
+++ b/src/components/Icon/icon-registry.ts
@@ -385,6 +385,12 @@ export const Map = `
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
   <path fill="currentColor" fill-rule="evenodd" d="M21.283 2.471A.6.6 0 0 1 21.6 3v14.4a.6.6 0 0 1-.267.5l-5.4 3.6a.6.6 0 0 1-.63.021L9.3 18.091l-6.002 3.43A.6.6 0 0 1 2.4 21V6.6a.6.6 0 0 1 .302-.52l6.3-3.6a.6.6 0 0 1 .596 0l5.978 3.415 5.091-3.394a.6.6 0 0 1 .616-.03ZM15 6.948 9.9 4.034v13.018l5.1 2.914V6.948Zm1.2 12.93 4.2-2.8V4.122l-4.2 2.8V19.88Zm-7.5-2.826V4.034L3.6 6.948v13.018l5.1-2.914Z" clip-rule="evenodd"/>
 </svg>`;
+export const Menu = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M2.375 6C2.375 5.65482 2.65482 5.375 3 5.375H21C21.3452 5.375 21.625 5.65482 21.625 6C21.625 6.34518 21.3452 6.625 21 6.625H3C2.65482 6.625 2.375 6.34518 2.375 6Z" fill="currentColor"/>
+  <path d="M2.375 12C2.375 11.6548 2.65482 11.375 3 11.375H21C21.3452 11.375 21.625 11.6548 21.625 12C21.625 12.3452 21.3452 12.625 21 12.625H3C2.65482 12.625 2.375 12.3452 2.375 12Z" fill="currentColor"/>
+  <path d="M2.375 18C2.375 17.6548 2.65482 17.375 3 17.375H15C15.3452 17.375 15.625 17.6548 15.625 18C15.625 18.3452 15.3452 18.625 15 18.625H3C2.65482 18.625 2.375 18.3452 2.375 18Z" fill="currentColor"/>
+</svg>`;
 export const Paperclip = `
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
   <path fill="currentColor" fill-rule="evenodd" d="M10.4 3.6a2.7 2.7 0 0 0-2.7 2.7v9.75a4.35 4.35 0 1 0 8.7 0V5.93a.6.6 0 1 1 1.2 0v10.12a5.55 5.55 0 1 1-11.1 0V6.3a3.9 3.9 0 0 1 7.8 0v9.701a2.25 2.25 0 0 1-4.5 0V7.186a.6.6 0 1 1 1.2 0v8.815a1.05 1.05 0 1 0 2.1 0V6.3a2.7 2.7 0 0 0-2.7-2.7Z" clip-rule="evenodd"/>

From ff7406be5afd1ef1245b9134dbf45dc793742b8d Mon Sep 17 00:00:00 2001
From: Tong Hau <tonghau_Lee@hive.gov.sg>
Date: Thu, 26 Dec 2024 13:18:44 +0800
Subject: [PATCH 03/16] chore(icon button): fix text case

---
 test/icon-button.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/icon-button.test.ts b/test/icon-button.test.ts
index a2bbe51f..22090476 100644
--- a/test/icon-button.test.ts
+++ b/test/icon-button.test.ts
@@ -20,7 +20,7 @@ describe("<sgds-icon-button>", () => {
       class="btn btn-icon btn-primary btn-md"
       tabindex="0"
       type="button">
-        <sgds-icon name="placeholder" style="display: none;" size="lg"></sgds-icon>
+        <sgds-icon name="placeholder" size="lg"></sgds-icon>
       </button>
       `
     );

From 2b6c7f415e6807d79d51dbd584ccebf4da50e9ca Mon Sep 17 00:00:00 2001
From: Tong Hau <tonghau_Lee@hive.gov.sg>
Date: Thu, 26 Dec 2024 13:19:22 +0800
Subject: [PATCH 04/16] chore(link element): fix text case

---
 test/link-element.test.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/link-element.test.ts b/test/link-element.test.ts
index b7d037b1..9f7b8b2d 100644
--- a/test/link-element.test.ts
+++ b/test/link-element.test.ts
@@ -12,6 +12,7 @@ describe("link-element", () => {
         <a
           aria-disabled="false"
           class="nav-link"
+          tabindex="0"
         >
           <slot>
           </slot>

From 3ad83fa9527a0490ccf977711dbd39b162bdad88 Mon Sep 17 00:00:00 2001
From: Tong Hau <tonghau_Lee@hive.gov.sg>
Date: Thu, 26 Dec 2024 13:19:51 +0800
Subject: [PATCH 05/16] chore(overflow menu): fix text case

---
 test/overflow-menu.test.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/test/overflow-menu.test.ts b/test/overflow-menu.test.ts
index dd63c58b..6d285d94 100644
--- a/test/overflow-menu.test.ts
+++ b/test/overflow-menu.test.ts
@@ -9,11 +9,11 @@ describe("<sgds-overflow-menu>", () => {
       el,
       `
       <sgds-dropdown drop="down">
-            <button slot="toggler" class="overflow-btn">
-                <sgds-icon name="three-dots" size="md" style="display: none;"></sgds-icon>
-            </button>
-            <slot></slot>
-        </sgds-dropdown>
+        <button slot="toggler" class="overflow-btn">
+            <sgds-icon name="three-dots" size="md"></sgds-icon>
+        </button>
+        <slot></slot>
+      </sgds-dropdown>
       `
     );
   });

From ebd197b9698b46e4790b338ea081f38a16eae2cb Mon Sep 17 00:00:00 2001
From: Tong Hau <tonghau_Lee@hive.gov.sg>
Date: Thu, 26 Dec 2024 13:33:02 +0800
Subject: [PATCH 06/16] feat(mainnav): update mainnav

---
 src/components/Mainnav/mainnav-dropdown.css   |  80 +++--
 src/components/Mainnav/mainnav-item.css       | 126 ++++++--
 src/components/Mainnav/mainnav.css            | 287 +++++-------------
 .../Mainnav/sgds-mainnav-dropdown.ts          |  70 ++---
 src/components/Mainnav/sgds-mainnav.ts        | 120 +++++---
 5 files changed, 347 insertions(+), 336 deletions(-)

diff --git a/src/components/Mainnav/mainnav-dropdown.css b/src/components/Mainnav/mainnav-dropdown.css
index c5b9047a..426412e3 100644
--- a/src/components/Mainnav/mainnav-dropdown.css
+++ b/src/components/Mainnav/mainnav-dropdown.css
@@ -1,40 +1,66 @@
-.dropdown-menu {
-  margin-top: 0;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 0 0 5px 5px;
-  background-color: #fff;
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+
+@media (min-width: 576px) {
+  :host([expand="sm"]) .nav-link {
+    padding: 0px var(--sgds-padding-md);
+  }
 }
-.nav-link.show {
-  border-color: var(--mainnav-theme-color);
-  color: var(--mainnav-theme-color);
+
+@media (min-width: 768px) {
+  :host([expand="md"]) .nav-link {
+    padding: 0px var(--sgds-padding-md);
+  }
+}
+
+@media (min-width: 992px) {
+  :host([expand="lg"]) .nav-link {
+    padding: 0px var(--sgds-padding-md);
+  }
+}
+
+@media (min-width: 1200px) {
+  :host([expand="xl"]) .nav-link {
+    padding: 0px var(--sgds-padding-md);
+  }
 }
 
-.sgds.dropdown.nav-item {
-  height: 100%;
+@media (min-width: 1400px) {
+  :host([expand="xxl"]) .nav-link {
+    padding: 0px var(--sgds-padding-md);
+  }
 }
-a.nav-link {
+
+.nav-link {
   display: flex;
+  gap: var(--sgds-gap-xs);
   cursor: pointer;
-  color: var(--sgds-body-color);
-  border-bottom: 0.125rem solid transparent;
+  border-bottom: var(--sgds-border-width-4) solid transparent;
   min-height: 100%;
   align-items: center;
-  padding: 0;
   text-decoration: none;
-  &.active,
-  &:hover {
-    color: var(--mainnav-theme-color);
-    border-color: var(--mainnav-theme-color);
-  }
-  &:focus-visible {
-    box-shadow: 0 0 0 0.25rem rgba(89, 66, 219, 0.25);
-    outline: 0;
-  }
+  padding: var(--sgds-padding-sm) var(--mainnav-padding-x);
+  
+}
+
+.nav-link:not(.disabled).active,
+.nav-link.show {
+  color: var(--sgds-primary-color);
+  border-color: var(--sgds-border-width-4) solid var(--sgds-primary-border-color);
+}
+
+.nav-link:not(.disabled):hover {
+  color: var(--sgds-primary-color);
+}
+
+.nav-link:not(.disabled):focus,
+.nav-link:not(.disabled):focus-visible {
+  outline: 0;
+}
+
+.nav-link:not(.disabled):focus-visible {
+  box-shadow: var(--sgds-box-shadow-focus);
 }
 
 .nav-link.disabled {
-  cursor: default;
-  pointer-events: none;
-  opacity: var(--mainnav-disabled-opacity);
+  opacity: var(--sgds-opacity-50);
+  cursor: not-allowed;
 }
diff --git a/src/components/Mainnav/mainnav-item.css b/src/components/Mainnav/mainnav-item.css
index 4a8953ba..dc11f580 100644
--- a/src/components/Mainnav/mainnav-item.css
+++ b/src/components/Mainnav/mainnav-item.css
@@ -1,31 +1,117 @@
-:host {
-  --mainnav-item-border-bottom-width: 0.125rem;
+@media (min-width: 576px) {
+  :host([expand="sm"]) .nav-link {
+    padding: 0px var(--sgds-padding-md);
+  }
+
+  :host([expand="sm"]) .nav-link:not(.disabled).active {
+    color: var(--sgds-primary-color);
+    border-color: var(--sgds-border-width-4) solid var(--sgds-primary-border-color);
+  }
+}
+
+@media (min-width: 768px) {
+  :host([expand="md"]) .nav-link {
+    padding: 0px var(--sgds-padding-md);
+  }
+
+  :host([expand="md"]) .nav-link:not(.disabled).active {
+    color: var(--sgds-primary-color);
+    border-color: var(--sgds-border-width-4) solid var(--sgds-primary-border-color);
+  }
+}
+
+@media (min-width: 992px) {
+  :host([expand="lg"]) .nav-link {
+    padding: 0px var(--sgds-padding-md);
+  }
+
+  :host([expand="lg"]) .nav-link:not(.disabled).active {
+    color: var(--sgds-primary-color);
+    border-color: var(--sgds-border-width-4) solid var(--sgds-primary-border-color);
+  }
+}
+
+@media (min-width: 1200px) {
+  :host([expand="xl"]) .nav-link {
+    padding: 0px var(--sgds-padding-md);
+  }
+
+  :host([expand="xl"]) .nav-link:not(.disabled).active {
+    color: var(--sgds-primary-color);
+    border-color: var(--sgds-border-width-4) solid var(--sgds-primary-border-color);
+  }
+}
+
+@media (min-width: 1400px) {
+  :host([expand="xxl"]) .nav-link {
+    padding: 0px var(--sgds-padding-md);
+  }
+
+  :host([expand="xxl"]) .nav-link:not(.disabled).active {
+    color: var(--sgds-primary-color);
+    border-color: var(--sgds-border-width-4) solid var(--sgds-primary-border-color);
+  }
+}
+
+@media (max-width: 576px) {
+  :host([expand="sm"]) .nav-link:not(.disabled).active {
+    background-color: var(--sgds-default-bg-translucent-subtle);
+  }
+}
+
+@media (max-width: 768px) {
+  :host([expand="md"]) .nav-link:not(.disabled).active {
+    background-color: var(--sgds-default-bg-translucent-subtle);
+  }
+}
+
+@media (max-width: 992px) {
+  :host([expand="lg"]) .nav-link:not(.disabled).active {
+    background-color: var(--sgds-default-bg-translucent-subtle);
+  }
+}
+
+@media (max-width: 1200px) {
+  :host([expand="xl"]) .nav-link:not(.disabled).active {
+    background-color: var(--sgds-default-bg-translucent-subtle);
+  }
 }
-li {
-  height: 100%;
+
+@media (max-width: 1200px) {
+  :host([expand="xxl"]) .nav-link:not(.disabled).active {
+    background-color: var(--sgds-default-bg-translucent-subtle);
+  }
 }
-a.nav-link {
+
+.nav-link {
   display: flex;
   cursor: pointer;
-  color: var(--sgds-body-color);
-  border-bottom: var(--mainnav-item-border-bottom-width) solid transparent;
+  border-bottom: var(--sgds-border-width-4) solid transparent;
   min-height: 100%;
   align-items: center;
-  padding: 0;
   text-decoration: none;
-  &.active,
-  &:hover {
-    color: var(--mainnav-theme-color);
-    border-color: var(--mainnav-theme-color);
-  }
-  &:focus-visible {
-    box-shadow: 0 0 0 0.25rem rgba(89, 66, 219, 0.25);
-    outline: 0;
-  }
+  color: var(--sgds-default-color);
+  padding: var(--sgds-padding-sm) var(--mainnav-padding-x);
+}
+
+.nav-link:not(.disabled).active {
+  color: var(--sgds-primary-color);
+}
+
+.nav-link:not(.disabled):hover {
+  color: var(--sgds-primary-color);
+}
+
+.nav-link:focus,
+.nav-link:focus-visible {
+  outline: 0;
+}
+
+.nav-link:focus-visible {
+  box-shadow: var(--sgds-box-shadow-focus);
 }
 
 .nav-link.disabled {
-  cursor: default;
-  pointer-events: none;
-  opacity: var(--sgds-disabled-opacity);
+  opacity: var(--sgds-opacity-50);
+  cursor: not-allowed;
 }
diff --git a/src/components/Mainnav/mainnav.css b/src/components/Mainnav/mainnav.css
index ac984bbf..fb157892 100644
--- a/src/components/Mainnav/mainnav.css
+++ b/src/components/Mainnav/mainnav.css
@@ -1,369 +1,230 @@
-:host {
-  --mainnav-bg: transparent;
-  --mainnav-padding-x: var(--sgds-spacer-5);
-  --mainnav-padding-y: var(--sgds-spacer-0);
-  --mainnav-mobile-padding-x: var(--sgds-spacer-2);
-  --mainnav-mobile-padding-y: var(--sgds-spacer-0);
-  --mainnav-border-bottom-width: 1px;
-  --mainnav-border-bottom-color: var(--sgds-gray-400);
-  --mainnav-theme-color: var(--sgds-primary);
+nav {
+  background-color: var(--sgds-neutral-bg-inverse);
+  box-shadow: 0px 2px 2px 0px rgba(14, 14, 14, 0.08);
 }
+
 .navbar {
-  align-items: stretch;
   display: flex;
   flex-wrap: wrap;
+  align-items: stretch;
   justify-content: space-between;
-  padding: var(--mainnav-padding-y) var(--mainnav-padding-x);
+  gap: var(--sgds-gap-xs);
   position: relative;
+  padding: 0px var(--sgds-mainnav-padding-x);
+  width: 100%;
+  max-width: var(--sgds-mainnav-max-width);
   min-height: 80px;
-  background-color: var(--mainnav-bg);
-  border-bottom: var(--mainnav-border-bottom-width) solid var(--mainnav-border-bottom-color);
-  @media (max-width: 768px) {
-    padding: var(--mainnav-mobile-padding-y) var(--mainnav-mobile-padding-x);
+  margin: auto;
+}
+
+
+@media screen and (max-width: 768px) {
+  .navbar {
+    padding: 0px var(--sgds-mainnav-mobile-padding-x);
   }
 }
+
 .navbar-brand {
   display: flex;
   align-items: center;
-  color: rgba(var(--sgds-emphasis-color-rgb), 0.9);
-  font-size: 1.25rem;
-  margin-right: var(--sgds-spacer-4);
   text-decoration: none;
   white-space: nowrap;
-  padding-bottom: 0.125rem;
-  padding-top: 0.125rem;
 }
 
 .navbar-brand:focus,
-.navbar-brand:hover {
-  color: rgba(var(--sgds-emphasis-color-rgb), 0.9);
+.navbar-brand:focus-visible {
+  box-shadow: var(--sgds-box-shadow-focus);
+  outline: 0;
 }
+
 .navbar-nav {
   display: flex;
   flex-direction: column;
-  list-style: none;
-  gap: var(--sgds-spacer-4);
-  padding-left: 0;
-  padding-right: var(--sgds-spacer-4);
+  gap: var(--sgds-gap-xs);
   height: 100%;
   width: 100%;
   margin-top: 0;
   margin-bottom: 0;
 }
+
+nav > .navbar-body {
+  position: absolute;
+  z-index: 5;
+  width: 100%;
+  background-color: var(--sgds-default-bg-surface);
+  padding: var(--sgds-padding-md) 0px;
+  border-top: var(--sgds-border-width-1) solid var(--sgds-default-border-color-translucent);
+  box-shadow: 0px 2px 2px 0px rgba(14, 14, 14, 0.08);
+}
+
+nav > .navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)) {
+  padding: var(--sgds-padding-sm) var(--sgds-padding-lg);
+}
+
 .navbar-collapse {
   align-items: center;
   flex-basis: 100%;
   flex-grow: 1;
 }
+
 .navbar-toggler {
-  cursor: pointer;
-  background-color: transparent;
-  border: none;
-  /* color: var(--mainnav-color); */
-  font-size: 1.25rem;
-  line-height: 1;
-  padding: var(--sgds-spacer-1) 0.75rem;
+  align-self: center;
 }
+
 @media (prefers-reduced-motion: reduce) {
   .navbar-toggler {
     transition: none;
   }
 }
-.navbar-toggler:hover {
-  text-decoration: none;
-}
-.navbar-toggler:focus {
-  box-shadow: none;
-  outline: 0;
-  text-decoration: none;
-}
-.navbar-toggler-icon {
-  background-image: url('data:image/svg+xml,<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>');
-  background-position: 50%;
-  background-repeat: no-repeat;
-  background-size: 100%;
-  display: inline-block;
-  height: 1.5em;
-  vertical-align: middle;
-  width: 1.5em;
-}
+
 .navbar-nav-scroll {
   max-height: 75vh;
-  padding-right: 0.5rem;
   overflow-y: auto;
 }
+
 @media (min-width: 576px) {
   .navbar-expand-sm {
     flex-wrap: nowrap;
     justify-content: flex-start;
+    gap: var(--sgds-gap-xl);
   }
+
   .navbar-expand-sm .navbar-nav {
     flex-direction: row;
   }
-  /* .navbar-expand-sm .navbar-nav .dropdown-menu {
-      position: absolute;
-    } */
-  /* .navbar-expand-sm .navbar-nav .nav-link {
-      padding-left: var(--mainnav-nav-link-padding-x);
-      padding-right: var(--mainnav-nav-link-padding-x);
-    } */
+
   .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;
   }
-  /* .navbar-expand-sm .offcanvas {
-      background-color: transparent !important;
-      border: 0 !important;
-      flex-grow: 1;
-      height: auto !important;
-      position: static;
-      transform: none !important;
-      transition: none;
-      visibility: visible !important;
-      width: auto !important;
-      z-index: auto;
-    }
-    .navbar-expand-sm .offcanvas .offcanvas-header {
-      display: none;
-    }
-    .navbar-expand-sm .offcanvas .offcanvas-body {
-      display: flex;
-      flex-grow: 0;
-      overflow-y: visible;
-      padding: 0;
-    } */
 }
 @media (min-width: 768px) {
   .navbar-expand-md {
     flex-wrap: nowrap;
     justify-content: flex-start;
+    gap: var(--sgds-gap-xl);
   }
+
   .navbar-expand-md .navbar-nav {
     flex-direction: row;
   }
-  /* .navbar-expand-md .navbar-nav .dropdown-menu {
-      position: absolute;
-    } */
-  /* .navbar-expand-md .navbar-nav .nav-link {
-      padding-left: var(--mainnav-nav-link-padding-x);
-      padding-right: var(--mainnav-nav-link-padding-x);
-    } */
+
   .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;
   }
-  /* 
-    .navbar-expand-md .offcanvas {
-      background-color: transparent !important;
-      border: 0 !important;
-      flex-grow: 1;
-      height: auto !important;
-      position: static;
-      transform: none !important;
-      transition: none;
-      visibility: visible !important;
-      width: auto !important;
-      z-index: auto;
-    }
-    .navbar-expand-md .offcanvas .offcanvas-header {
-      display: none;
-    }
-    .navbar-expand-md .offcanvas .offcanvas-body {
-      display: flex;
-      flex-grow: 0;
-      overflow-y: visible;
-      padding: 0;
-    } */
 }
 @media (min-width: 992px) {
   .navbar-expand-lg {
     flex-wrap: nowrap;
     justify-content: flex-start;
+    gap: var(--sgds-gap-xl);
   }
+
   .navbar-expand-lg .navbar-nav {
     flex-direction: row;
   }
-  /* .navbar-expand-lg .navbar-nav .dropdown-menu {
-      position: absolute;
-    }
-    .navbar-expand-lg .navbar-nav .nav-link {
-      padding-left: var(--mainnav-nav-link-padding-x);
-      padding-right: var(--mainnav-nav-link-padding-x);
-    } */
+
   .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;
   }
-  /* .navbar-expand-lg .offcanvas {
-      background-color: transparent !important;
-      border: 0 !important;
-      flex-grow: 1;
-      height: auto !important;
-      position: static;
-      transform: none !important;
-      transition: none;
-      visibility: visible !important;
-      width: auto !important;
-      z-index: auto;
-    }
-    .navbar-expand-lg .offcanvas .offcanvas-header {
-      display: none;
-    }
-    .navbar-expand-lg .offcanvas .offcanvas-body {
-      display: flex;
-      flex-grow: 0;
-      overflow-y: visible;
-      padding: 0;
-    } */
 }
 @media (min-width: 1200px) {
   .navbar-expand-xl {
     flex-wrap: nowrap;
     justify-content: flex-start;
+    gap: var(--sgds-gap-xl);
   }
-  /* .navbar-expand-xl .navbar-nav {
-      flex-direction: row;
-    }
-    .navbar-expand-xl .navbar-nav .dropdown-menu {
-      position: absolute;
-    } */
+  
   .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;
   }
-  /* .navbar-expand-xl .offcanvas {
-      background-color: transparent !important;
-      border: 0 !important;
-      flex-grow: 1;
-      height: auto !important;
-      position: static;
-      transform: none !important;
-      transition: none;
-      visibility: visible !important;
-      width: auto !important;
-      z-index: auto;
-    }
-    .navbar-expand-xl .offcanvas .offcanvas-header {
-      display: none;
-    }
-    .navbar-expand-xl .offcanvas .offcanvas-body {
-      display: flex;
-      flex-grow: 0;
-      overflow-y: visible;
-      padding: 0;
-    } */
 }
 @media (min-width: 1400px) {
   .navbar-expand-xxl {
     flex-wrap: nowrap;
     justify-content: flex-start;
+    gap: var(--sgds-gap-xl);
   }
+
   .navbar-expand-xxl .navbar-nav {
     flex-direction: row;
   }
-  /* .navbar-expand-xxl .navbar-nav .dropdown-menu {
-      position: absolute;
-    }
-    .navbar-expand-xxl .navbar-nav .nav-link {
-      padding-left: var(--mainnav-nav-link-padding-x);
-      padding-right: var(--mainnav-nav-link-padding-x);
-    } */
+
   .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-xxl .offcanvas {
-      background-color: transparent !important;
-      border: 0 !important;
-      flex-grow: 1;
-      height: auto !important;
-      position: static;
-      transform: none !important;
-      transition: none;
-      visibility: visible !important;
-      width: auto !important;
-      z-index: auto;
-    }
-    .navbar-expand-xxl .offcanvas .offcanvas-header {
-      display: none;
-    }
-    .navbar-expand-xxl .offcanvas .offcanvas-body {
-      display: flex;
-      flex-grow: 0;
-      overflow-y: visible;
-      padding: 0;
-    } */
 }
+
 .navbar-expand {
   flex-wrap: nowrap;
   justify-content: flex-start;
+  gap: var(--sgds-gap-xl);
 }
 .navbar-expand .navbar-nav {
   flex-direction: row;
 }
-/* .navbar-expand .navbar-nav .dropdown-menu {
-    position: absolute;
-  }
-  .navbar-expand .navbar-nav .nav-link {
-    padding-left: var(--mainnav-nav-link-padding-x);
-    padding-right: var(--mainnav-nav-link-padding-x);
-  } */
+
 .navbar-expand .navbar-nav-scroll {
   overflow: visible;
 }
+
 .navbar-expand .navbar-collapse {
   display: flex !important;
   flex-basis: auto;
 }
+
 .navbar-expand .navbar-toggler {
   display: none;
 }
-.order-first {
-  order: -1 !important;
-}
-.order-1 {
-  order: 1 !important;
-}
-.order-2 {
-  order: 2 !important;
-}
-.order-last {
-  order: 6 !important;
-}
 
 /* slot */
 
@@ -378,10 +239,10 @@ slot[name="non-collapsible"] {
   display: flex;
   margin-left: auto;
   align-items: stretch;
-  gap: var(--sgds-spacer-4);
+  gap: var(--sgds-gap-xs);
 }
 
 /* there is no wildcard selector for element tag names in css */
 .slot-end::slotted(:not([name$="-mainnav-item"]):not([name$="-mainnav-dropdown"])) {
   align-self: center;
-}
+}
\ No newline at end of file
diff --git a/src/components/Mainnav/sgds-mainnav-dropdown.ts b/src/components/Mainnav/sgds-mainnav-dropdown.ts
index bcbe4614..c93e5522 100644
--- a/src/components/Mainnav/sgds-mainnav-dropdown.ts
+++ b/src/components/Mainnav/sgds-mainnav-dropdown.ts
@@ -1,22 +1,25 @@
 import { html } from "lit";
-import { property, queryAsync } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
-import { ref } from "lit/directives/ref.js";
-import { DropdownListElement } from "../../base/dropdown-list-element";
 import genId from "../../utils/generateId";
 import dropdownStyle from "../Dropdown/dropdown.css";
 import dropdownMenuStyle from "../Dropdown/dropdown-menu.css";
 import mainnavDropdownStyle from "./mainnav-dropdown.css";
+import SgdsDropdown from "../Dropdown/sgds-dropdown";
+import SgdsDropdownItem from "../Dropdown/sgds-dropdown-item";
+import SgdsIcon from "../Icon/sgds-icon";
+import SgdsElement from "../../base/sgds-element";
 /**
  * @slot default - The menu items. Pass in sgds-dropdown-item as the menu items
  * @slot toggler - The content of the toggler to pass in html content. `togglerText` property takes precedence over this slot when both are defined.
  */
-export class SgdsMainnavDropdown extends DropdownListElement {
-  static styles = [...DropdownListElement.styles, dropdownStyle, dropdownMenuStyle, mainnavDropdownStyle];
-
-  /**@internal */
-  @queryAsync("a")
-  private dropdownRef: Promise<HTMLAnchorElement>;
+export class SgdsMainnavDropdown extends SgdsElement {
+  static styles = [...SgdsElement.styles, dropdownStyle, dropdownMenuStyle, mainnavDropdownStyle];
+  static dependencies = {
+    "sgds-dropdown": SgdsDropdown,
+    "sgds-dropdown-item": SgdsDropdownItem,
+    "sgds-icon": SgdsIcon
+  };
 
   /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */
   private togglerId: string = genId("dropdown", "button");
@@ -29,51 +32,40 @@ export class SgdsMainnavDropdown extends DropdownListElement {
   @property({ type: Boolean })
   active = false;
 
-  async firstUpdated() {
-    super.firstUpdated();
-    if (this.menuIsOpen) {
-      await this.dropdownRef;
-      this.showMenu();
-    }
-  }
+  /** When true,  applies active styles on the dropdown button */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
 
   render() {
     return html`
-      <div class="sgds nav-item dropdown">
+      <sgds-dropdown
+        modifierOpt=${[
+          {
+            name: "offset",
+            options: {
+              offset: [0, 0]
+            }
+          }
+        ]}
+        ?disabled=${this.disabled}
+      >
         <a
           class="${classMap({
-            "dropdown-toggle": true,
             "nav-link": true,
             active: this.active,
             disabled: this.disabled
           })}"
-          ?disabled=${this.disabled}
-          aria-expanded="${this.menuIsOpen}"
-          ${ref(this.myDropdown)}
-          @click=${() => this.toggleMenu()}
+          aria-disabled=${this.disabled ? "true" : "false"}
           id=${this.togglerId}
           tabindex=${this.disabled ? "-1" : "0"}
           role="button"
+          slot="toggler"
         >
           ${this.togglerText ? this.togglerText : html`<slot name="toggler"></slot>`}
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            class="bi bi-chevron-down"
-            viewBox="0 0 16 16"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
-            />
-          </svg>
+          <sgds-icon name="chevron-down"></sgds-icon>
         </a>
-        <div class="dropdown-menu" role="menu" part="menu">
-          <slot id="default" @click=${this.handleSelectSlot}></slot>
-        </div>
-      </div>
+        <slot></slot>
+      </sgds-dropdown>
     `;
   }
 }
diff --git a/src/components/Mainnav/sgds-mainnav.ts b/src/components/Mainnav/sgds-mainnav.ts
index cd379ee2..129cd7a1 100644
--- a/src/components/Mainnav/sgds-mainnav.ts
+++ b/src/components/Mainnav/sgds-mainnav.ts
@@ -1,5 +1,5 @@
 import { html } from "lit";
-import { property, query, state } from "lit/decorators.js";
+import { property, query, queryAssignedElements, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import SgdsElement from "../../base/sgds-element";
 import { animateTo, shimKeyframesHeightAuto, stopAnimations } from "../../utils/animate";
@@ -8,7 +8,10 @@ import { LG_BREAKPOINT, MD_BREAKPOINT, SM_BREAKPOINT, XL_BREAKPOINT, XXL_BREAKPO
 import { waitForEvent } from "../../utils/event";
 import genId from "../../utils/generateId";
 import { watch } from "../../utils/watch";
+import SgdsMainnavItem from "./sgds-mainnav-item";
 import mainnavStyle from "./mainnav.css";
+import SgdsMainnavDropdown from "./sgds-mainnav-dropdown";
+import SgdsIcon from "../Icon/sgds-icon";
 export type MainnavExpandSize = "sm" | "md" | "lg" | "xl" | "xxl" | "always" | "never";
 
 const SIZES = {
@@ -29,27 +32,28 @@ const SIZES = {
  * @event sgds-hide - Emitted on hide. Only for collapsed menu.
  * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.
  *
- * @slot - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.
+ * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.
  * @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 non-collapsible - Elements in this slot will not be collapsed
  *
- * @cssproperty --mainnav-bg - Navbar's background color.
- * @cssproperty --mainnav-padding-x - left and right padding for browser width > 768px
- * @cssproperty --mainnav-padding-y - top and bottom padding for browser width > 768px
- * @cssproperty --mainnav-mobile-padding-x - left and right padding for browser width < 768px
- * @cssproperty --mainnav-mobile-padding-y - top and bottom padding for browser width < 768px
- * @cssproperty --mainnav-border-bottom-width - bottom border width
- * @cssproperty --mainnav-border-bottom-color - border-bottom width color
- * @cssproperty --mainnav-theme-color - The theme color of mainnav affecting the hover and active states of items in the mainnav
  */
 export class SgdsMainnav extends SgdsElement {
   static styles = [...SgdsElement.styles, mainnavStyle];
+  static dependencies = {
+    "sgds-icon": SgdsIcon
+  };
 
+  /** @internal */
+  @query("nav") nav: HTMLElement;
+  /** @internal */
+  @query(".navbar") navbar: HTMLElement;
   /** @internal */
   @query(".navbar-toggler") header: HTMLElement;
   /** @internal */
   @query(".navbar-body") body: HTMLElement;
+  /** @internal */
+  @query("slot[name='non-collapsible']") nonCollapsibleSlot: HTMLSlotElement;
 
   constructor() {
     super();
@@ -61,6 +65,12 @@ export class SgdsMainnav extends SgdsElement {
         this.body ? (this.body.hidden = true) : null;
         this.expanded = false;
       }
+
+      if (newBreakpointReachedValue) {
+        this._handleMobileNav();
+      } else {
+        this._handleDesktopNav();
+      }
     });
   }
 
@@ -81,12 +91,41 @@ export class SgdsMainnav extends SgdsElement {
   /** @internal */
   @state()
   expanded = false;
+
+  /** @internal */
+  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];
+
+  /** @internal */
+  @queryAssignedElements({ slot: "end" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];
+
+  /** @internal */
+  get defaultSlotitems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {
+    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== "undefined") as
+      | SgdsMainnavItem[]
+      | SgdsMainnavDropdown[];
+  }
+
+  /** @internal */
+  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {
+    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== "undefined") as
+      | SgdsMainnavItem[]
+      | SgdsMainnavDropdown[];
+  }
+
   firstUpdated() {
     if (this.breakpointReached && this.body) {
       this.expanded = false;
       this.body.hidden = true;
+      this._handleMobileNav();
     }
+
+    const items = [...this.defaultSlotitems, ...this.endSlotItems] as SgdsMainnavItem[] | SgdsMainnavDropdown[];
+
+    items.forEach((item: SgdsMainnavItem | SgdsMainnavDropdown) => {
+      item.setAttribute("expand", this.expand);
+    });
   }
+
   private handleSummaryClick() {
     if (this.expanded) {
       this.hide();
@@ -97,6 +136,14 @@ export class SgdsMainnav extends SgdsElement {
     this.header.focus();
   }
 
+  private _handleMobileNav() {
+    this.nav?.appendChild(this.body);
+  }
+
+  private _handleDesktopNav() {
+    this.navbar?.insertBefore(this.body, this.nonCollapsibleSlot);
+  }
+
   private async _animateToShow() {
     const sgdsShow = this.emit("sgds-show", { cancelable: true });
     if (sgdsShow.defaultPrevented) {
@@ -171,35 +218,34 @@ export class SgdsMainnav extends SgdsElement {
 
   render() {
     this.breakpointReached = window.innerWidth < SIZES[this.expand];
-    const collapseClass = "navbar-body navbar-collapse order-2";
+
     return html`
-      <nav
-        class="sgds navbar navbar-light
-        ${this._expandClass()}"
-      >
-        <a class="navbar-brand  order-first" href=${this.brandHref} aria-label="brand-link">
-          <slot name="brand"></slot>
-        </a>
-        <slot name="non-collapsible" class="${this.breakpointReached ? "order-1" : "order-last"}"></slot>
-        <button
-          class="navbar-toggler order-1 "
-          type="button"
-          @click=${this.handleSummaryClick}
-          aria-controls="${this.collapseId}"
-          aria-expanded="${this.expanded}"
-          aria-label="Toggle navigation"
-        >
-          <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class=${collapseClass} id=${this.collapseId}>
-          <div class="navbar-nav navbar-nav-scroll">
-            <slot></slot>
-            <slot
-              name="end"
-              class=${classMap({ "slot-end": !this.breakpointReached })}
-              @slotchange=${this._handleSlotChange}
-            ></slot>
+      <nav>
+        <div class="navbar ${this._expandClass()}">
+          <a class="navbar-brand" href=${this.brandHref} aria-label="brand-link">
+            <slot name="brand"></slot>
+          </a>
+          <div class="navbar-body navbar-collapse" id=${this.collapseId}>
+            <div class="navbar-nav navbar-nav-scroll">
+              <slot></slot>
+              <slot
+                name="end"
+                class=${classMap({ "slot-end": !this.breakpointReached })}
+                @slotchange=${this._handleSlotChange}
+              ></slot>
+            </div>
           </div>
+          <slot name="non-collapsible"></slot>
+          <sgds-icon-button
+            name="menu"
+            variant="ghost"
+            size="sm"
+            class="navbar-toggler"
+            @click=${this.handleSummaryClick}
+            aria-controls="${this.collapseId}"
+            aria-expanded="${this.expanded}"
+            aria-label="Toggle navigation"
+          ></sgds-icon-button>
         </div>
       </nav>
     `;

From 336dc1c02ae9d85853533fd2d5240f4fea04d089 Mon Sep 17 00:00:00 2001
From: Tong Hau <tonghau_Lee@hive.gov.sg>
Date: Thu, 26 Dec 2024 13:34:05 +0800
Subject: [PATCH 07/16] chore(mainnav): fix text case

---
 test/mainnav.test.ts | 167 +++++++++++++++++++++++--------------------
 1 file changed, 88 insertions(+), 79 deletions(-)

diff --git a/test/mainnav.test.ts b/test/mainnav.test.ts
index d6dc9f28..f02e1865 100644
--- a/test/mainnav.test.ts
+++ b/test/mainnav.test.ts
@@ -14,38 +14,40 @@ describe("sgds-mainnav", () => {
     const el = await fixture(html`<sgds-mainnav></sgds-mainnav>`);
     assert.shadowDom.equal(
       el,
-      `<nav class="navbar navbar-expand-lg navbar-light sgds">
-       <a
-         aria-label="brand-link"
-         class="navbar-brand order-first"
-         href=""
-       >
-         <slot name="brand">
-       </a>
-       <slot
-         class="order-1"
-         name="non-collapsible"
-       >
-       </slot>
-       <button
-         aria-expanded="false"
-         aria-label="Toggle navigation"
-         class="navbar-toggler order-1"
-         type="button"
-       >
-       <span class="navbar-toggler-icon"></span>
-       </button>
-       <div
-         class="navbar-body navbar-collapse order-2"
-         hidden=""
-       >
-         <div class="navbar-nav navbar-nav-scroll">
-           <slot>
-           </slot>
-          <slot name="end">
-          </slot>
-         </div>
+      `<nav>
+        <div class="navbar navbar-expand-lg">
+          <a
+            aria-label="brand-link"
+            class="navbar-brand"
+            href=""
+          >
+            <slot name="brand"></slot>
+          </a>
+          <slot name="non-collapsible"></slot>
+          <sgds-icon-button
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+            class="navbar-toggler"
+            name="menu"
+            size="sm"
+            target="_self"
+            variant="ghost"
+          >
+          </sgds-icon-button>
+        </div>
+        <div
+          class="navbar-body navbar-collapse"
+          hidden=""
+        >
+          <div class="navbar-nav navbar-nav-scroll">
+            <slot>
+            </slot>
+            <slot name="end">
+            </slot>
+          </div>
+        </div>
        </div>
+      </nav>
     `,
       { ignoreAttributes: ["id", "aria-controls"] }
     );
@@ -53,7 +55,7 @@ describe("sgds-mainnav", () => {
   it("expect div.collapse's id to equal to button's aria-controls", async () => {
     const el = await fixture(html`<sgds-mainnav></sgds-mainnav>`);
     const collapse = el.shadowRoot?.querySelector("div.navbar-body");
-    const button = el.shadowRoot?.querySelector("button");
+    const button = el.shadowRoot?.querySelector("sgds-icon-button");
     expect(collapse?.getAttribute("id")).to.equal(button?.getAttribute("aria-controls"));
   });
   it("brandHref props forwards to a.navbar-brand  href attribute", async () => {
@@ -67,22 +69,22 @@ describe("sgds-mainnav", () => {
   //   expect(el.shadowRoot?.querySelector(".collapse.navbar-collapse.order-4")).not.to.exist;
   // });
 
-  it("when expand=always, nav class has .navbar-expand", async () => {
+  it("when expand=always, navbar class has .navbar-expand", async () => {
     const el = await fixture(html`<sgds-mainnav expand="always"></sgds-mainnav>`);
-    expect(el.shadowRoot?.querySelector("nav.sgds.navbar")).to.have.class("navbar-expand");
-    const classList = el.shadowRoot?.querySelector("nav.sgds.navbar")?.classList.value;
+    expect(el.shadowRoot?.querySelector(".navbar")).to.have.class("navbar-expand");
+    const classList = el.shadowRoot?.querySelector(".navbar")?.classList.value;
     expect(/navbar-expand/.test(classList as string)).to.be.true;
   });
-  it("when expand=never, nav class does not have .navbar-expand", async () => {
+  it("when expand=never, navbar class does not have .navbar-expand", async () => {
     const el = await fixture(html`<sgds-mainnav expand="never"></sgds-mainnav>`);
-    const classList = el.shadowRoot?.querySelector("nav.sgds.navbar")?.classList.value;
+    const classList = el.shadowRoot?.querySelector(".navbar")?.classList.value;
     expect(/navbar-expand/.test(classList as string)).to.be.false;
   });
   const testSizes: MainnavExpandSize[] = ["sm", "md", "lg", "xl", "xxl"];
   testSizes.forEach(size => {
-    it(`when expand=${size}, nav class have .navbar-expand=${size}`, async () => {
+    it(`when expand=${size}, navbar class have .navbar-expand=${size}`, async () => {
       const el = await fixture(html`<sgds-mainnav expand=${size}></sgds-mainnav>`);
-      const classList = el.shadowRoot?.querySelector("nav.sgds.navbar")?.classList.value;
+      const classList = el.shadowRoot?.querySelector(".navbar")?.classList.value;
       expect(/navbar-expand/.test(classList as string)).to.be.true;
       expect(classList).to.contain(`navbar-expand-${size}`);
     });
@@ -93,7 +95,7 @@ describe("sgds-mainnav", () => {
     const mainNavCollapse = el.shadowRoot?.querySelector(".navbar-collapse");
     await el.updateComplete;
     expect(mainNavCollapse).to.have.attribute("hidden");
-    const toggler = el.shadowRoot?.querySelector("button.navbar-toggler") as HTMLButtonElement;
+    const toggler = el.shadowRoot?.querySelector("sgds-icon-button.navbar-toggler") as HTMLButtonElement;
     expect(toggler.getAttribute("aria-expanded")).to.equal("false");
     toggler?.click();
     await nextFrame();
@@ -110,10 +112,11 @@ describe("sgds-mainnav", () => {
   // initial window.innerWidth = 800
   // LG_BREAKPOINT = 992
   // since window.innerWidth < LG_BREAKPOINT --> expect non-collapsible slot to be .order-2 (see first test)
-  it("when expand=lg and window resize event occurs to above breakpoint, it changes order of non-collapsible slot, and end slot has class .slot-end", async () => {
+  it("when expand=lg and window resize event occurs to above breakpoint, it inserts .navbar-body before non-collapsible slot, and end slot has class .slot-end", async () => {
     const el = await fixture<SgdsMainnav>(html`<sgds-mainnav expand="lg"></sgds-mainnav>`);
     await el.updateComplete;
-    expect(el.shadowRoot?.querySelector("slot[name='non-collapsible']")).to.have.class("order-1");
+    expect(el.shadowRoot?.querySelector("nav > .navbar-body")).to.exist;
+    expect(el.shadowRoot?.querySelector("nav > .navbar .navbar-body")).not.to.exist;
     expect(el.shadowRoot?.querySelector("slot[name='end']")).not.to.have.class("slot-end");
     Object.defineProperty(window, "innerWidth", {
       writable: true,
@@ -122,14 +125,16 @@ describe("sgds-mainnav", () => {
     });
     window.dispatchEvent(new Event("resize"));
     await el.updateComplete;
-    expect(el.shadowRoot?.querySelector('slot[name="non-collapsible"]')).to.have.class("order-last");
+    expect(el.shadowRoot?.querySelector("nav > .navbar-body")).not.to.exist;
+    expect(el.shadowRoot?.querySelector("nav > .navbar .navbar-body")).to.exist;
     expect(el.shadowRoot?.querySelector("slot[name='end']")).to.have.class("slot-end");
   });
   //SM_BREAKPOINT = 576
   // now window.innerWidth = 1000
-  it("when expand=sm and window resize event occurs to above breakpoint, it changes order of non-collapsible slot and end slot has class slot-end ", async () => {
+  it("when expand=sm and window resize event occurs to above breakpoint, it inserts .navbar-body before non-collapsible slot, and end slot has class slot-end ", async () => {
     const el = await fixture<SgdsMainnav>(html`<sgds-mainnav expand="sm"></sgds-mainnav>`);
-    expect(el.shadowRoot?.querySelector("slot[name='non-collapsible']")).to.have.class("order-last");
+    expect(el.shadowRoot?.querySelector("nav > .navbar-body")).not.to.exist;
+    expect(el.shadowRoot?.querySelector("nav > .navbar .navbar-body")).to.exist;
     expect(el.shadowRoot?.querySelector("slot[name='end']")).to.have.class("slot-end");
     Object.defineProperty(window, "innerWidth", {
       writable: true,
@@ -138,13 +143,15 @@ describe("sgds-mainnav", () => {
     });
     window.dispatchEvent(new Event("resize"));
     await el.updateComplete;
-    expect(el.shadowRoot?.querySelector('slot[name="non-collapsible"]')).to.have.class("order-1");
+    expect(el.shadowRoot?.querySelector("nav > .navbar-body")).to.exist;
+    expect(el.shadowRoot?.querySelector("nav > .navbar .navbar-body")).not.to.exist;
     expect(el.shadowRoot?.querySelector("slot[name='end']")).not.to.have.class("slot-end");
   });
   // now window.innerWidth = 575
-  it("when expand=always and window resize event occurs, it NEVER changes order of non-collapsible slot and end slot ALWAYS have slot-end ", async () => {
+  it("when expand=always and window resize event occurs, it NEVER changes the position of .navbar-body, and end slot ALWAYS have slot-end ", async () => {
     const el = await fixture<SgdsMainnav>(html`<sgds-mainnav expand="always"></sgds-mainnav>`);
-    expect(el.shadowRoot?.querySelector("slot[name='non-collapsible']")).to.have.class("order-last");
+    expect(el.shadowRoot?.querySelector("nav > .navbar-body")).not.to.exist;
+    expect(el.shadowRoot?.querySelector("nav > .navbar .navbar-body")).to.exist;
     expect(el.shadowRoot?.querySelector("slot[name='end']")).to.have.class("slot-end");
 
     Object.defineProperty(window, "innerWidth", {
@@ -154,7 +161,8 @@ describe("sgds-mainnav", () => {
     });
     window.dispatchEvent(new Event("resize"));
     await el.updateComplete;
-    expect(el.shadowRoot?.querySelector('slot[name="non-collapsible"]')).to.have.class("order-last");
+    expect(el.shadowRoot?.querySelector("nav > .navbar-body")).not.to.exist;
+    expect(el.shadowRoot?.querySelector("nav > .navbar .navbar-body")).to.exist;
     expect(el.shadowRoot?.querySelector("slot[name='end']")).to.have.class("slot-end");
 
     Object.defineProperty(window, "innerWidth", {
@@ -164,11 +172,13 @@ describe("sgds-mainnav", () => {
     });
     window.dispatchEvent(new Event("resize"));
     await el.updateComplete;
-    expect(el.shadowRoot?.querySelector('slot[name="non-collapsible"]')).to.have.class("order-last");
+    expect(el.shadowRoot?.querySelector("nav > .navbar-body")).not.to.exist;
+    expect(el.shadowRoot?.querySelector("nav > .navbar .navbar-body")).to.exist;
   });
-  it("when expand=never and window resize event occurs, it NEVER changes order of non-collapsible slot,  and end slot NEVER has class slot-end", async () => {
+  it("when expand=never and window resize event occurs, it NEVER changes the position of .navbar-body,  and end slot NEVER has class slot-end", async () => {
     const el = await fixture<SgdsMainnav>(html`<sgds-mainnav expand="never"></sgds-mainnav>`);
-    expect(el.shadowRoot?.querySelector("slot[name='non-collapsible']")).to.have.class("order-1");
+    expect(el.shadowRoot?.querySelector("nav > .navbar-body")).to.exist;
+    expect(el.shadowRoot?.querySelector("nav > .navbar .navbar-body")).not.to.exist;
     expect(el.shadowRoot?.querySelector("slot[name='end']")).not.to.have.class("slot-end");
 
     Object.defineProperty(window, "innerWidth", {
@@ -178,7 +188,8 @@ describe("sgds-mainnav", () => {
     });
     window.dispatchEvent(new Event("resize"));
     await el.updateComplete;
-    expect(el.shadowRoot?.querySelector('slot[name="non-collapsible"]')).to.have.class("order-1");
+    expect(el.shadowRoot?.querySelector("nav > .navbar-body")).to.exist;
+    expect(el.shadowRoot?.querySelector("nav > .navbar .navbar-body")).not.to.exist;
     expect(el.shadowRoot?.querySelector("slot[name='end']")).not.to.have.class("slot-end");
 
     Object.defineProperty(window, "innerWidth", {
@@ -188,7 +199,8 @@ describe("sgds-mainnav", () => {
     });
     window.dispatchEvent(new Event("resize"));
     await el.updateComplete;
-    expect(el.shadowRoot?.querySelector('slot[name="non-collapsible"]')).to.have.class("order-1");
+    expect(el.shadowRoot?.querySelector("nav > .navbar-body")).to.exist;
+    expect(el.shadowRoot?.querySelector("nav > .navbar .navbar-body")).not.to.exist;
     expect(el.shadowRoot?.querySelector("slot[name='end']")).not.to.have.class("slot-end");
   });
 
@@ -235,32 +247,29 @@ describe("sgds-mainnav-dropdown", () => {
     const el = await fixture(html`<sgds-mainnav-dropdown togglerText="test"></sgds-mainnav-dropdown>`);
     assert.shadowDom.equal(
       el,
-      ` <div class="nav-item dropdown sgds">
-      <a
-        class="nav-link dropdown-toggle"
-        aria-expanded="false"
-        tabindex="0"
-        role="button"
-        >
-        test
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"    
-          height="16"
-          fill="currentColor"
-          class="bi bi-chevron-down"
-          viewBox="0 0 16 16"
+      `
+      <sgds-dropdown
+        drop="down"
+        modifieropt="[object Object]"
+      >
+        <a
+          aria-disabled="false"
+          class="nav-link"
+          role="button"
+          slot="toggler"
+          tabindex="0"
         >
-          <path
-            fill-rule="evenodd"
-            d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
-          />
-        </svg>
-      </a>
-      <div class="dropdown-menu" role="menu" part="menu">
-        <slot></slot>
-      </div>
-    </div>`,
+          test
+          <sgds-icon
+            name="chevron-down"
+            size="lg"
+          >
+          </sgds-icon>  
+        </a>
+        <slot>
+        </slot>
+      </sgds-dropdown>
+      `,
       { ignoreAttributes: ["id"] }
     );
   });

From 0d2befc90fbd66393f47bdac0d3d2a236515caf8 Mon Sep 17 00:00:00 2001
From: Tong Hau <tonghau_Lee@hive.gov.sg>
Date: Thu, 26 Dec 2024 13:35:25 +0800
Subject: [PATCH 08/16] chore(*): add shared css variables for masthead and
 mainnav

---
 src/components/Masthead/masthead.css | 6 +++---
 src/themes/root.css                  | 5 +++++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/Masthead/masthead.css b/src/components/Masthead/masthead.css
index 9f21a5ee..32ad4f4e 100644
--- a/src/components/Masthead/masthead.css
+++ b/src/components/Masthead/masthead.css
@@ -33,10 +33,10 @@ a:hover {
 
 .container {
   width: 100%;
-  max-width: var(--masthead-max-width);
+  max-width: var(--sgds-mainnav-max-width);
   margin-left: auto;
   margin-right: auto;
-  padding: 0.25rem var(--masthead-padding-x);
+  padding: 0.25rem var(--sgds-mainnav-padding-x);
 }
 
 .sg-crest {
@@ -152,7 +152,7 @@ a.trusted-websites-link:hover {
 
 @media screen and (max-width: 768px) {
   .container {
-    --masthead-padding-x: 1rem;
+    padding: 0.25rem var(--sgds-mainnav-mobile-padding-x);
   }
 
   .sgds-masthead-content .content-grid {
diff --git a/src/themes/root.css b/src/themes/root.css
index e3b83dc7..a92d439c 100644
--- a/src/themes/root.css
+++ b/src/themes/root.css
@@ -299,4 +299,9 @@
 
   --sgds-box-shadow-focus: 0px 0px 0px 4px var(--sgds-blue-400);
   --sgds-form-box-shadow-focus: var(--sgds-box-shadow-focus);
+
+  /* Masthead and Mainnav Max Width and Padding */
+  --sgds-mainnav-max-width: 1440px;
+  --sgds-mainnav-padding-x: 2rem;
+  --sgds-mainnav-mobile-padding-x: 1.25rem;
 }

From b5bc7577d64e8173dfcf51d84d0acdc4b783f48a Mon Sep 17 00:00:00 2001
From: Tong Hau <tonghau_Lee@hive.gov.sg>
Date: Thu, 26 Dec 2024 13:36:22 +0800
Subject: [PATCH 09/16] chore(dropdown): disable click handler when dropdown is
 disabled

---
 src/components/Dropdown/sgds-dropdown.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Dropdown/sgds-dropdown.ts b/src/components/Dropdown/sgds-dropdown.ts
index 1e7f4b23..1c849655 100644
--- a/src/components/Dropdown/sgds-dropdown.ts
+++ b/src/components/Dropdown/sgds-dropdown.ts
@@ -57,6 +57,14 @@ export class SgdsDropdown extends DropdownListElement {
     button.focus();
   }
 
+  private _handleClick() {
+    if (this.disabled) {
+      return;
+    }
+
+    this.toggleMenu();
+  }
+
   async connectedCallback() {
     super.connectedCallback();
     this.addEventListener("sgds-hide", this._handleCloseMenu);
@@ -90,7 +98,7 @@ export class SgdsDropdown extends DropdownListElement {
         <div
           class="toggler-container"
           ${ref(this.myDropdown)}
-          @click=${() => this.toggleMenu()}
+          @click=${this._handleClick}
           aria-expanded="${this.menuIsOpen}"
           aria-haspopup="menu"
         >

From 8f1fb59ee99aad2c157cece7a316539a95a7bb52 Mon Sep 17 00:00:00 2001
From: Tong Hau <tonghau_Lee@hive.gov.sg>
Date: Thu, 26 Dec 2024 13:38:19 +0800
Subject: [PATCH 10/16] chore(dropdown): add 100 percent height for mainnav
 usage

---
 src/components/Dropdown/dropdown.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Dropdown/dropdown.css b/src/components/Dropdown/dropdown.css
index 4247275e..658bae07 100644
--- a/src/components/Dropdown/dropdown.css
+++ b/src/components/Dropdown/dropdown.css
@@ -1,3 +1,4 @@
-.dropdown{
+.dropdown {
   display:flex;
-}
+  height: 100%;
+}
\ No newline at end of file

From c732c9c629afdbaff7be4dfc0f19675f13172692 Mon Sep 17 00:00:00 2001
From: Tong Hau <tonghau_Lee@hive.gov.sg>
Date: Thu, 26 Dec 2024 13:40:03 +0800
Subject: [PATCH 11/16] chore(dropdown element): update dropdown config
 strategy to fixed position

---
 src/base/dropdown-element.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/base/dropdown-element.ts b/src/base/dropdown-element.ts
index e253925f..8e970341 100644
--- a/src/base/dropdown-element.ts
+++ b/src/base/dropdown-element.ts
@@ -89,6 +89,7 @@ export class DropdownElement extends SgdsElement {
         //working
         this.dropdownConfig = {
           placement: "bottom-start",
+          strategy: "fixed",
           modifiers: !this.noFlip
             ? this.modifierOpt
             : [

From 0dfbe4671fda381ea6128005e3c1197f5a15e378 Mon Sep 17 00:00:00 2001
From: Tong Hau <tonghau_Lee@hive.gov.sg>
Date: Thu, 26 Dec 2024 14:06:22 +0800
Subject: [PATCH 12/16] chore(progress bar): update name from progress to
 progress bar

---
 .../apps/angular-app/src/app/app.component.html |  2 +-
 cypress/apps/angular-app/src/app/app.module.ts  |  4 ++--
 .../components/progress/progress.component.html |  3 ---
 .../components/progress/progress.component.ts   |  7 -------
 .../progressbar/progressbar.component.html      |  3 +++
 .../progressbar/progressbar.component.ts        |  7 +++++++
 .../next-app/src/app/components/Progress.tsx    | 14 --------------
 .../next-app/src/app/components/ProgressBar.tsx | 14 ++++++++++++++
 cypress/apps/next-app/src/app/page.tsx          |  6 +++---
 cypress/apps/react-app/src/App.js               |  4 ++--
 .../apps/react-app/src/components/Progress.jsx  | 17 -----------------
 .../react-app/src/components/ProgressBar.jsx    | 14 ++++++++++++++
 cypress/apps/vue-app/src/App.vue                |  4 ++--
 .../{Progress.vue => ProgressBar.vue}           |  0
 .../{Progress => ProgressBar}/index.ts          |  0
 .../{Progress => ProgressBar}/progress-bar.css  |  0
 .../sgds-progress-bar.ts                        |  0
 src/components/index.ts                         |  2 +-
 src/index.ts                                    |  2 +-
 19 files changed, 50 insertions(+), 53 deletions(-)
 delete mode 100644 cypress/apps/angular-app/src/components/progress/progress.component.html
 delete mode 100644 cypress/apps/angular-app/src/components/progress/progress.component.ts
 create mode 100644 cypress/apps/angular-app/src/components/progressbar/progressbar.component.html
 create mode 100644 cypress/apps/angular-app/src/components/progressbar/progressbar.component.ts
 delete mode 100644 cypress/apps/next-app/src/app/components/Progress.tsx
 create mode 100644 cypress/apps/next-app/src/app/components/ProgressBar.tsx
 delete mode 100644 cypress/apps/react-app/src/components/Progress.jsx
 create mode 100644 cypress/apps/react-app/src/components/ProgressBar.jsx
 rename cypress/apps/vue-app/src/components/{Progress.vue => ProgressBar.vue} (100%)
 rename src/components/{Progress => ProgressBar}/index.ts (100%)
 rename src/components/{Progress => ProgressBar}/progress-bar.css (100%)
 rename src/components/{Progress => ProgressBar}/sgds-progress-bar.ts (100%)

diff --git a/cypress/apps/angular-app/src/app/app.component.html b/cypress/apps/angular-app/src/app/app.component.html
index 8c7b57f9..2471ac9e 100644
--- a/cypress/apps/angular-app/src/app/app.component.html
+++ b/cypress/apps/angular-app/src/app/app.component.html
@@ -17,7 +17,7 @@
 <icon-component></icon-component>
 <modal-component></modal-component>
 <pagination-component></pagination-component>
-<progress-component></progress-component>
+<progress-bar-component></progress-bar-component>
 <quantitytoggle-component></quantitytoggle-component>
 <radio-component></radio-component>
 <sidenav-component></sidenav-component>
diff --git a/cypress/apps/angular-app/src/app/app.module.ts b/cypress/apps/angular-app/src/app/app.module.ts
index ba217c28..583a90d1 100644
--- a/cypress/apps/angular-app/src/app/app.module.ts
+++ b/cypress/apps/angular-app/src/app/app.module.ts
@@ -24,7 +24,7 @@ import { Mainnav } from "../components/mainnav/mainnav.component";
 import { Masthead } from "../components/masthead/masthead.component";
 import { Modal } from "../components/modal/modal.component";
 import { Pagination } from "../components/pagination/pagination.component";
-import { Progress } from "../components/progress/progress.component";
+import { ProgressBar } from "../components/progressbar/progressbar.component";
 import { QuantityToggle } from "../components/quantitytoggle/quantitytoggle.component";
 import { Radio } from "../components/radio/radio.component";
 import { Sidenav } from "../components/sidenav/sidenav.component";
@@ -61,7 +61,7 @@ import { Tooltip } from "../components/tooltip/tooltip.component";
     Masthead,
     Modal,
     Pagination,
-    Progress,
+    ProgressBar,
     QuantityToggle,
     Radio,
     Sidenav,
diff --git a/cypress/apps/angular-app/src/components/progress/progress.component.html b/cypress/apps/angular-app/src/components/progress/progress.component.html
deleted file mode 100644
index d93321fd..00000000
--- a/cypress/apps/angular-app/src/components/progress/progress.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<sgds-progress-bar label="50%" variant="secondary" aria-valuenow="50" aria-minvalue="0" aria-maxvalue="100"
-    aria-label="Loading in progress">
-</sgds-progress-bar>
diff --git a/cypress/apps/angular-app/src/components/progress/progress.component.ts b/cypress/apps/angular-app/src/components/progress/progress.component.ts
deleted file mode 100644
index eb68123a..00000000
--- a/cypress/apps/angular-app/src/components/progress/progress.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from "@angular/core";
-
-@Component({
-  selector: "progress-component",
-  templateUrl: "./progress.component.html"
-})
-export class Progress {}
diff --git a/cypress/apps/angular-app/src/components/progressbar/progressbar.component.html b/cypress/apps/angular-app/src/components/progressbar/progressbar.component.html
new file mode 100644
index 00000000..c994f93b
--- /dev/null
+++ b/cypress/apps/angular-app/src/components/progressbar/progressbar.component.html
@@ -0,0 +1,3 @@
+<sgds-progress-bar label="50%" value="50" ariamin="0" ariamax="100"
+    aria-label="Loading in progress">
+</sgds-progress-bar>
diff --git a/cypress/apps/angular-app/src/components/progressbar/progressbar.component.ts b/cypress/apps/angular-app/src/components/progressbar/progressbar.component.ts
new file mode 100644
index 00000000..6cc549db
--- /dev/null
+++ b/cypress/apps/angular-app/src/components/progressbar/progressbar.component.ts
@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "progress-bar-component",
+  templateUrl: "./progressbar.component.html"
+})
+export class ProgressBar {}
diff --git a/cypress/apps/next-app/src/app/components/Progress.tsx b/cypress/apps/next-app/src/app/components/Progress.tsx
deleted file mode 100644
index 2163756a..00000000
--- a/cypress/apps/next-app/src/app/components/Progress.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import SgdsProgressBar from "@govtechsg/sgds-web-component/react/progress-bar/index.js";
-
-export const Progress = () => {
-  return (
-      <SgdsProgressBar
-        label="50%"
-        variant="secondary"
-        value={50}
-        ariamin={0}
-        ariamax={100}
-        aria-label="Loading in progress"
-      ></SgdsProgressBar>
-  );
-};
diff --git a/cypress/apps/next-app/src/app/components/ProgressBar.tsx b/cypress/apps/next-app/src/app/components/ProgressBar.tsx
new file mode 100644
index 00000000..99df8098
--- /dev/null
+++ b/cypress/apps/next-app/src/app/components/ProgressBar.tsx
@@ -0,0 +1,14 @@
+import SgdsProgressBar from "@govtechsg/sgds-web-component/react/progress-bar/index.js";
+
+export const ProgressBar = () => {
+  return (
+    <SgdsProgressBar
+      label="50%"
+      variant="secondary"
+      value={50}
+      ariamin={0}
+      ariamax={100}
+      aria-label="Loading in progress"
+    ></SgdsProgressBar>
+  );
+};
diff --git a/cypress/apps/next-app/src/app/page.tsx b/cypress/apps/next-app/src/app/page.tsx
index b58ed297..785e929a 100644
--- a/cypress/apps/next-app/src/app/page.tsx
+++ b/cypress/apps/next-app/src/app/page.tsx
@@ -18,7 +18,7 @@ import { Mainnav } from "./components/Mainnav";
 import { Masthead } from "./components/Masthead";
 import { Modal } from "./components/Modal";
 import { Pagination } from "./components/Pagination";
-import { Progress } from "./components/Progress";
+import { ProgressBar } from "./components/ProgressBar";
 import { QuantityToggle } from "./components/QuantityToggle";
 import { Radio } from "./components/Radio";
 import { Sidenav } from "./components/Sidenav";
@@ -53,7 +53,7 @@ export default function Home() {
       <Input />
       <Modal />
       <Pagination />
-      <Progress />
+      <ProgressBar />
       <QuantityToggle />
       <Radio />
       <Sidenav />
@@ -65,7 +65,7 @@ export default function Home() {
       <Textarea />
       <Toast />
       <Tooltip />
-      <Footer /> 
+      <Footer />
     </main>
   );
 }
diff --git a/cypress/apps/react-app/src/App.js b/cypress/apps/react-app/src/App.js
index dc57d1b0..179ff99f 100644
--- a/cypress/apps/react-app/src/App.js
+++ b/cypress/apps/react-app/src/App.js
@@ -19,7 +19,7 @@ import { Mainnav } from "./components/Mainnav";
 import { Masthead } from "./components/Masthead";
 import { Modal } from "./components/Modal";
 import { Pagination } from "./components/Pagination";
-import { Progress } from "./components/Progress";
+import { ProgressBar } from "./components/ProgressBar";
 import { QuantityToggle } from "./components/QuantityToggle";
 import { Radio } from "./components/Radio";
 import { Sidenav } from "./components/Sidenav";
@@ -55,7 +55,7 @@ function App() {
       <Input />
       <Modal />
       <Pagination />
-      <Progress />
+      <ProgressBar />
       <QuantityToggle />
       <Radio />
       <Sidenav />
diff --git a/cypress/apps/react-app/src/components/Progress.jsx b/cypress/apps/react-app/src/components/Progress.jsx
deleted file mode 100644
index c3c5de41..00000000
--- a/cypress/apps/react-app/src/components/Progress.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import SgdsProgress from "@govtechsg/sgds-web-component/react/progress";
-import SgdsProgressBar from "@govtechsg/sgds-web-component/react/progress-bar";
-
-export const Progress = () => {
-    return (
-        <SgdsProgress>
-            <SgdsProgressBar
-                label="50%"
-                variant="secondary"
-                aria-valuenow="50"
-                aria-minvalue="0"
-                aria-maxvalue="100"
-                aria-label="Loading in progress">
-            </SgdsProgressBar>
-        </SgdsProgress>
-    )
-}
diff --git a/cypress/apps/react-app/src/components/ProgressBar.jsx b/cypress/apps/react-app/src/components/ProgressBar.jsx
new file mode 100644
index 00000000..45ceefcc
--- /dev/null
+++ b/cypress/apps/react-app/src/components/ProgressBar.jsx
@@ -0,0 +1,14 @@
+import SgdsProgressBar from "@govtechsg/sgds-web-component/react/progress-bar";
+
+export const ProgressBar = () => {
+  return (
+    <SgdsProgressBar
+      label="50%"
+      variant="neutral"
+      value="50"
+      ariamin="0"
+      ariamax="100"
+      arialabel="Loading in progress"
+    ></SgdsProgressBar>
+  );
+};
diff --git a/cypress/apps/vue-app/src/App.vue b/cypress/apps/vue-app/src/App.vue
index 0fe5d8a4..5419d8f2 100644
--- a/cypress/apps/vue-app/src/App.vue
+++ b/cypress/apps/vue-app/src/App.vue
@@ -22,7 +22,7 @@ import Mainnav from './components/Mainnav.vue'
 import Masthead from './components/Masthead.vue'
 import Modal from './components/Modal.vue'
 import Pagination from './components/Pagination.vue'
-import Progress from './components/Progress.vue'
+import ProgressBar from './components/ProgressBar.vue'
 import QuantityToggle from './components/QuantityToggle.vue'
 import Radio from './components/Radio.vue'
 import Sidenav from './components/Sidenav.vue'
@@ -60,7 +60,7 @@ import Trigger from './components/Trigger.vue'
           <Input />
           <Modal />
           <Pagination />
-          <Progress />
+          <ProgressBar />
           <QuantityToggle />
           <Radio />
           <Sidenav />
diff --git a/cypress/apps/vue-app/src/components/Progress.vue b/cypress/apps/vue-app/src/components/ProgressBar.vue
similarity index 100%
rename from cypress/apps/vue-app/src/components/Progress.vue
rename to cypress/apps/vue-app/src/components/ProgressBar.vue
diff --git a/src/components/Progress/index.ts b/src/components/ProgressBar/index.ts
similarity index 100%
rename from src/components/Progress/index.ts
rename to src/components/ProgressBar/index.ts
diff --git a/src/components/Progress/progress-bar.css b/src/components/ProgressBar/progress-bar.css
similarity index 100%
rename from src/components/Progress/progress-bar.css
rename to src/components/ProgressBar/progress-bar.css
diff --git a/src/components/Progress/sgds-progress-bar.ts b/src/components/ProgressBar/sgds-progress-bar.ts
similarity index 100%
rename from src/components/Progress/sgds-progress-bar.ts
rename to src/components/ProgressBar/sgds-progress-bar.ts
diff --git a/src/components/index.ts b/src/components/index.ts
index d3b9696c..9f632fc2 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -31,7 +31,7 @@ export * from "./Mainnav/sgds-mainnav-item";
 export * from "./Masthead/sgds-masthead";
 export * from "./Modal/sgds-modal";
 export * from "./Pagination/sgds-pagination";
-export * from "./Progress/sgds-progress-bar";
+export * from "./ProgressBar/sgds-progress-bar";
 export * from "./QuantityToggle/sgds-quantity-toggle";
 export * from "./Radio/sgds-radio";
 export * from "./Radio/sgds-radio-group";
diff --git a/src/index.ts b/src/index.ts
index 32edbd5b..f54322b1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -23,7 +23,7 @@ import "./components/Mainnav";
 import "./components/Masthead";
 import "./components/Modal";
 import "./components/Pagination";
-import "./components/Progress";
+import "./components/ProgressBar";
 import "./components/QuantityToggle";
 import "./components/Radio";
 import "./components/Sidenav";

From 5119b85e59ee511aa09620c46d93a9d105bd0714 Mon Sep 17 00:00:00 2001
From: Tong Hau <tonghau_Lee@hive.gov.sg>
Date: Thu, 26 Dec 2024 14:39:13 +0800
Subject: [PATCH 13/16] style(badge): remove css props

---
 src/components/Badge/badge.css | 77 +++++++++++++---------------------
 1 file changed, 29 insertions(+), 48 deletions(-)

diff --git a/src/components/Badge/badge.css b/src/components/Badge/badge.css
index 266aa937..e8537aea 100644
--- a/src/components/Badge/badge.css
+++ b/src/components/Badge/badge.css
@@ -1,65 +1,48 @@
 :host {
-  --sgds-badge-bg: var(--sgds-primary-bg);
-  --sgds-badge-color: var(--sgds-default-color-on-dark);
-  --sgds-badge-border-radius: var(--sgds-border-radius-sm);
   display: inline-flex;
 }
 
-:host([variant="success"]) {
-  --sgds-badge-bg: var(--sgds-success-bg);
-  --sgds-badge-color: var(--sgds-default-color-on-dark);
+:host([variant="success"]) .badge {
+  background-color: var(--sgds-success-bg);
 }
 
-:host([variant="danger"]) {
-  --sgds-badge-bg: var(--sgds-danger-bg);
-  --sgds-badge-color: var(--sgds-default-color-on-dark);
+:host([variant="danger"]) .badge {
+  background-color: var(--sgds-danger-bg);
 }
 
-:host([variant="warning"]) {
-  --sgds-badge-bg: var(--sgds-warning-bg);
-  --sgds-badge-color: var(--sgds-default-color-on-dark);
+:host([variant="warning"]) .badge {
+  background-color: var(--sgds-warning-bg);
 }
 
-:host([variant="neutral"]) {
-  --sgds-badge-bg: var(--sgds-neutral-bg);
-  --sgds-badge-color: var(--sgds-default-color-on-dark);
+:host([variant="neutral"]) .badge {
+  background-color: var(--sgds-neutral-bg);
 }
 
-:host([variant="info"][outlined]) {
-  --sgds-badge-bg: var(--sgds-primary-bg-subtle);
-  --sgds-badge-color: var(--sgds-default-color-on-light);
-  --sgds-badge-border-color: var(--sgds-primary-border-color-subtle);
+:host([variant="success"][outlined]) .badge {
+  background-color: var(--sgds-success-bg-subtle);
+  border: var(--sgds-border-width-1) solid var(--sgds-success-border-color-subtle);
 }
 
-:host([variant="success"][outlined]) {
-  --sgds-badge-bg: var(--sgds-success-bg-subtle);
-  --sgds-badge-color: var(--sgds-default-color-on-light);
-  --sgds-badge-border-color: var(--sgds-success-border-color-subtle);
+:host([variant="danger"][outlined]) .badge {
+  background-color: var(--sgds-danger-bg-subtle);
+  border: var(--sgds-border-width-1) solid var(--sgds-danger-border-color-subtle);
 }
 
-:host([variant="danger"][outlined]) {
-  --sgds-badge-bg: var(--sgds-danger-bg-subtle);
-  --sgds-badge-color: var(--sgds-default-color-on-light);
-  --sgds-badge-border-color: var(--sgds-danger-border-color-subtle);
+:host([variant="warning"][outlined]) .badge {
+  background-color: var(--sgds-warning-bg-subtle);
+  border: var(--sgds-border-width-1) solid var(--sgds-warning-border-color-subtle);
 }
 
-:host([variant="warning"][outlined]) {
-  --sgds-badge-bg: var(--sgds-danger-bg-subtle);
-  --sgds-badge-color: var(--sgds-default-color-on-light);
-  --sgds-badge-border-color: var(--sgds-warning-border-color-subtle);
-}
-
-:host([variant="neutral"][outlined]) {
-  --sgds-badge-bg: var(--sgds-neutral-bg-subtle);
-  --sgds-badge-color: var(--sgds-default-color-on-light);
-  --sgds-badge-border-color: var(--sgds-neutral-border-color-subtle);
+:host([variant="neutral"][outlined]) .badge {
+  background-color: var(--sgds-neutral-bg-subtle);
+  border: var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-subtle);
 }
 
 .badge {
-  background-color: var(--sgds-badge-bg);
-  color: var(--sgds-badge-color);
+  background-color: var(--sgds-primary-bg);
+  color: var(--sgds-default-color-on-dark);
   border: var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);
-  border-radius: var(--sgds-badge-border-radius);
+  border-radius: var(--sgds-border-radius-sm);
   font-size: var(--sgds-font-size-1);
   padding: 0 var(--sgds-padding-2-xs);
   height: var(--sgds-dimension-24);
@@ -71,7 +54,9 @@
 }
 
 .badge.outlined {
-  border: var(--sgds-border-width-1) solid var(--sgds-badge-border-color);
+  color: var(--sgds-default-color-on-light);
+  background-color: var(--sgds-primary-bg-subtle);
+  border: var(--sgds-border-width-1) solid var(--sgds-primary-border-color-subtle);
 }
 
 .badge-label {
@@ -83,14 +68,10 @@
 }
 
 .badge-dimissible sgds-close-button {
-  --sgds-close-btn-border-radius: var(--sgds-badge-border-radius);
+  --sgds-close-btn-border-radius: var(--sgds-border-radius-sm);
 }
 
-slot[name="icon"]::slotted(*){
-  color: var(--sgds-badge-color);
-} 
-
 slot::slotted(*){
-font-weight: normal;
-font-size: 14px;
+  font-weight: normal;
+  font-size: 14px;
 }

From 847e1431524dcc5209a24edfb39fdf9233a9cef5 Mon Sep 17 00:00:00 2001
From: Tong Hau <tonghau_Lee@hive.gov.sg>
Date: Thu, 26 Dec 2024 14:54:51 +0800
Subject: [PATCH 14/16] style(mainnav item): update css variable usage

---
 src/components/Mainnav/mainnav-item.css | 28 +++++++++++++++----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/Mainnav/mainnav-item.css b/src/components/Mainnav/mainnav-item.css
index dc11f580..0e487b55 100644
--- a/src/components/Mainnav/mainnav-item.css
+++ b/src/components/Mainnav/mainnav-item.css
@@ -1,4 +1,4 @@
-@media (min-width: 576px) {
+@media screen and (min-width: 576px) {
   :host([expand="sm"]) .nav-link {
     padding: 0px var(--sgds-padding-md);
   }
@@ -9,7 +9,7 @@
   }
 }
 
-@media (min-width: 768px) {
+@media screen and (min-width: 768px) {
   :host([expand="md"]) .nav-link {
     padding: 0px var(--sgds-padding-md);
   }
@@ -20,7 +20,7 @@
   }
 }
 
-@media (min-width: 992px) {
+@media screen and (min-width: 992px) {
   :host([expand="lg"]) .nav-link {
     padding: 0px var(--sgds-padding-md);
   }
@@ -31,7 +31,7 @@
   }
 }
 
-@media (min-width: 1200px) {
+@media screen and (min-width: 1200px) {
   :host([expand="xl"]) .nav-link {
     padding: 0px var(--sgds-padding-md);
   }
@@ -42,7 +42,7 @@
   }
 }
 
-@media (min-width: 1400px) {
+@media screen and (min-width: 1400px) {
   :host([expand="xxl"]) .nav-link {
     padding: 0px var(--sgds-padding-md);
   }
@@ -53,31 +53,31 @@
   }
 }
 
-@media (max-width: 576px) {
+@media screen and (max-width: 576px) {
   :host([expand="sm"]) .nav-link:not(.disabled).active {
     background-color: var(--sgds-default-bg-translucent-subtle);
   }
 }
 
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
   :host([expand="md"]) .nav-link:not(.disabled).active {
     background-color: var(--sgds-default-bg-translucent-subtle);
   }
 }
 
-@media (max-width: 992px) {
+@media screen and (max-width: 992px) {
   :host([expand="lg"]) .nav-link:not(.disabled).active {
     background-color: var(--sgds-default-bg-translucent-subtle);
   }
 }
 
-@media (max-width: 1200px) {
+@media screen and (max-width: 1200px) {
   :host([expand="xl"]) .nav-link:not(.disabled).active {
     background-color: var(--sgds-default-bg-translucent-subtle);
   }
 }
 
-@media (max-width: 1200px) {
+@media screen and (max-width: 1200px) {
   :host([expand="xxl"]) .nav-link:not(.disabled).active {
     background-color: var(--sgds-default-bg-translucent-subtle);
   }
@@ -91,7 +91,13 @@
   align-items: center;
   text-decoration: none;
   color: var(--sgds-default-color);
-  padding: var(--sgds-padding-sm) var(--mainnav-padding-x);
+  padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);
+}
+
+@media screen and (max-width: 768px) {
+  .nav-link {
+    padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);
+  }
 }
 
 .nav-link:not(.disabled).active {

From 70741ce10cb25cafaf64d175d59a147c0004ca67 Mon Sep 17 00:00:00 2001
From: Tong Hau <tonghau_Lee@hive.gov.sg>
Date: Thu, 26 Dec 2024 14:55:42 +0800
Subject: [PATCH 15/16] style(mainnav dropdown): update css variable usage

---
 src/components/Mainnav/mainnav-dropdown.css | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Mainnav/mainnav-dropdown.css b/src/components/Mainnav/mainnav-dropdown.css
index 426412e3..8d8c5416 100644
--- a/src/components/Mainnav/mainnav-dropdown.css
+++ b/src/components/Mainnav/mainnav-dropdown.css
@@ -37,8 +37,13 @@
   min-height: 100%;
   align-items: center;
   text-decoration: none;
-  padding: var(--sgds-padding-sm) var(--mainnav-padding-x);
-  
+  padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);
+}
+
+@media screen and (max-width: 768px) {
+  .nav-link {
+    padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);
+  }
 }
 
 .nav-link:not(.disabled).active,

From 0d7334f78c559b435ce391c9f5ef32a941961053 Mon Sep 17 00:00:00 2001
From: Tong Hau <tonghau_Lee@hive.gov.sg>
Date: Fri, 27 Dec 2024 16:23:06 +0800
Subject: [PATCH 16/16] style(mainnav): fix padding for  and  expand options

---
 src/components/Mainnav/mainnav-dropdown.css | 3 +++
 src/components/Mainnav/mainnav-item.css     | 4 ++++
 src/components/Mainnav/mainnav.css          | 8 +++++++-
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/Mainnav/mainnav-dropdown.css b/src/components/Mainnav/mainnav-dropdown.css
index 8d8c5416..052e4564 100644
--- a/src/components/Mainnav/mainnav-dropdown.css
+++ b/src/components/Mainnav/mainnav-dropdown.css
@@ -1,3 +1,6 @@
+:host([expand="always"]) .nav-link {
+  padding: 0px var(--sgds-padding-md);
+}
 
 @media (min-width: 576px) {
   :host([expand="sm"]) .nav-link {
diff --git a/src/components/Mainnav/mainnav-item.css b/src/components/Mainnav/mainnav-item.css
index 0e487b55..db217df1 100644
--- a/src/components/Mainnav/mainnav-item.css
+++ b/src/components/Mainnav/mainnav-item.css
@@ -1,3 +1,7 @@
+:host([expand="always"]) .nav-link {
+  padding: 0px var(--sgds-padding-md);
+}
+
 @media screen and (min-width: 576px) {
   :host([expand="sm"]) .nav-link {
     padding: 0px var(--sgds-padding-md);
diff --git a/src/components/Mainnav/mainnav.css b/src/components/Mainnav/mainnav.css
index fb157892..2becbfba 100644
--- a/src/components/Mainnav/mainnav.css
+++ b/src/components/Mainnav/mainnav.css
@@ -58,7 +58,13 @@ nav > .navbar-body {
 }
 
 nav > .navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)) {
-  padding: var(--sgds-padding-sm) var(--sgds-padding-lg);
+  padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);
+}
+
+@media screen and (max-width: 768px) {
+  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 {