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

package/react/components/Link/sgds-link.cjs.js

@@ -22,9 +22,21 @@ class SgdsLink extends sgdsElement["default"] {
         /** 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 lit.html ` <slot class="nav-link"></slot> `;
+        return lit.html `<slot class="nav-link" @slotchange=${this._handleSlotChange}></slot>`;
     }
 }
 SgdsLink.styles = [...sgdsElement["default"].styles, link["default"]];

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-link.cjs.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":["SgdsElement","html","linkStyles","__decorate","property"],"mappings":";;;;;;;;;;;AAIA;;;;AAIG;AACG,MAAO,QAAS,SAAQA,sBAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAIE,IAAI,CAAA,IAAA,GAAuB,IAAI,CAAC;;QAGhC,IAAO,CAAA,OAAA,GAAyB,SAAS,CAAC;KAM3C;IAJC,MAAM,GAAA;;QAEJ,OAAOC,QAAI,CAAA,CAAA,gCAAA,CAAkC,CAAC;KAC/C;;AAXM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,eAAU,CAArC,CAAuC;AAGpDC,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACV,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhCD,gBAAA,CAAA;IADCC,sBAAQ,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.cjs.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":["SgdsElement","html","linkStyles","__decorate","property"],"mappings":";;;;;;;;;;;AAIA;;;;AAIG;AACG,MAAO,QAAS,SAAQA,sBAAW,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,OAAOC,QAAI,CAAA,CAAA,mCAAA,EAAsC,IAAI,CAAC,iBAAiB,UAAU,CAAC;KACnF;;AAvBM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,eAAU,CAArC,CAAuC;AAGpDC,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACV,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhCD,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACmB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

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

@@ -18,9 +18,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/react/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/react/components/Mainnav/mainnav-dropdown.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.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 = lit.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}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=mainnav-dropdown.cjs.js.map

package/react/components/Mainnav/mainnav-dropdown.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-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 (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 = 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}`;
 
 export { css_248z as default };
 //# sourceMappingURL=mainnav-dropdown.js.map

package/react/components/Mainnav/mainnav-item.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.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)}`;
+var css_248z = lit.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)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=mainnav-item.cjs.js.map

package/react/components/Mainnav/mainnav-item.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-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)}`;
+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)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=mainnav-item.js.map

package/react/components/Mainnav/mainnav.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.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 = lit.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}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=mainnav.cjs.js.map

package/react/components/Mainnav/mainnav.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = 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 = 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}`;
 
 export { css_248z as default };
 //# sourceMappingURL=mainnav.js.map

package/react/components/Mainnav/sgds-mainnav-dropdown.cjs.js

@@ -63,31 +63,32 @@ class SgdsMainnavDropdown extends sgdsElement["default"] {
             this.shadowRoot.adoptedStyleSheets = [dropdownMenu["default"].styleSheet, mainnavDropdown["default"].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) {
@@ -101,7 +102,7 @@ class SgdsMainnavDropdown extends sgdsElement["default"] {
             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;
@@ -118,7 +119,7 @@ class SgdsMainnavDropdown extends sgdsElement["default"] {
                 }
                 else {
                     const activeShadowElement = activeElement.shadowRoot
-                        ? activeElement.shadowRoot.querySelector(".nav-link")
+                        ? activeElement.shadowRoot.querySelector(".dropdown-item")
                         : null;
                     if (activeShadowElement && activeShadowElement === lastItem) {
                         e.preventDefault();
@@ -129,21 +130,6 @@ class SgdsMainnavDropdown extends sgdsElement["default"] {
             }
         }
     }
-    _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;
     }
@@ -259,7 +245,7 @@ class SgdsMainnavDropdown extends sgdsElement["default"] {
         <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;
     }
@@ -272,7 +258,8 @@ SgdsMainnavDropdown.dependencies = {
     "sgds-icon": sgdsIcon.SgdsIcon
 };
 tslib.__decorate([
-    context.consume({ context: mainnavContext.MainnavContext, subscribe: true })
+    context.consume({ context: mainnavContext.MainnavContext, subscribe: true }),
+    decorators_js.state()
 ], SgdsMainnavDropdown.prototype, "_breakpointReached", void 0);
 tslib.__decorate([
     decorators_js.query(".nav-link")

package/react/components/Mainnav/sgds-mainnav-dropdown.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav-dropdown.cjs.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-dropdown.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { consume } from \"@lit/context\";\nimport { property, query, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport genId from \"../../utils/generateId\";\nimport dropdownStyle from \"../Dropdown/dropdown.css\";\nimport dropdownMenuStyle from \"../Dropdown/dropdown-menu.css\";\nimport mainnavDropdownStyle from \"./mainnav-dropdown.css\";\nimport SgdsDropdown from \"../Dropdown/sgds-dropdown\";\nimport SgdsDropdownItem from \"../Dropdown/sgds-dropdown-item\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { MainnavContext } from \"./mainnav-context\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nconst TAB = \"Tab\";\nconst ENTER = \"Enter\";\nconst SPACE = \" \";\n\n/**\n * @slot default - The menu items. Pass in sgds-dropdown-item as the menu items\n * @slot toggler - The content of the toggler to pass in html content.\n */\nexport class SgdsMainnavDropdown extends SgdsElement {\n  static styles = [...SgdsElement.styles, dropdownStyle, dropdownMenuStyle, mainnavDropdownStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-dropdown\": SgdsDropdown,\n    \"sgds-dropdown-item\": SgdsDropdownItem,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @consume({ context: MainnavContext, subscribe: true })\n  private _breakpointReached: boolean;\n\n  /** @internal */\n  @query(\".nav-link\") navLink: HTMLElement;\n\n  /** @internal */\n  @query(\".dropdown-items\") dropdownItems: HTMLElement;\n\n  /** @internal */\n  @query(\".dropdown-items a\") menuHeaderButton: HTMLElement;\n\n  /** @internal */\n  @query(\".dropdown-items span\") menuHeaderText: HTMLElement;\n\n  /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n  private togglerId: string = genId(\"dropdown\", \"button\");\n\n  /** When true,  applies active styles on the dropdown button */\n  @property({ type: Boolean })\n  active = false;\n\n  /** When true,  applies active styles on the dropdown button */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** @internal */\n  @queryAssignedElements({ slot: \"toggler\" }) private togglerNodes!: HTMLElement[];\n\n  /** @internal */\n  @queryAssignedElements() private defaultNodes!: SgdsDropdownItem[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsDropdownItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsDropdownItem[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener(\"close-dropdown-menu\", () => {\n      this._resetDropdownMenu();\n      this._hideDropdownMenuItems();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    // Clean up the event listener when the element is removed from the DOM\n    document.removeEventListener(\"close-dropdown-menu\", () => {\n      this._resetDropdownMenu();\n      this._hideDropdownMenuItems();\n    });\n  }\n\n  protected willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n\n    if (!this.shadowRoot) {\n      return;\n    }\n\n    if (this._breakpointReached) {\n      this.shadowRoot.adoptedStyleSheets = [dropdownMenuStyle.styleSheet, mainnavDropdownStyle.styleSheet];\n    }\n  }\n\n  firstUpdated() {\n    this.defaultSlotItems.forEach(item => {\n      const slottedItem = (item.shadowRoot.querySelector(\".dropdown-item slot\") as HTMLSlotElement).assignedElements({\n        flatten: true\n      });\n\n      slottedItem.forEach(item => {\n        (item as HTMLElement).tabIndex = -1;\n      });\n    });\n  }\n\n  updated() {\n    if (this._breakpointReached) {\n      this._adjustNavLink();\n      this._copyTextToMenu();\n      this._adjustDropdownItem();\n      this._resetDropdownMenu();\n      this._hideDropdownMenuItems();\n    } else {\n      this._resetDropdownItem();\n    }\n  }\n\n  private _handleSlotChange() {\n    this.defaultSlotItems.forEach(item => {\n      item.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent.bind(this));\n    });\n  }\n\n  private _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n    if (!this._breakpointReached) {\n      return;\n    }\n\n    const slottedItems = this.defaultSlotItems.filter(item => !item.hasAttribute(\"disabled\"));\n    const items = [this.menuHeaderButton, ...slottedItems];\n    const itemLength = items.length;\n    if (itemLength === 0) {\n      return;\n    }\n\n    const firstItem = items[0];\n    const lastItem = items[itemLength - 1].shadowRoot.querySelector(\".nav-link\") as HTMLElement;\n    let activeElement = document.activeElement as HTMLElement;\n    if (activeElement === this) {\n      activeElement = this.shadowRoot.activeElement as HTMLElement;\n    }\n\n    switch (e.key) {\n      case \"Tab\": {\n        if (e.shiftKey) {\n          if (activeElement === firstItem) {\n            e.preventDefault();\n            setTimeout(() => {\n              lastItem.focus();\n            }, 0);\n          }\n        } else {\n          const activeShadowElement = activeElement.shadowRoot\n            ? activeElement.shadowRoot.querySelector(\".nav-link\")\n            : null;\n          if (activeShadowElement && activeShadowElement === lastItem) {\n            e.preventDefault();\n            firstItem.focus();\n          }\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  private _adjustNavLink() {\n    this.navLink.style.minHeight = \"auto\";\n  }\n\n  private _adjustDropdownItem() {\n    this.defaultSlotItems.forEach(item => {\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n      dropdownItem.classList.add(\"nav-link\");\n    });\n  }\n\n  private _resetDropdownItem() {\n    this.defaultSlotItems.forEach(item => {\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n      dropdownItem.classList.remove(\"nav-link\");\n    });\n  }\n\n  private _copyTextToMenu() {\n    this.menuHeaderText.innerHTML = this.togglerNodes[0].innerHTML;\n  }\n\n  private _hideDropdownMenuItems() {\n    this.dropdownItems.style.display = \"none\";\n    this.dropdownItems.setAttribute(\"aria-hidden\", \"true\");\n  }\n\n  private _resetDropdownMenu() {\n    const navbarBody = this._getNavbarBody();\n    navbarBody.style.removeProperty(\"transform\");\n  }\n\n  private _handleKeyboardOpen(event: KeyboardEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    if (event.key === ENTER || event.key === SPACE) {\n      event.preventDefault();\n      this._openMenu();\n    }\n  }\n\n  private _getNavbarBody() {\n    const mainNav = document.querySelector(\"sgds-mainnav\") as HTMLElement | null;\n\n    if (!mainNav?.shadowRoot) {\n      console.warn(\"sgds-mainnav or its shadowRoot not found\");\n      return;\n    }\n\n    const navbarBody = mainNav.shadowRoot.querySelector(\".navbar-body\") as HTMLElement;\n    if (!navbarBody) {\n      console.warn(\".navbar-body not found in sgds-mainnav\");\n      return;\n    }\n\n    return navbarBody;\n  }\n\n  private _openMenu() {\n    const navbarBody = this._getNavbarBody();\n    navbarBody.style.transform = \"translateX(-100%)\";\n    this.dropdownItems.style.removeProperty(\"display\");\n    this.dropdownItems.setAttribute(\"aria-hidden\", \"false\");\n    setTimeout(() => {\n      this.menuHeaderButton.focus();\n    }, 50);\n  }\n\n  private _handleHeaderKeyboardEvent(event: KeyboardEvent) {\n    switch (event.key) {\n      case TAB: {\n        this._handleKeyboardMenuItemsEvent(event);\n        break;\n      }\n      case ENTER:\n      case SPACE: {\n        event.preventDefault();\n        this._closeMenu();\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  private _closeMenu() {\n    // 200ms delay as the transform transition is set to this timing\n    this._resetDropdownMenu();\n    setTimeout(() => {\n      this._hideDropdownMenuItems();\n      this.navLink.focus();\n    }, 200);\n  }\n\n  render() {\n    const mobileView = html`\n      <a\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        role=\"button\"\n        @click=${this._openMenu}\n        @keydown=${this._handleKeyboardOpen}\n      >\n        <slot name=\"toggler\"></slot>\n        <sgds-icon name=\"chevron-right\"></sgds-icon>\n      </a>\n      <div class=\"dropdown-items\">\n        <a tabindex=\"0\" role=\"button\" @click=${this._closeMenu} @keydown=${this._handleHeaderKeyboardEvent}>\n          <sgds-icon name=\"chevron-left\"></sgds-icon>\n          <span></span>\n        </a>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n\n    const desktopView = html`<sgds-dropdown\n      modifierOpt=${[\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 0]\n          }\n        }\n      ]}\n      ?disabled=${this.disabled}\n    >\n      <a\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        id=${this.togglerId}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        role=\"button\"\n        slot=\"toggler\"\n      >\n        <slot name=\"toggler\"></slot>\n        <sgds-icon name=\"chevron-down\"></sgds-icon>\n      </a>\n      <slot></slot>\n    </sgds-dropdown>`;\n\n    return this._breakpointReached ? mobileView : desktopView;\n  }\n}\n\nexport default SgdsMainnavDropdown;\n"],"names":["SgdsElement","genId","dropdownMenuStyle","mainnavDropdownStyle","html","classMap","dropdownStyle","SgdsDropdown","SgdsDropdownItem","SgdsIcon","__decorate","consume","MainnavContext","query","property","queryAssignedElements"],"mappings":"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"}
+{"version":3,"file":"sgds-mainnav-dropdown.cjs.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-dropdown.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { consume } from \"@lit/context\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport genId from \"../../utils/generateId\";\nimport dropdownStyle from \"../Dropdown/dropdown.css\";\nimport dropdownMenuStyle from \"../Dropdown/dropdown-menu.css\";\nimport mainnavDropdownStyle from \"./mainnav-dropdown.css\";\nimport SgdsDropdown from \"../Dropdown/sgds-dropdown\";\nimport SgdsDropdownItem from \"../Dropdown/sgds-dropdown-item\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { MainnavContext } from \"./mainnav-context\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nconst TAB = \"Tab\";\nconst ENTER = \"Enter\";\nconst SPACE = \" \";\n\n/**\n * @slot default - The menu items. Pass in sgds-dropdown-item as the menu items\n * @slot toggler - The content of the toggler to pass in html content.\n */\nexport class SgdsMainnavDropdown extends SgdsElement {\n  static styles = [...SgdsElement.styles, dropdownStyle, dropdownMenuStyle, mainnavDropdownStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-dropdown\": SgdsDropdown,\n    \"sgds-dropdown-item\": SgdsDropdownItem,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @consume({ context: MainnavContext, subscribe: true })\n  @state()\n  private _breakpointReached: boolean;\n\n  /** @internal */\n  @query(\".nav-link\") navLink: HTMLElement;\n\n  /** @internal */\n  @query(\".dropdown-items\") dropdownItems: HTMLElement;\n\n  /** @internal */\n  @query(\".dropdown-items a\") menuHeaderButton: HTMLElement;\n\n  /** @internal */\n  @query(\".dropdown-items span\") menuHeaderText: HTMLElement;\n\n  /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n  private togglerId: string = genId(\"dropdown\", \"button\");\n\n  /** When true,  applies active styles on the dropdown button */\n  @property({ type: Boolean })\n  active = false;\n\n  /** When true,  applies active styles on the dropdown button */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** @internal */\n  @queryAssignedElements({ slot: \"toggler\" }) private togglerNodes!: HTMLElement[];\n\n  /** @internal */\n  @queryAssignedElements() private defaultNodes!: SgdsDropdownItem[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsDropdownItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsDropdownItem[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener(\"close-dropdown-menu\", () => {\n      this._resetDropdownMenu();\n      this._hideDropdownMenuItems();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    // Clean up the event listener when the element is removed from the DOM\n    document.removeEventListener(\"close-dropdown-menu\", () => {\n      this._resetDropdownMenu();\n      this._hideDropdownMenuItems();\n    });\n  }\n\n  protected willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n\n    if (!this.shadowRoot) {\n      return;\n    }\n\n    if (this._breakpointReached) {\n      this.shadowRoot.adoptedStyleSheets = [dropdownMenuStyle.styleSheet, mainnavDropdownStyle.styleSheet];\n    }\n  }\n\n  updated() {\n    if (this._breakpointReached) {\n      this._copyTextToMenu();\n      this._resetDropdownMenu();\n      this._hideDropdownMenuItems();\n    }\n  }\n\n  private _handleSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n    items.forEach(item => {\n      item.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent.bind(this));\n\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n      dropdownItem.classList.add(\"nav-link\");\n\n      const slottedItem = (item.shadowRoot.querySelector(\".dropdown-item slot\") as HTMLSlotElement).assignedElements({\n        flatten: true\n      });\n      slottedItem.forEach(item => {\n        (item as HTMLElement).tabIndex = -1;\n      });\n    });\n  }\n\n  private _handleDesktopSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n    items.forEach(item => {\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n      dropdownItem.classList.remove(\"nav-link\");\n    });\n  }\n\n  private _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n    if (!this._breakpointReached) {\n      return;\n    }\n\n    const slottedItems = this.defaultSlotItems.filter(item => !item.hasAttribute(\"disabled\"));\n    const items = [this.menuHeaderButton, ...slottedItems];\n    const itemLength = items.length;\n    if (itemLength === 0) {\n      return;\n    }\n\n    const firstItem = items[0];\n    const lastItem = items[itemLength - 1].shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n    let activeElement = document.activeElement as HTMLElement;\n    if (activeElement === this) {\n      activeElement = this.shadowRoot.activeElement as HTMLElement;\n    }\n\n    switch (e.key) {\n      case \"Tab\": {\n        if (e.shiftKey) {\n          if (activeElement === firstItem) {\n            e.preventDefault();\n            setTimeout(() => {\n              lastItem.focus();\n            }, 0);\n          }\n        } else {\n          const activeShadowElement = activeElement.shadowRoot\n            ? activeElement.shadowRoot.querySelector(\".dropdown-item\")\n            : null;\n          if (activeShadowElement && activeShadowElement === lastItem) {\n            e.preventDefault();\n            firstItem.focus();\n          }\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  private _copyTextToMenu() {\n    this.menuHeaderText.innerHTML = this.togglerNodes[0].innerHTML;\n  }\n\n  private _hideDropdownMenuItems() {\n    this.dropdownItems.style.display = \"none\";\n    this.dropdownItems.setAttribute(\"aria-hidden\", \"true\");\n  }\n\n  private _resetDropdownMenu() {\n    const navbarBody = this._getNavbarBody();\n    navbarBody.style.removeProperty(\"transform\");\n  }\n\n  private _handleKeyboardOpen(event: KeyboardEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    if (event.key === ENTER || event.key === SPACE) {\n      event.preventDefault();\n      this._openMenu();\n    }\n  }\n\n  private _getNavbarBody() {\n    const mainNav = document.querySelector(\"sgds-mainnav\") as HTMLElement | null;\n\n    if (!mainNav?.shadowRoot) {\n      console.warn(\"sgds-mainnav or its shadowRoot not found\");\n      return;\n    }\n\n    const navbarBody = mainNav.shadowRoot.querySelector(\".navbar-body\") as HTMLElement;\n    if (!navbarBody) {\n      console.warn(\".navbar-body not found in sgds-mainnav\");\n      return;\n    }\n\n    return navbarBody;\n  }\n\n  private _openMenu() {\n    const navbarBody = this._getNavbarBody();\n    navbarBody.style.transform = \"translateX(-100%)\";\n    this.dropdownItems.style.removeProperty(\"display\");\n    this.dropdownItems.setAttribute(\"aria-hidden\", \"false\");\n    setTimeout(() => {\n      this.menuHeaderButton.focus();\n    }, 50);\n  }\n\n  private _handleHeaderKeyboardEvent(event: KeyboardEvent) {\n    switch (event.key) {\n      case TAB: {\n        this._handleKeyboardMenuItemsEvent(event);\n        break;\n      }\n      case ENTER:\n      case SPACE: {\n        event.preventDefault();\n        this._closeMenu();\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  private _closeMenu() {\n    // 200ms delay as the transform transition is set to this timing\n    this._resetDropdownMenu();\n    setTimeout(() => {\n      this._hideDropdownMenuItems();\n      this.navLink.focus();\n    }, 200);\n  }\n\n  render() {\n    const mobileView = html`\n      <a\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        role=\"button\"\n        @click=${this._openMenu}\n        @keydown=${this._handleKeyboardOpen}\n      >\n        <slot name=\"toggler\"></slot>\n        <sgds-icon name=\"chevron-right\"></sgds-icon>\n      </a>\n      <div class=\"dropdown-items\">\n        <a tabindex=\"0\" role=\"button\" @click=${this._closeMenu} @keydown=${this._handleHeaderKeyboardEvent}>\n          <sgds-icon name=\"chevron-left\"></sgds-icon>\n          <span></span>\n        </a>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n\n    const desktopView = html`<sgds-dropdown\n      modifierOpt=${[\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 0]\n          }\n        }\n      ]}\n      ?disabled=${this.disabled}\n    >\n      <a\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        id=${this.togglerId}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        role=\"button\"\n        slot=\"toggler\"\n      >\n        <slot name=\"toggler\"></slot>\n        <sgds-icon name=\"chevron-down\"></sgds-icon>\n      </a>\n      <slot @slotchange=${this._handleDesktopSlotChange}></slot>\n    </sgds-dropdown>`;\n\n    return this._breakpointReached ? mobileView : desktopView;\n  }\n}\n\nexport default SgdsMainnavDropdown;\n"],"names":["SgdsElement","genId","dropdownMenuStyle","mainnavDropdownStyle","html","classMap","dropdownStyle","SgdsDropdown","SgdsDropdownItem","SgdsIcon","__decorate","consume","MainnavContext","state","query","property","queryAssignedElements"],"mappings":"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"}

