@govtechsg/sgds-web-component 3.0.0-rc.5 → 3.0.0

package/components/Link/link.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`.nav-link::slotted(a){--sgds-link-color:var(--sgds-primary-color);align-items:center;color:var(--sgds-link-color,--sgds-primary-color);cursor:pointer;display:inline-flex;flex-shrink:0;gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-24);justify-content:center;text-decoration:none!important}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),.nav-link::slotted(a[active]){--sgds-link-color-emphasis:var(--sgds-primary-color-emphasis);color:var( --sgds-link-color-emphasis,--sgds-primary-color-emphasis)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus);outline:0}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color:var(--sgds-danger-color);color:var(--sgds-link-color,--sgds-danger-color)}:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-danger-color-emphasis);color:var(--sgds-link-color-emphasis,--sgds-danger-color-emphasis)}:host([size=lg]) .nav-link::slotted(a){font-size:var(--sgds-font-size-3)!important;height:var(--sgds-dimension-32)}:host([size=sm]) .nav-link::slotted(a){font-size:var(--sgds-font-size-1)!important;height:var(--sgds-dimension-20)}`;
+var css_248z = css`.nav-link::slotted(a){--sgds-link-color-default:var(--sgds-primary-color-default);align-items:center;color:var(--sgds-link-color-default,--sgds-primary-color-default);cursor:pointer;display:inline-flex;flex-shrink:0;gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-24);justify-content:center;text-decoration:none!important}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),.nav-link::slotted(a[active]){--sgds-link-color-emphasis:var(--sgds-primary-color-emphasis);color:var( --sgds-link-color-emphasis,--sgds-primary-color-emphasis)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus);outline:0}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-danger-color-emphasis);color:var(--sgds-link-color-emphasis,--sgds-danger-color-emphasis)}:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-light)}:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-emphasis,--sgds-color-fixed-dark)}:host([size=lg]) .nav-link::slotted(a){font-size:var(--sgds-font-size-3)!important;height:var(--sgds-dimension-32)}:host([size=sm]) .nav-link::slotted(a){font-size:var(--sgds-font-size-1)!important;height:var(--sgds-dimension-20)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=link.js.map

package/components/Link/sgds-link.d.ts

@@ -9,7 +9,8 @@ export declare class SgdsLink extends SgdsElement {
     /** Determines the size of the link */
     size: "sm" | "md" | "lg";
     /** when true, sets the active stylings of the link */
-    variant: "primary" | "danger";
+    variant: "primary" | "danger" | "light" | "dark";
+    private _handleSlotChange;
     render(): import("lit-html").TemplateResult<1>;
 }
 export default SgdsLink;

package/components/Link/sgds-link.js

@@ -17,9 +17,21 @@ class SgdsLink extends SgdsElement {
         /** when true, sets the active stylings of the link */
         this.variant = "primary";
     }
+    _handleSlotChange(e) {
+        const anchor = this.querySelector("a");
+        if (anchor) {
+            if (anchor.hasAttribute("disabled")) {
+                anchor.setAttribute("href", "javascript:void(0)");
+                anchor.setAttribute("tabindex", "-1");
+            }
+            else {
+                anchor.setAttribute("tabindex", "0");
+            }
+        }
+    }
     render() {
         /** When removing href, link is no longer focusable */
-        return html ` <slot class="nav-link"></slot> `;
+        return html `<slot class="nav-link" @slotchange=${this._handleSlotChange}></slot>`;
     }
 }
 SgdsLink.styles = [...SgdsElement.styles, css_248z];

package/components/Link/sgds-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-link.js","sources":["../../../src/components/Link/sgds-link.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport linkStyles from \"./link.css\";\n/**\n * @summary Link allows users to click and navigate their way from page to page\n *\n * @slot default - Pass in a single anchor tag here\n */\nexport class SgdsLink extends SgdsElement {\n  static styles = [...SgdsElement.styles, linkStyles];\n  /** Determines the size of the link */\n  @property({ type: String, reflect: true })\n  size: \"sm\" | \"md\" | \"lg\" = \"md\";\n  /** when true, sets the active stylings of the link */\n  @property({ type: String, reflect: true })\n  variant: \"primary\" | \"danger\" = \"primary\";\n\n  render() {\n    /** When removing href, link is no longer focusable */\n    return html` <slot class=\"nav-link\"></slot> `;\n  }\n}\n\nexport default SgdsLink;\n"],"names":["linkStyles"],"mappings":";;;;;;AAIA;;;;AAIG;AACG,MAAO,QAAS,SAAQ,WAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAIE,IAAI,CAAA,IAAA,GAAuB,IAAI,CAAC;;QAGhC,IAAO,CAAA,OAAA,GAAyB,SAAS,CAAC;KAM3C;IAJC,MAAM,GAAA;;QAEJ,OAAO,IAAI,CAAA,CAAA,gCAAA,CAAkC,CAAC;KAC/C;;AAXM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AAGpD,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACV,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhC,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACA,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-link.js","sources":["../../../src/components/Link/sgds-link.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport linkStyles from \"./link.css\";\n/**\n * @summary Link allows users to click and navigate their way from page to page\n *\n * @slot default - Pass in a single anchor tag here\n */\nexport class SgdsLink extends SgdsElement {\n  static styles = [...SgdsElement.styles, linkStyles];\n  /** Determines the size of the link */\n  @property({ type: String, reflect: true })\n  size: \"sm\" | \"md\" | \"lg\" = \"md\";\n  /** when true, sets the active stylings of the link */\n  @property({ type: String, reflect: true })\n  variant: \"primary\" | \"danger\" | \"light\" | \"dark\" = \"primary\";\n\n  private _handleSlotChange(e: Event) {\n    const anchor = this.querySelector(\"a\");\n    if (anchor) {\n      if (anchor.hasAttribute(\"disabled\")) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n      } else {\n        anchor.setAttribute(\"tabindex\", \"0\");\n      }\n    }\n  }\n\n  render() {\n    /** When removing href, link is no longer focusable */\n    return html`<slot class=\"nav-link\" @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsLink;\n"],"names":["linkStyles"],"mappings":";;;;;;AAIA;;;;AAIG;AACG,MAAO,QAAS,SAAQ,WAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAIE,IAAI,CAAA,IAAA,GAAuB,IAAI,CAAC;;QAGhC,IAAO,CAAA,OAAA,GAA4C,SAAS,CAAC;KAkB9D;AAhBS,IAAA,iBAAiB,CAAC,CAAQ,EAAA;QAChC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACvC,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AACnC,gBAAA,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;AAClD,gBAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;aACvC;iBAAM;AACL,gBAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;aACtC;SACF;KACF;IAED,MAAM,GAAA;;AAEJ,QAAA,OAAO,IAAI,CAAA,CAAA,mCAAA,EAAsC,IAAI,CAAC,iBAAiB,UAAU,CAAC;KACnF;;AAvBM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AAGpD,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACV,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhC,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACmB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/Mainnav/index.umd.js

@@ -4899,7 +4899,7 @@
    */
   const classMap = directive(ClassMapDirective);
 
-  var css_248z$7 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}a[target=_blank]{align-items:center;display:flex;gap:var(--sgds-gap-2-xs);justify-content:center}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding:0 .45em}::slotted(svg){vertical-align:middle}}`;
+  var css_248z$7 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}a[target=_blank]{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding:0 .45em}::slotted(svg){vertical-align:middle}}`;
 
   /**
    * @cssprop --sgds-{stateColor} - State colors in hexadecimal value
@@ -5099,7 +5099,7 @@
       };
   }
 
-  var css_248z$6 = css`nav{background-color:var(--sgds-neutral-bg-inverse);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);justify-content:space-between;margin:auto;max-width:var(--sgds-mainnav-max-width);min-height:80px;padding:0 var(--sgds-mainnav-padding-x);position:relative;width:100%}@media screen and (max-width:768px){.navbar{padding:0 var(--sgds-mainnav-mobile-padding-x)}}.navbar-brand{align-items:center;display:flex;text-decoration:none;white-space:nowrap}.navbar-brand:focus,.navbar-brand:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-default-bg-surface);border-top:var(--sgds-border-width-1) solid var(--sgds-default-border-color-translucent);bottom:0;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:2000}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){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{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:576px){.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:992px){.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:1200px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.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:1400px){.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-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$6 = css`nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);justify-content:space-between;margin:auto;max-width:var(--sgds-mainnav-max-width);min-height:80px;padding:0 var(--sgds-mainnav-padding-x);position:relative;width:100%}@media screen and (max-width:768px){.navbar{padding:0 var(--sgds-mainnav-mobile-padding-x)}}.navbar-brand{align-items:center;display:flex;text-decoration:none;white-space:nowrap}.navbar-brand:focus,.navbar-brand:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.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);bottom:0;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:2000}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){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{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:576px){.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:992px){.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:1200px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.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:1400px){.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-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}`;
 
   /**
    * @license
@@ -5415,14 +5415,15 @@
           this.header.focus();
       }
       async _handleMobileNav() {
-          var _a, _b;
-          (_a = this.nav) === null || _a === void 0 ? void 0 : _a.appendChild(this.body);
+          if (!this.nav)
+              return;
+          this.nav.appendChild(this.body);
           await customElements.whenDefined("sgds-masthead");
-          const mastheadHeight = ((_b = document.querySelector("sgds-masthead")) === null || _b === void 0 ? void 0 : _b.clientHeight) | 0;
+          const offsetTop = this.nav.offsetTop;
           const navHeight = this.nav.clientHeight;
-          const mainNavHeight = mastheadHeight + navHeight;
-          this.body.style.top = `${mainNavHeight}px`;
-          this.navScroll.style.maxHeight = `calc(100dvh - ${mainNavHeight}px)`;
+          const mainNavPosition = offsetTop + navHeight;
+          this.body.style.top = `${mainNavPosition}px`;
+          this.navScroll.style.maxHeight = `calc(100dvh - ${mainNavPosition}px)`;
       }
       _handleDesktopNav() {
           var _a;
@@ -5598,9 +5599,9 @@
 
   var css_248z$4 = css`:host{position:relative}.dropdown{display:flex;height:100%}`;
 
-  var css_248z$3 = css`.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-neutral-bg-inverse);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 4px 8px 0 rgba(0,0,0,.14);color:var(--sgds-default-color);display:none;list-style:none;margin:0;min-width:var(--sgds-dimension-280);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:1000}.dropdown .dropdown-menu{max-height:var(--sgds-dimension-192)}.dropdown-menu.show{display:block}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:576px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:992px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1200px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1400px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`;
+  var css_248z$3 = css`.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 4px 8px 0 hsla(0,0%,5%,.12);color:var(--sgds-color-default);display:none;list-style:none;margin:0;min-width:var(--sgds-dimension-280);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:1000}.dropdown .dropdown-menu{max-height:var(--sgds-dimension-192)}.dropdown-menu.show{display:block}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:576px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:992px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1200px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1400px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`;
 
-  var css_248z$2 = css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}@media (min-width:576px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host([expand=sm]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host([expand=md]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:992px){:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host([expand=lg]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:1200px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host([expand=xl]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:1400px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host([expand=xxl]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}.nav-link{align-items:center;cursor:pointer;display:flex;gap:var(--sgds-gap-xs);min-height:100%;padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none}@media screen and (max-width:768px){.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-border-width-4) solid var(--sgds-primary-border-color);color:var(--sgds-primary-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) inset;color:var(--sgds-primary-color)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.dropdown-items{background-color:var(--sgds-default-bg-surface);height:100%;left:100%;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-default-color);cursor:pointer;display:flex;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color)}.dropdown-items a:focus,.dropdown-items a:focus-visible{outline:0}.dropdown-items a:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color)}slot[name=toggler]::slotted(*){flex:1}`;
+  var css_248z$2 = 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:576px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host([expand=sm]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@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)}:host([expand=md]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:992px){: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)}:host([expand=lg]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:1200px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host([expand=xl]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media (min-width:1400px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host([expand=xxl]) .nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}.nav-link{align-items:center;cursor:pointer;display:flex;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none}@media screen and (max-width:768px){.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}.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,.nav-link:not(.disabled):focus-visible{outline:0}.nav-link:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;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;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus,.dropdown-items a:focus-visible{outline:0}.dropdown-items a:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}slot[name=toggler]::slotted(*){flex:1}`;
 
   /**
    * @license
@@ -9621,7 +9622,7 @@
       watch("disabled", { waitUntilFirstUpdate: true })
   ], SgdsDropdown.prototype, "_handleDisabled", null);
 
-  var css_248z$1 = css`.dropdown-item{align-items:center;background-color:var(--sgds-default-bg-transparent);clear:both;color:var(--sgds-default-color);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit;white-space:nowrap}.dropdown-item:not(.nav-link):hover{background-color:var(--sgds-default-bg-translucent-subtle)}.dropdown-item:not(.nav-link):focus,.dropdown-item:not(.nav-link):focus-visible{background-color:var(--sgds-default-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item:not(.nav-link).active{background-color:var(--sgds-default-bg-translucent-subtle);color:var(--sgds-primary-color);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}.nav-link{gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}.nav-link: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) inset;color:var(--sgds-primary-color)}.nav-link.active{background-color:var(--sgds-default-bg-translucent-subtle);color:var(--sgds-primary-color)}`;
+  var css_248z$1 = css`.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit;white-space:nowrap}.dropdown-item:not(.nav-link):hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:not(.nav-link):focus,.dropdown-item:not(.nav-link):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item:not(.nav-link).active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}.nav-link{gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}.nav-link:hover{color:var(--sgds-primary-color-default)}.nav-link:focus,.nav-link:focus-visible{outline:0}.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default)}`;
 
   /**
    * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`
@@ -9718,31 +9719,32 @@
               this.shadowRoot.adoptedStyleSheets = [css_248z$3.styleSheet, css_248z$2.styleSheet];
           }
       }
-      firstUpdated() {
-          this.defaultSlotItems.forEach(item => {
-              const slottedItem = item.shadowRoot.querySelector(".dropdown-item slot").assignedElements({
-                  flatten: true
-              });
-              slottedItem.forEach(item => {
-                  item.tabIndex = -1;
-              });
-          });
-      }
       updated() {
           if (this._breakpointReached) {
-              this._adjustNavLink();
               this._copyTextToMenu();
-              this._adjustDropdownItem();
               this._resetDropdownMenu();
               this._hideDropdownMenuItems();
           }
-          else {
-              this._resetDropdownItem();
-          }
       }
-      _handleSlotChange() {
-          this.defaultSlotItems.forEach(item => {
+      _handleSlotChange(e) {
+          const items = e.target.assignedElements({ flatten: true });
+          items.forEach(item => {
               item.addEventListener("keydown", this._handleKeyboardMenuItemsEvent.bind(this));
+              const dropdownItem = item.shadowRoot.querySelector(".dropdown-item");
+              dropdownItem.classList.add("nav-link");
+              const slottedItem = item.shadowRoot.querySelector(".dropdown-item slot").assignedElements({
+                  flatten: true
+              });
+              slottedItem.forEach(item => {
+                  item.tabIndex = -1;
+              });
+          });
+      }
+      _handleDesktopSlotChange(e) {
+          const items = e.target.assignedElements({ flatten: true });
+          items.forEach(item => {
+              const dropdownItem = item.shadowRoot.querySelector(".dropdown-item");
+              dropdownItem.classList.remove("nav-link");
           });
       }
       _handleKeyboardMenuItemsEvent(e) {
@@ -9756,7 +9758,7 @@
               return;
           }
           const firstItem = items[0];
-          const lastItem = items[itemLength - 1].shadowRoot.querySelector(".nav-link");
+          const lastItem = items[itemLength - 1].shadowRoot.querySelector(".dropdown-item");
           let activeElement = document.activeElement;
           if (activeElement === this) {
               activeElement = this.shadowRoot.activeElement;
@@ -9773,7 +9775,7 @@
                   }
                   else {
                       const activeShadowElement = activeElement.shadowRoot
-                          ? activeElement.shadowRoot.querySelector(".nav-link")
+                          ? activeElement.shadowRoot.querySelector(".dropdown-item")
                           : null;
                       if (activeShadowElement && activeShadowElement === lastItem) {
                           e.preventDefault();
@@ -9784,21 +9786,6 @@
               }
           }
       }
-      _adjustNavLink() {
-          this.navLink.style.minHeight = "auto";
-      }
-      _adjustDropdownItem() {
-          this.defaultSlotItems.forEach(item => {
-              const dropdownItem = item.shadowRoot.querySelector(".dropdown-item");
-              dropdownItem.classList.add("nav-link");
-          });
-      }
-      _resetDropdownItem() {
-          this.defaultSlotItems.forEach(item => {
-              const dropdownItem = item.shadowRoot.querySelector(".dropdown-item");
-              dropdownItem.classList.remove("nav-link");
-          });
-      }
       _copyTextToMenu() {
           this.menuHeaderText.innerHTML = this.togglerNodes[0].innerHTML;
       }
@@ -9914,7 +9901,7 @@
         <slot name="toggler"></slot>
         <sgds-icon name="chevron-down"></sgds-icon>
       </a>
-      <slot></slot>
+      <slot @slotchange=${this._handleDesktopSlotChange}></slot>
     </sgds-dropdown>`;
           return this._breakpointReached ? mobileView : desktopView;
       }
@@ -9927,7 +9914,8 @@
       "sgds-icon": SgdsIcon
   };
   __decorate([
-      consume({ context: MainnavContext, subscribe: true })
+      consume({ context: MainnavContext, subscribe: true }),
+      state()
   ], SgdsMainnavDropdown.prototype, "_breakpointReached", void 0);
   __decorate([
       query(".nav-link")
@@ -9954,24 +9942,13 @@
       queryAssignedElements()
   ], SgdsMainnavDropdown.prototype, "defaultNodes", void 0);
 
-  /**
-   * @license
-   * Copyright 2018 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
-  /**
-   * For AttributeParts, sets the attribute if the value is defined and removes
-   * the attribute if the value is undefined.
-   *
-   * For other part types, this directive is a no-op.
-   */
-  const ifDefined = (value) => value ?? nothing;
+  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:576px){: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)}:host([expand=sm]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@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)}:host([expand=md]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:992px){: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)}:host([expand=lg]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1200px){: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)}:host([expand=xl]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1400px){: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)}:host([expand=xxl]) ::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (max-width:576px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:768px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:992px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1200px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1400px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;height:auto!important;padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none!important;text-decoration:none}@media screen and (max-width:768px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus),::slotted(a:focus-visible){outline:0}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;
 
   /**
-   * @slot default - Default slot for SgdsMainnavItem anchor element
-   * @slot default - Default slot for SgdsMainnavItem anchor element
-   */
-  class LinkElement extends SgdsElement {
+   * @slot default - slot for SgdsMainnavItem element.
+   *
+   *  */
+  class SgdsMainnavItem extends SgdsElement {
       constructor() {
           super(...arguments);
           /** when true, sets the active stylings of .nav-link */
@@ -9982,45 +9959,49 @@
       _handleDisabled() {
           this.setAttribute("aria-disabled", `${this.disabled}`);
       }
+      _handleSlotChange(e) {
+          const slot = e.target;
+          const assignedElements = slot.assignedElements({ flatten: true });
+          const anchorItems = assignedElements.filter(item => item.tagName.toLowerCase() === "a" || item.tagName.toLowerCase() === "sgds-link");
+          if (anchorItems.length > 1) {
+              console.error("More than one anchor tag is added to sgds-mainnav-item");
+              return;
+          }
+          if (anchorItems.length === 0) {
+              const nodes = slot.assignedNodes({ flatten: true });
+              nodes.forEach(node => {
+                  if (node.nodeType === Node.TEXT_NODE) {
+                      const hyperlink = document.createElement("a");
+                      hyperlink.textContent = node.textContent;
+                      node.parentNode.replaceChild(hyperlink, node);
+                  }
+              });
+          }
+          if (anchorItems.length === 1) {
+              const anchor = anchorItems[0];
+              if (this.active) {
+                  anchor.setAttribute("aria-current", "true");
+              }
+              if (this.disabled) {
+                  anchor.setAttribute("href", "javascript:void(0)");
+                  anchor.setAttribute("tabindex", "-1");
+              }
+          }
+      }
       render() {
-          return html$1 `
-      <a
-        href=${this.disabled ? "javascript:void(0)" : ifDefined(this.href)}
-        class="nav-link ${classMap({
-            disabled: this.disabled,
-            active: this.active
-        })} "
-        ?disabled=${this.disabled}
-        aria-disabled=${this.disabled ? "true" : "false"}
-        tabindex=${this.disabled ? "-1" : "0"}
-      >
-        <slot></slot>
-      </a>
-    `;
+          return html$1 `<slot @slotchange=${this._handleSlotChange}></slot>`;
       }
   }
+  SgdsMainnavItem.styles = [...SgdsElement.styles, css_248z];
   __decorate([
       property({ type: Boolean })
-  ], LinkElement.prototype, "active", void 0);
-  __decorate([
-      property({ type: String })
-  ], LinkElement.prototype, "href", void 0);
+  ], SgdsMainnavItem.prototype, "active", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
-  ], LinkElement.prototype, "disabled", void 0);
+  ], SgdsMainnavItem.prototype, "disabled", void 0);
   __decorate([
       watch("disabled")
-  ], LinkElement.prototype, "_handleDisabled", null);
-
-  var css_248z = css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}@media screen and (min-width:576px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host([expand=sm]) .nav-link:not(.disabled).active{border-color:var(--sgds-border-width-4) solid var(--sgds-primary-border-color);color:var(--sgds-primary-color)}:host([expand=sm]) .nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host([expand=md]) .nav-link:not(.disabled).active{border-color:var(--sgds-border-width-4) solid var(--sgds-primary-border-color);color:var(--sgds-primary-color)}:host([expand=md]) .nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:992px){:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host([expand=lg]) .nav-link:not(.disabled).active{border-color:var(--sgds-border-width-4) solid var(--sgds-primary-border-color);color:var(--sgds-primary-color)}:host([expand=lg]) .nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1200px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host([expand=xl]) .nav-link:not(.disabled).active{border-color:var(--sgds-border-width-4) solid var(--sgds-primary-border-color);color:var(--sgds-primary-color)}:host([expand=xl]) .nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (min-width:1400px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;padding:0 var(--sgds-padding-md)}:host([expand=xxl]) .nav-link:not(.disabled).active{border-color:var(--sgds-border-width-4) solid var(--sgds-primary-border-color);color:var(--sgds-primary-color)}:host([expand=xxl]) .nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}}@media screen and (max-width:576px){:host([expand=sm]) .nav-link:not(.disabled).active{background-color:var(--sgds-default-bg-translucent-subtle)}}@media screen and (max-width:768px){:host([expand=md]) .nav-link:not(.disabled).active{background-color:var(--sgds-default-bg-translucent-subtle)}}@media screen and (max-width:992px){:host([expand=lg]) .nav-link:not(.disabled).active{background-color:var(--sgds-default-bg-translucent-subtle)}}@media screen and (max-width:1200px){:host([expand=xl]) .nav-link:not(.disabled).active{background-color:var(--sgds-default-bg-translucent-subtle)}}@media screen and (max-width:1400px){:host([expand=xxl]) .nav-link:not(.disabled).active{background-color:var(--sgds-default-bg-translucent-subtle)}}.nav-link{align-items:center;color:var(--sgds-default-color);cursor:pointer;display:flex;min-height:100%;padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);text-decoration:none}@media screen and (max-width:768px){.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}.nav-link:not(.disabled).active,.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) inset;color:var(--sgds-primary-color)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;
-
-  /**
-   * @slot default - slot for SgdsMainnavItem element.
-   *
-   *  */
-  class SgdsMainnavItem extends LinkElement {
-  }
-  SgdsMainnavItem.styles = [...LinkElement.styles, css_248z];
+  ], SgdsMainnavItem.prototype, "_handleDisabled", null);
 
   /**
    *