package/react/components/Mainnav/sgds-mainnav-dropdown.js

@@ -2,7 +2,7 @@
 import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { consume } from '@lit/context';
-import { query, property, queryAssignedElements } from 'lit/decorators.js';
+import { state, query, property, queryAssignedElements } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import genId from '../../utils/generateId.js';
 import css_248z from '../Dropdown/dropdown.js';
@@ -59,31 +59,32 @@ class SgdsMainnavDropdown extends SgdsElement {
             this.shadowRoot.adoptedStyleSheets = [css_248z$1.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) {
@@ -97,7 +98,7 @@ class SgdsMainnavDropdown extends SgdsElement {
             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;
@@ -114,7 +115,7 @@ class SgdsMainnavDropdown extends SgdsElement {
                 }
                 else {
                     const activeShadowElement = activeElement.shadowRoot
-                        ? activeElement.shadowRoot.querySelector(".nav-link")
+                        ? activeElement.shadowRoot.querySelector(".dropdown-item")
                         : null;
                     if (activeShadowElement && activeShadowElement === lastItem) {
                         e.preventDefault();
@@ -125,21 +126,6 @@ class SgdsMainnavDropdown extends SgdsElement {
             }
         }
     }
-    _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;
     }
@@ -255,7 +241,7 @@ class SgdsMainnavDropdown extends SgdsElement {
         <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;
     }
@@ -268,7 +254,8 @@ SgdsMainnavDropdown.dependencies = {
     "sgds-icon": SgdsIcon
 };
 __decorate([
-    consume({ context: MainnavContext, subscribe: true })
+    consume({ context: MainnavContext, subscribe: true }),
+    state()
 ], SgdsMainnavDropdown.prototype, "_breakpointReached", void 0);
 __decorate([
     query(".nav-link")