@govtechsg/sgds-web-component 3.30.0 → 3.30.1-rc.1

package/components/Mainnav/mainnav.js

@@ -1,6 +1,6 @@
 import { css } from "lit";
 //#region src/components/Mainnav/mainnav.css
-var css_248z = css`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);justify-content:flex-start;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:var(--sgds-mainnav-height,72px);padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand,::slotted(.navbar-brand){align-items:center;align-self:center;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-40);text-decoration:none;white-space:nowrap}.navbar-brand ::slotted(img){height:100%}.navbar-brand:focus-visible,::slotted(.navbar-brand:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown):not(sgds-mainnav-profile)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-end{align-items:center;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}slot[name=non-collapsible].slot-empty{display:none}slot[name=profile]{align-self:stretch;display:flex}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4)}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);height:inherit;margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
+var css_248z = css`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);justify-content:flex-start;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:var(--sgds-mainnav-height,72px);padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand,::slotted(.navbar-brand){align-items:center;align-self:center;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-40);text-decoration:none;white-space:nowrap}.navbar-brand ::slotted(img){height:100%}.navbar-brand:focus-visible,::slotted(.navbar-brand:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown):not(sgds-mainnav-profile)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-end{align-items:center;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.navbar-end--empty{display:none}slot[name=profile]{align-self:stretch;display:flex}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4)}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);height:inherit;margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}slot.slot-empty{display:none}`;
 //#endregion
 export { css_248z as default };
 

package/components/Mainnav/mainnav.js.map

@@ -1 +1 @@
-{"version":3,"file":"mainnav.js","names":[],"sources":["../../../src/components/Mainnav/mainnav.css"],"sourcesContent":[":host {\n  display: block;\n}\n\n\nnav {\n  background-color: var(--sgds-surface-default);\n  box-shadow: 0px 2px 4px 0px rgba(14, 14, 14, 0.08);\n  position: relative;\n  z-index: var(--sgds-z-index-floating);\n}\n\n.navbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  justify-content: flex-start;\n  gap: var(--sgds-gap-xs);\n  padding: 0px var(--sgds-mainnav-mobile-padding-x);\n  width: 100%;\n  max-width: var(--sgds-mainnav-max-width, 1440px);\n  min-height: var(--sgds-mainnav-height, 72px);\n  margin: auto;\n  font-size: var(--sgds-font-size-label-sm);\n}\n\n:host([fluid]) .navbar {\n  max-width: none;\n}\n\n.navbar-brand,\n::slotted(.navbar-brand) {\n  display: flex;\n  height: var(--sgds-dimension-40);\n  align-self: center;\n  align-items: center;\n  text-decoration: none;\n  white-space: nowrap;\n  color: var(--sgds-color-default);\n}\n\n.navbar-brand ::slotted(img) {\n  height: 100%;\n}\n\n.navbar-brand:focus-visible,\n::slotted(.navbar-brand:focus-visible) {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.navbar-nav {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\nnav > .navbar-body {\n  position: absolute;\n  z-index: var(--sgds-z-index-floating);\n  width: 100%;\n  background-color: var(--sgds-surface-default);\n  padding: var(--sgds-padding-md) 0px;\n  border-top: var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);\n  box-shadow: 0px 2px 4px 0px rgba(14, 14, 14, 0.08);\n  transition: transform 0.2s ease-in-out;\n}\n\nnav > .navbar-body .navbar-nav {\n  height: 100dvh;\n  max-width: var(--sgds-mainnav-max-width, 1440px);\n  margin: auto;\n}\n\nnav > .navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown):not(sgds-mainnav-profile)) {\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n}\n\n.navbar-collapse {\n  align-items: center;\n  flex-basis: 100%;\n  flex-grow: 1;\n}\n\n.navbar-toggler {\n  align-self: center;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .navbar-toggler {\n    transition: none;\n  }\n}\n\n.navbar-nav-scroll {\n  overflow-y: auto;\n}\n\n@media (min-width: 512px) {\n  .navbar-expand-sm {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-sm .navbar-nav {\n    flex-direction: row;\n  }\n\n  .navbar-expand-sm .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-sm .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-sm .navbar-toggler {\n    display: none;\n  }\n}\n@media (min-width: 768px) {\n  .navbar-expand-md {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-md .navbar-nav {\n    flex-direction: row;\n  }\n\n  .navbar-expand-md .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-md .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-md .navbar-toggler {\n    display: none;\n  }\n}\n@media (min-width: 1024px) {\n  .navbar {\n    padding: 0px var(--sgds-mainnav-padding-x);\n  }\n\n  .navbar-expand-lg {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-lg .navbar-nav {\n    flex-direction: row;\n  }\n\n  .navbar-expand-lg .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-lg .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-lg .navbar-toggler {\n    display: none;\n  }\n}\n@media (min-width: 1280px) {\n  .navbar-expand-xl {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-xl .navbar-nav {\n    flex-direction: row;\n  }\n\n  .navbar-expand-xl .navbar-nav .nav-link {\n    padding-left: var(--mainnav-nav-link-padding-x);\n    padding-right: var(--mainnav-nav-link-padding-x);\n  }\n\n  .navbar-expand-xl .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-xl .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-xl .navbar-toggler {\n    display: none;\n  }\n}\n@media (min-width: 1440px) {\n  .navbar-expand-xxl {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-xxl .navbar-nav {\n    flex-direction: row;\n  }\n\n  .navbar-expand-xxl .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-xxl .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-xxl .navbar-toggler {\n    display: none;\n  }\n}\n\n.navbar-expand {\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  gap: var(--sgds-gap-xl);\n}\n.navbar-expand .navbar-nav {\n  flex-direction: row;\n}\n\n.navbar-expand .navbar-nav-scroll {\n  overflow: visible;\n}\n\n.navbar-expand .navbar-collapse {\n  display: flex !important;\n  flex-basis: auto;\n}\n\n.navbar-expand .navbar-toggler {\n  display: none;\n}\n\n/* slot */\n\n.navbar-end {\n  display: flex;\n  align-items: center;\n  gap: var(--sgds-gap-xs);\n  margin-left: auto;\n}\n\nslot[name=\"non-collapsible\"].slot-empty {\n  display: none;\n}\n\nslot[name=\"profile\"] {\n  display: flex;\n  align-self: stretch;\n}\n\nslot[name=\"non-collapsible\"] {\n  display: flex;\n  gap: var(--sgds-spacer-4);\n  align-items: center;\n}\n\n.slot-end {\n  display: flex;\n  margin-left: auto;\n  align-items: stretch;\n  height: inherit;\n  gap: var(--sgds-gap-xs);\n}\n\n\n/* there is no wildcard selector for element tag names in css */\n.slot-end::slotted(:not([name$=\"-mainnav-item\"]):not([name$=\"-mainnav-dropdown\"])) {\n  align-self: center;\n}\n"],"mappings":""}
+{"version":3,"file":"mainnav.js","names":[],"sources":["../../../src/components/Mainnav/mainnav.css"],"sourcesContent":[":host {\n  display: block;\n}\n\nnav {\n  background-color: var(--sgds-surface-default);\n  box-shadow: 0px 2px 4px 0px rgba(14, 14, 14, 0.08);\n  position: relative;\n  z-index: var(--sgds-z-index-floating);\n}\n\n.navbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  justify-content: flex-start;\n  gap: var(--sgds-gap-xs);\n  padding: 0px var(--sgds-mainnav-mobile-padding-x);\n  width: 100%;\n  max-width: var(--sgds-mainnav-max-width, 1440px);\n  min-height: var(--sgds-mainnav-height, 72px);\n  margin: auto;\n  font-size: var(--sgds-font-size-label-sm);\n}\n\n:host([fluid]) .navbar {\n  max-width: none;\n}\n\n.navbar-brand,\n::slotted(.navbar-brand) {\n  display: flex;\n  height: var(--sgds-dimension-40);\n  align-self: center;\n  align-items: center;\n  text-decoration: none;\n  white-space: nowrap;\n  color: var(--sgds-color-default);\n}\n\n.navbar-brand ::slotted(img) {\n  height: 100%;\n}\n\n.navbar-brand:focus-visible,\n::slotted(.navbar-brand:focus-visible) {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.navbar-nav {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\nnav > .navbar-body {\n  position: absolute;\n  z-index: var(--sgds-z-index-floating);\n  width: 100%;\n  background-color: var(--sgds-surface-default);\n  padding: var(--sgds-padding-md) 0px;\n  border-top: var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);\n  box-shadow: 0px 2px 4px 0px rgba(14, 14, 14, 0.08);\n  transition: transform 0.2s ease-in-out;\n}\n\nnav > .navbar-body .navbar-nav {\n  height: 100dvh;\n  max-width: var(--sgds-mainnav-max-width, 1440px);\n  margin: auto;\n}\n\nnav > .navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown):not(sgds-mainnav-profile)) {\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n}\n\n.navbar-collapse {\n  align-items: center;\n  flex-basis: 100%;\n  flex-grow: 1;\n}\n\n.navbar-toggler {\n  align-self: center;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .navbar-toggler {\n    transition: none;\n  }\n}\n\n.navbar-nav-scroll {\n  overflow-y: auto;\n}\n\n@media (min-width: 512px) {\n  .navbar-expand-sm {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-sm .navbar-nav {\n    flex-direction: row;\n  }\n\n  .navbar-expand-sm .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-sm .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-sm .navbar-toggler {\n    display: none;\n  }\n}\n@media (min-width: 768px) {\n  .navbar-expand-md {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-md .navbar-nav {\n    flex-direction: row;\n  }\n\n  .navbar-expand-md .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-md .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-md .navbar-toggler {\n    display: none;\n  }\n}\n@media (min-width: 1024px) {\n  .navbar {\n    padding: 0px var(--sgds-mainnav-padding-x);\n  }\n\n  .navbar-expand-lg {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-lg .navbar-nav {\n    flex-direction: row;\n  }\n\n  .navbar-expand-lg .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-lg .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-lg .navbar-toggler {\n    display: none;\n  }\n}\n@media (min-width: 1280px) {\n  .navbar-expand-xl {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-xl .navbar-nav {\n    flex-direction: row;\n  }\n\n  .navbar-expand-xl .navbar-nav .nav-link {\n    padding-left: var(--mainnav-nav-link-padding-x);\n    padding-right: var(--mainnav-nav-link-padding-x);\n  }\n\n  .navbar-expand-xl .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-xl .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-xl .navbar-toggler {\n    display: none;\n  }\n}\n@media (min-width: 1440px) {\n  .navbar-expand-xxl {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    gap: var(--sgds-gap-xl);\n  }\n\n  .navbar-expand-xxl .navbar-nav {\n    flex-direction: row;\n  }\n\n  .navbar-expand-xxl .navbar-nav-scroll {\n    overflow: visible;\n  }\n\n  .navbar-expand-xxl .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n\n  .navbar-expand-xxl .navbar-toggler {\n    display: none;\n  }\n}\n\n.navbar-expand {\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  gap: var(--sgds-gap-xl);\n}\n.navbar-expand .navbar-nav {\n  flex-direction: row;\n}\n\n.navbar-expand .navbar-nav-scroll {\n  overflow: visible;\n}\n\n.navbar-expand .navbar-collapse {\n  display: flex !important;\n  flex-basis: auto;\n}\n\n.navbar-expand .navbar-toggler {\n  display: none;\n}\n\n/* slot */\n\n.navbar-end {\n  display: flex;\n  align-items: center;\n  gap: var(--sgds-gap-xs);\n  margin-left: auto;\n}\n\n.navbar-end--empty {\n  display: none;\n}\n\nslot[name=\"profile\"] {\n  display: flex;\n  align-self: stretch;\n}\n\nslot[name=\"non-collapsible\"] {\n  display: flex;\n  gap: var(--sgds-spacer-4);\n  align-items: center;\n}\n\n.slot-end {\n  display: flex;\n  margin-left: auto;\n  align-items: stretch;\n  height: inherit;\n  gap: var(--sgds-gap-xs);\n}\n\n/* there is no wildcard selector for element tag names in css */\n.slot-end::slotted(:not([name$=\"-mainnav-item\"]):not([name$=\"-mainnav-dropdown\"])) {\n  align-self: center;\n}\n\nslot.slot-empty {\n  display: none;\n}\n"],"mappings":""}

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

@@ -23,6 +23,8 @@ export declare class SgdsMainnav extends NavElement {
     private _expanded;
     /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */
     hasNonCollapsibleSlot: boolean;
+    /** Used only for SSR to indicate the presence of the `profile` slot. */
+    hasProfileSlot: boolean;
     /** When true, removes max-width constraint to allow content to stretch full screen width */
     fluid: boolean;
     private defaultNodes;

package/components/Mainnav/sgds-mainnav.js

@@ -30,8 +30,9 @@ var SgdsMainnav = class extends NavElement {
 		this._breakpointReached = false;
 		this._expanded = false;
 		this.hasNonCollapsibleSlot = false;
+		this.hasProfileSlot = false;
 		this.fluid = false;
-		this.hasSlotController = new HasSlotController(this, "non-collapsible");
+		this.hasSlotController = new HasSlotController(this, "non-collapsible", "profile");
 	}
 	static {
 		this.styles = [...NavElement.styles, css_248z];
@@ -46,6 +47,7 @@ var SgdsMainnav = class extends NavElement {
 	}
 	updated() {
 		if (!this.hasNonCollapsibleSlot) this.hasNonCollapsibleSlot = this.hasSlotController.test("non-collapsible");
+		if (!this.hasProfileSlot) this.hasProfileSlot = this.hasSlotController.test("profile");
 		this._expanded = this.expanded;
 	}
 	_onBreakpointReached(reached) {
@@ -66,7 +68,9 @@ var SgdsMainnav = class extends NavElement {
 		});
 	}
 	_handleProfileSlotChange(e) {
-		e.target.assignedElements({ flatten: true }).forEach((el) => {
+		const childElements = e.target.assignedElements({ flatten: true });
+		this.hasProfileSlot = childElements.length > 0;
+		childElements.forEach((el) => {
 			el.setAttribute("expand", this.expand);
 		});
 	}
@@ -94,9 +98,18 @@ var SgdsMainnav = class extends NavElement {
               ></slot>
             </div>
           </div>
-          <div class="navbar-end">
+          <div
+            class=${classMap({
+			"navbar-end": true,
+			"navbar-end--empty": !this.hasNonCollapsibleSlot && !this.hasProfileSlot && !this.breakpointReached
+		})}
+          >
             <slot name="non-collapsible" class=${classMap({ "slot-empty": !this.hasNonCollapsibleSlot })}></slot>
-            <slot name="profile" @slotchange=${this._handleProfileSlotChange}></slot>
+            <slot
+              name="profile"
+              class=${classMap({ "slot-empty": !this.hasProfileSlot })}
+              @slotchange=${this._handleProfileSlotChange}
+            ></slot>
             ${this._renderToggler()}
           </div>
         </div>
@@ -107,6 +120,7 @@ var SgdsMainnav = class extends NavElement {
 __decorate([provide({ context: MainnavBreakpointContext }), state()], SgdsMainnav.prototype, "_breakpointReached", void 0);
 __decorate([provide({ context: MainnavExpandedContext }), state()], SgdsMainnav.prototype, "_expanded", void 0);
 __decorate([property({ type: Boolean })], SgdsMainnav.prototype, "hasNonCollapsibleSlot", void 0);
+__decorate([property({ type: Boolean })], SgdsMainnav.prototype, "hasProfileSlot", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav.js","names":["mainnavStyle"],"sources":["../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\n\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot profile - Profile slot positioned at the far right in desktop. In mobile, moves into the collapsed menu as the first item.\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n */\nexport class SgdsMainnav extends NavElement {\n  static styles = [...NavElement.styles, mainnavStyle];\n\n  @provide({ context: MainnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: MainnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */\n  @property({ type: Boolean }) hasNonCollapsibleSlot = false;\n\n  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true })\n  fluid = false;\n\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"non-collapsible\");\n\n  updated() {\n    if (!this.hasNonCollapsibleSlot) this.hasNonCollapsibleSlot = this.hasSlotController.test(\"non-collapsible\");\n    // Sync expanded state to context\n    this._expanded = this.expanded;\n  }\n\n  protected _onBreakpointReached(reached: boolean): void {\n    this._breakpointReached = reached;\n  }\n\n  protected _isBreakpointReached(): boolean {\n    return this._breakpointReached;\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n      e.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  render() {\n    this.breakpointReached =\n      window.innerWidth <\n      (this.expand === \"always\"\n        ? -1\n        : this.expand === \"never\"\n        ? Infinity\n        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);\n\n    return html`\n      <nav aria-label=\"Main navigation\">\n        <div class=\"navbar ${this._expandClass()}\">\n          ${this.brandHref\n            ? html`<a class=\"navbar-brand\" href=${sanitizeHref(this.brandHref) ?? \"\"}>\n                <slot name=\"brand\"></slot>\n              </a>`\n            : html`<slot name=\"brand\" @slotchange=${this._handleBrandSlotChange}></slot>`}\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <div class=\"navbar-end\">\n            <slot name=\"non-collapsible\" class=${classMap({ \"slot-empty\": !this.hasNonCollapsibleSlot })}></slot>\n            <slot name=\"profile\" @slotchange=${this._handleProfileSlotChange}></slot>\n            ${this._renderToggler()}\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsMainnav;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAa,cAAb,cAAiC,WAAW;;;EAKb,KAAA,qBAAA;EAKT,KAAA,YAAA;EAGiC,KAAA,wBAAA;EAI7C,KAAA,QAAA;EAoB6B,KAAA,oBAAA,IAAI,kBAAkB,MAAM,iBAAiB;;;EApClE,KAAA,SAAA,CAAC,GAAG,WAAW,QAAQA,QAAY;;;CAuBnD,IAAI,mBAA8D;EAChE,OAAO,CAAC,GAAI,KAAK,gBAAgB,CAAC,CAAE,CAAC,CAAC,QAAQ,SAAsB,OAAO,KAAK,YAAY,WAAW;CAGzG;;CAGA,IAAI,eAA0D;EAC5D,OAAO,CAAC,GAAI,KAAK,YAAY,CAAC,CAAE,CAAC,CAAC,QAAQ,SAAsB,OAAO,KAAK,YAAY,WAAW;CAGrG;CAIA,UAAU;EACR,IAAI,CAAC,KAAK,uBAAuB,KAAK,wBAAwB,KAAK,kBAAkB,KAAK,iBAAiB;EAE3G,KAAK,YAAY,KAAK;CACxB;CAEA,qBAA+B,SAAwB;EACrD,KAAK,qBAAqB;CAC5B;CAEA,uBAA0C;EACxC,OAAO,KAAK;CACd;CAEA,yBAAiC,GAAU;EAEzC,EADyB,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CACzE,CAAC,CAAC,SAAQ,OAAM;GAC1B,GAAG,aAAa,UAAU,KAAK,MAAM;EACvC,CAAC;CACH;CAEA,kBAA0B,GAAU;EAElC,EADyB,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CACzE,CAAC,CAAC,SAAQ,MAAK;GACzB,EAAE,aAAa,QAAQ,EAAE,QAAQ,YAAY,CAAC;GAC9C,EAAE,aAAa,UAAU,KAAK,MAAM;EACtC,CAAC;CACH;CAEA,yBAAiC,GAAU;EAEzC,EADyB,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CACzE,CAAC,CAAC,SAAQ,OAAM;GAC1B,GAAG,aAAa,UAAU,KAAK,MAAM;EACvC,CAAC;CACH;CAEA,SAAS;EACP,KAAK,oBACH,OAAO,cACN,KAAK,WAAW,WACb,KACA,KAAK,WAAW,UAChB,WACA;GAAE,IAAI;GAAK,IAAI;GAAK,IAAI;GAAM,IAAI;GAAM,KAAK;EAAK,EAAE,KAAK;EAE/D,OAAO,IAAI;;6BAEc,KAAK,aAAa,EAAE;YACrC,KAAK,YACH,IAAI,gCAAgC,aAAa,KAAK,SAAS,KAAK,GAAG;;sBAGvE,IAAI,kCAAkC,KAAK,uBAAuB,UAAU;wDAClC,KAAK,WAAW;;kCAEtC,KAAK,yBAAyB;;;wBAGxC,SAAS,EAAE,YAAY,CAAC,KAAK,kBAAkB,CAAC,EAAE;8BAC5C,KAAK,kBAAkB;;;;;iDAKJ,SAAS,EAAE,cAAc,CAAC,KAAK,sBAAsB,CAAC,EAAE;+CAC1D,KAAK,yBAAyB;cAC/D,KAAK,eAAe,EAAE;;;;;CAKlC;AACF;AA5GG,WAAA,CAAA,QAAQ,EAAE,SAAS,yBAAyB,CAAC,GAC7C,MAAM,CAAA,GAAA,YAAA,WAAA,sBAAA,KAAA,CAAA;AAGN,WAAA,CAAA,QAAQ,EAAE,SAAS,uBAAuB,CAAC,GAC3C,MAAM,CAAA,GAAA,YAAA,WAAA,aAAA,KAAA,CAAA;AAKN,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,YAAA,WAAA,yBAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,SAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,sBAAsB,CAAA,GAAA,YAAA,WAAA,gBAAA,KAAA,CAAA;AAEtB,WAAA,CAAA,sBAAsB,EAAE,MAAM,MAAM,CAAC,CAAA,GAAA,YAAA,WAAA,YAAA,KAAA,CAAA"}
+{"version":3,"file":"sgds-mainnav.js","names":["mainnavStyle"],"sources":["../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\n\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot profile - Profile slot positioned at the far right in desktop. In mobile, moves into the collapsed menu as the first item.\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n */\nexport class SgdsMainnav extends NavElement {\n  static styles = [...NavElement.styles, mainnavStyle];\n\n  @provide({ context: MainnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: MainnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */\n  @property({ type: Boolean }) hasNonCollapsibleSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `profile` slot. */\n  @property({ type: Boolean }) hasProfileSlot = false;\n\n  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true })\n  fluid = false;\n\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"non-collapsible\", \"profile\");\n\n  updated() {\n    if (!this.hasNonCollapsibleSlot) this.hasNonCollapsibleSlot = this.hasSlotController.test(\"non-collapsible\");\n    if (!this.hasProfileSlot) this.hasProfileSlot = this.hasSlotController.test(\"profile\");\n    // Sync expanded state to context\n    this._expanded = this.expanded;\n  }\n\n  protected _onBreakpointReached(reached: boolean): void {\n    this._breakpointReached = reached;\n  }\n\n  protected _isBreakpointReached(): boolean {\n    return this._breakpointReached;\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n      e.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    this.hasProfileSlot = childElements.length > 0;\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  render() {\n    this.breakpointReached =\n      window.innerWidth <\n      (this.expand === \"always\"\n        ? -1\n        : this.expand === \"never\"\n        ? Infinity\n        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);\n\n    return html`\n      <nav aria-label=\"Main navigation\">\n        <div class=\"navbar ${this._expandClass()}\">\n          ${this.brandHref\n            ? html`<a class=\"navbar-brand\" href=${sanitizeHref(this.brandHref) ?? \"\"}>\n                <slot name=\"brand\"></slot>\n              </a>`\n            : html`<slot name=\"brand\" @slotchange=${this._handleBrandSlotChange}></slot>`}\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <div\n            class=${classMap({\n              \"navbar-end\": true,\n              \"navbar-end--empty\": !this.hasNonCollapsibleSlot && !this.hasProfileSlot && !this.breakpointReached\n            })}\n          >\n            <slot name=\"non-collapsible\" class=${classMap({ \"slot-empty\": !this.hasNonCollapsibleSlot })}></slot>\n            <slot\n              name=\"profile\"\n              class=${classMap({ \"slot-empty\": !this.hasProfileSlot })}\n              @slotchange=${this._handleProfileSlotChange}\n            ></slot>\n            ${this._renderToggler()}\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsMainnav;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAa,cAAb,cAAiC,WAAW;;;EAKb,KAAA,qBAAA;EAKT,KAAA,YAAA;EAGiC,KAAA,wBAAA;EAGP,KAAA,iBAAA;EAItC,KAAA,QAAA;EAoB6B,KAAA,oBAAA,IAAI,kBAAkB,MAAM,mBAAmB,SAAS;;;EAvC7E,KAAA,SAAA,CAAC,GAAG,WAAW,QAAQA,QAAY;;;CA0BnD,IAAI,mBAA8D;EAChE,OAAO,CAAC,GAAI,KAAK,gBAAgB,CAAC,CAAE,CAAC,CAAC,QAAQ,SAAsB,OAAO,KAAK,YAAY,WAAW;CAGzG;;CAGA,IAAI,eAA0D;EAC5D,OAAO,CAAC,GAAI,KAAK,YAAY,CAAC,CAAE,CAAC,CAAC,QAAQ,SAAsB,OAAO,KAAK,YAAY,WAAW;CAGrG;CAIA,UAAU;EACR,IAAI,CAAC,KAAK,uBAAuB,KAAK,wBAAwB,KAAK,kBAAkB,KAAK,iBAAiB;EAC3G,IAAI,CAAC,KAAK,gBAAgB,KAAK,iBAAiB,KAAK,kBAAkB,KAAK,SAAS;EAErF,KAAK,YAAY,KAAK;CACxB;CAEA,qBAA+B,SAAwB;EACrD,KAAK,qBAAqB;CAC5B;CAEA,uBAA0C;EACxC,OAAO,KAAK;CACd;CAEA,yBAAiC,GAAU;EAEzC,EADyB,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CACzE,CAAC,CAAC,SAAQ,OAAM;GAC1B,GAAG,aAAa,UAAU,KAAK,MAAM;EACvC,CAAC;CACH;CAEA,kBAA0B,GAAU;EAElC,EADyB,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CACzE,CAAC,CAAC,SAAQ,MAAK;GACzB,EAAE,aAAa,QAAQ,EAAE,QAAQ,YAAY,CAAC;GAC9C,EAAE,aAAa,UAAU,KAAK,MAAM;EACtC,CAAC;CACH;CAEA,yBAAiC,GAAU;EACzC,MAAM,gBAAiB,EAAE,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CAAC;EACtF,KAAK,iBAAiB,cAAc,SAAS;EAC7C,cAAc,SAAQ,OAAM;GAC1B,GAAG,aAAa,UAAU,KAAK,MAAM;EACvC,CAAC;CACH;CAEA,SAAS;EACP,KAAK,oBACH,OAAO,cACN,KAAK,WAAW,WACb,KACA,KAAK,WAAW,UAChB,WACA;GAAE,IAAI;GAAK,IAAI;GAAK,IAAI;GAAM,IAAI;GAAM,KAAK;EAAK,EAAE,KAAK;EAE/D,OAAO,IAAI;;6BAEc,KAAK,aAAa,EAAE;YACrC,KAAK,YACH,IAAI,gCAAgC,aAAa,KAAK,SAAS,KAAK,GAAG;;sBAGvE,IAAI,kCAAkC,KAAK,uBAAuB,UAAU;wDAClC,KAAK,WAAW;;kCAEtC,KAAK,yBAAyB;;;wBAGxC,SAAS,EAAE,YAAY,CAAC,KAAK,kBAAkB,CAAC,EAAE;8BAC5C,KAAK,kBAAkB;;;;;oBAKjC,SAAS;GACf,cAAc;GACd,qBAAqB,CAAC,KAAK,yBAAyB,CAAC,KAAK,kBAAkB,CAAC,KAAK;EACpF,CAAC,EAAE;;iDAEkC,SAAS,EAAE,cAAc,CAAC,KAAK,sBAAsB,CAAC,EAAE;;;sBAGnF,SAAS,EAAE,cAAc,CAAC,KAAK,eAAe,CAAC,EAAE;4BAC3C,KAAK,yBAAyB;;cAE5C,KAAK,eAAe,EAAE;;;;;CAKlC;AACF;AA1HG,WAAA,CAAA,QAAQ,EAAE,SAAS,yBAAyB,CAAC,GAC7C,MAAM,CAAA,GAAA,YAAA,WAAA,sBAAA,KAAA,CAAA;AAGN,WAAA,CAAA,QAAQ,EAAE,SAAS,uBAAuB,CAAC,GAC3C,MAAM,CAAA,GAAA,YAAA,WAAA,aAAA,KAAA,CAAA;AAKN,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,YAAA,WAAA,yBAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,YAAA,WAAA,kBAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,SAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,sBAAsB,CAAA,GAAA,YAAA,WAAA,gBAAA,KAAA,CAAA;AAEtB,WAAA,CAAA,sBAAsB,EAAE,MAAM,MAAM,CAAC,CAAA,GAAA,YAAA,WAAA,YAAA,KAAA,CAAA"}

package/components/index.umd.min.js

@@ -3669,7 +3669,7 @@ let V_=(e,t,n)=>{let r=/* @__PURE__ */ new Map;for(let i=t;i<=n;i++)r.set(e[i],i
           </slot>
         </div>
       </div>
-    `}};T([st({slot:`image`,flatten:!0})],qv.prototype,`_imageNode`,void 0),T([w({slot:`footer`})],qv.prototype,`footerNode`,void 0),T([w({slot:`link`})],qv.prototype,`linkNode`,void 0),T([x({type:Boolean,reflect:!0})],qv.prototype,`noPadding`,void 0),T([x({type:String,reflect:!0})],qv.prototype,`imagePosition`,void 0),T([x({type:String,reflect:!0})],qv.prototype,`imageAdjustment`,void 0);let Jv=am(`mainnav-context`),Yv=am(`mainnav-expanded-context`);b();var Xv=u`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);justify-content:flex-start;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:var(--sgds-mainnav-height,72px);padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand,::slotted(.navbar-brand){align-items:center;align-self:center;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-40);text-decoration:none;white-space:nowrap}.navbar-brand ::slotted(img){height:100%}.navbar-brand:focus-visible,::slotted(.navbar-brand:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown):not(sgds-mainnav-profile)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-end{align-items:center;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}slot[name=non-collapsible].slot-empty{display:none}slot[name=profile]{align-self:stretch;display:flex}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4)}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);height:inherit;margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;b();var Zv=class extends R{constructor(...e){super(...e),this._breakpointReached=!1,this._expanded=!1,this.hasNonCollapsibleSlot=!1,this.fluid=!1,this.hasSlotController=new Sm(this,`non-collapsible`)}static{this.styles=[...R.styles,Xv]}get defaultSlotItems(){return[...this.defaultNodes||[]].filter(e=>e.tagName!==void 0)}get endSlotItems(){return[...this.endNodes||[]].filter(e=>e.tagName!==void 0)}updated(){this.hasNonCollapsibleSlot||=this.hasSlotController.test(`non-collapsible`),this._expanded=this.expanded}_onBreakpointReached(e){this._breakpointReached=e}_isBreakpointReached(){return this._breakpointReached}_handleDefaultSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{e.setAttribute(`expand`,this.expand)})}_handleSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{e.setAttribute(`name`,e.tagName.toLowerCase()),e.setAttribute(`expand`,this.expand)})}_handleProfileSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{e.setAttribute(`expand`,this.expand)})}render(){return this.breakpointReached=window.innerWidth<(this.expand===`always`?-1:this.expand===`never`?1/0:{sm:512,md:768,lg:1024,xl:1280,xxl:1440}[this.expand]),v`
+    `}};T([st({slot:`image`,flatten:!0})],qv.prototype,`_imageNode`,void 0),T([w({slot:`footer`})],qv.prototype,`footerNode`,void 0),T([w({slot:`link`})],qv.prototype,`linkNode`,void 0),T([x({type:Boolean,reflect:!0})],qv.prototype,`noPadding`,void 0),T([x({type:String,reflect:!0})],qv.prototype,`imagePosition`,void 0),T([x({type:String,reflect:!0})],qv.prototype,`imageAdjustment`,void 0);let Jv=am(`mainnav-context`),Yv=am(`mainnav-expanded-context`);b();var Xv=u`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);justify-content:flex-start;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:var(--sgds-mainnav-height,72px);padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand,::slotted(.navbar-brand){align-items:center;align-self:center;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-40);text-decoration:none;white-space:nowrap}.navbar-brand ::slotted(img){height:100%}.navbar-brand:focus-visible,::slotted(.navbar-brand:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown):not(sgds-mainnav-profile)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-end{align-items:center;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.navbar-end--empty{display:none}slot[name=profile]{align-self:stretch;display:flex}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4)}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);height:inherit;margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}slot.slot-empty{display:none}`;b();var Zv=class extends R{constructor(...e){super(...e),this._breakpointReached=!1,this._expanded=!1,this.hasNonCollapsibleSlot=!1,this.hasProfileSlot=!1,this.fluid=!1,this.hasSlotController=new Sm(this,`non-collapsible`,`profile`)}static{this.styles=[...R.styles,Xv]}get defaultSlotItems(){return[...this.defaultNodes||[]].filter(e=>e.tagName!==void 0)}get endSlotItems(){return[...this.endNodes||[]].filter(e=>e.tagName!==void 0)}updated(){this.hasNonCollapsibleSlot||=this.hasSlotController.test(`non-collapsible`),this.hasProfileSlot||=this.hasSlotController.test(`profile`),this._expanded=this.expanded}_onBreakpointReached(e){this._breakpointReached=e}_isBreakpointReached(){return this._breakpointReached}_handleDefaultSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{e.setAttribute(`expand`,this.expand)})}_handleSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{e.setAttribute(`name`,e.tagName.toLowerCase()),e.setAttribute(`expand`,this.expand)})}_handleProfileSlotChange(e){let t=e.target.assignedElements({flatten:!0});this.hasProfileSlot=t.length>0,t.forEach(e=>{e.setAttribute(`expand`,this.expand)})}render(){return this.breakpointReached=window.innerWidth<(this.expand===`always`?-1:this.expand===`never`?1/0:{sm:512,md:768,lg:1024,xl:1280,xxl:1440}[this.expand]),v`
       <nav aria-label="Main navigation">
         <div class="navbar ${this._expandClass()}">
           ${this.brandHref?v`<a class="navbar-brand" href=${em(this.brandHref)??``}>
@@ -3685,14 +3685,20 @@ let V_=(e,t,n)=>{let r=/* @__PURE__ */ new Map;for(let i=t;i<=n;i++)r.set(e[i],i
               ></slot>
             </div>
           </div>
-          <div class="navbar-end">
+          <div
+            class=${D({"navbar-end":!0,"navbar-end--empty":!this.hasNonCollapsibleSlot&&!this.hasProfileSlot&&!this.breakpointReached})}
+          >
             <slot name="non-collapsible" class=${D({"slot-empty":!this.hasNonCollapsibleSlot})}></slot>
-            <slot name="profile" @slotchange=${this._handleProfileSlotChange}></slot>
+            <slot
+              name="profile"
+              class=${D({"slot-empty":!this.hasProfileSlot})}
+              @slotchange=${this._handleProfileSlotChange}
+            ></slot>
             ${this._renderToggler()}
           </div>
         </div>
       </nav>
-    `}};T([um({context:Jv}),S()],Zv.prototype,`_breakpointReached`,void 0),T([um({context:Yv}),S()],Zv.prototype,`_expanded`,void 0),T([x({type:Boolean})],Zv.prototype,`hasNonCollapsibleSlot`,void 0),T([x({type:Boolean,reflect:!0})],Zv.prototype,`fluid`,void 0),T([w()],Zv.prototype,`defaultNodes`,void 0),T([w({slot:`end`})],Zv.prototype,`endNodes`,void 0),b();var Qv=u`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;background:none;border:none;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-family:inherit;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-align:left;text-decoration:none;width:100%}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}:host([tone=brand][expand=always]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=always]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=sm]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=md]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=lg]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xxl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;b();let $v=`Enter`;var ey=class extends E{constructor(...e){super(...e),this._breakpointReached=!0,this.togglerId=mm(`dropdown`,`button`),this.active=!1,this.disabled=!1}static{this.styles=[...E.styles,Xg,Yg,Qv]}static{this.dependencies={"sgds-dropdown":Zg,"sgds-dropdown-item":s_,"sgds-icon":I}}get defaultSlotItems(){return[...this.defaultNodes||[]].filter(e=>e.tagName!==void 0)}updated(){this._breakpointReached&&(this._copyTextToMenu(),this._resetDropdownMenu(),this._hideDropdownMenuItems())}_handleSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{e.addEventListener(`keydown`,this._handleKeyboardMenuItemsEvent.bind(this));let t=e.shadowRoot.querySelector(`.dropdown-item`);t.classList.add(`mainnav-dropdown-link`);let n=e.shadowRoot?.querySelector(`a`)||e.querySelector(`a`);n.tabIndex=-1,t.classList.contains(`disabled`)?(n.setAttribute(`href`,`javascript:void(0)`),n.setAttribute(`tabindex`,`-1`)):n.addEventListener(`click`,e=>{e.target.closest(`sgds-mainnav`).hide()})})}_handleDesktopSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{let t=e.shadowRoot.querySelector(`.dropdown-item`);t.classList.remove(`mainnav-dropdown-link`),e.shadowRoot.querySelector(`.dropdown-item slot`).assignedElements({flatten:!0}).forEach(e=>{t.classList.contains(`disabled`)&&(e.setAttribute(`href`,`javascript:void(0)`),e.setAttribute(`tabindex`,`-1`))})})}_handleKeyboardMenuItemsEvent(e){if(!this._breakpointReached)return;let t=this.defaultSlotItems.filter(e=>!e.hasAttribute(`disabled`)),n=[this.menuHeaderButton,...t],r=n.length;if(r===0)return;let i=n[0],a=n[r-1].shadowRoot.querySelector(`.dropdown-item`),o=document.activeElement;if(o===this&&(o=this.shadowRoot.activeElement),e.key===`Tab`){if(e.shiftKey)o===i&&(e.preventDefault(),setTimeout(()=>{a.focus()},0));else{let t=o.shadowRoot?o.shadowRoot.querySelector(`.dropdown-item`):null;t&&t===a&&(e.preventDefault(),i.focus())}}}_copyTextToMenu(){this.menuHeaderText.textContent=this.togglerNodes[0].textContent}_handleTogglerSlotChange(){}_hideDropdownMenuItems(){this.dropdownItems.style.display=`none`,this.dropdownItems.setAttribute(`aria-hidden`,`true`)}_resetDropdownMenu(){let e=this._getNavbarBody();return e?new Promise(t=>{let n=r=>{r.propertyName===`transform`&&(e.removeEventListener(`transitionend`,n),t())};getComputedStyle(e).transitionProperty.includes(`transform`)?(e.addEventListener(`transitionend`,n),e.style.removeProperty(`transform`)):(e.style.removeProperty(`transform`),t())}):Promise.resolve()}_handleKeyboardOpen(e){this.disabled||(e.key===$v||e.key===` `)&&(e.preventDefault(),this._openMenu())}_getNavbarBody(){let e=document.querySelector(`sgds-mainnav`);if(!e?.shadowRoot){console.warn(`sgds-mainnav or its shadowRoot not found`);return}let t=e.shadowRoot.querySelector(`.navbar-body`);if(!t){console.warn(`.navbar-body not found in sgds-mainnav`);return}return t}_openMenu(){let e=this._getNavbarBody();e.style.transform=`translateX(-100%)`,this.dropdownItems.style.removeProperty(`display`),this.dropdownItems.setAttribute(`aria-hidden`,`false`),setTimeout(()=>{this.menuHeaderButton.focus()},50)}_handleHeaderKeyboardEvent(e){switch(e.key){case`Tab`:this._handleKeyboardMenuItemsEvent(e);break;case $v:case` `:e.preventDefault(),this._closeMenu()}}async _closeMenu(){await this._resetDropdownMenu(),this._hideDropdownMenuItems(),this.navLink.focus()}render(){let e=v`
+    `}};T([um({context:Jv}),S()],Zv.prototype,`_breakpointReached`,void 0),T([um({context:Yv}),S()],Zv.prototype,`_expanded`,void 0),T([x({type:Boolean})],Zv.prototype,`hasNonCollapsibleSlot`,void 0),T([x({type:Boolean})],Zv.prototype,`hasProfileSlot`,void 0),T([x({type:Boolean,reflect:!0})],Zv.prototype,`fluid`,void 0),T([w()],Zv.prototype,`defaultNodes`,void 0),T([w({slot:`end`})],Zv.prototype,`endNodes`,void 0),b();var Qv=u`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;background:none;border:none;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-family:inherit;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-align:left;text-decoration:none;width:100%}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}:host([tone=brand][expand=always]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=always]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=sm]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=md]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=lg]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xxl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;b();let $v=`Enter`;var ey=class extends E{constructor(...e){super(...e),this._breakpointReached=!0,this.togglerId=mm(`dropdown`,`button`),this.active=!1,this.disabled=!1}static{this.styles=[...E.styles,Xg,Yg,Qv]}static{this.dependencies={"sgds-dropdown":Zg,"sgds-dropdown-item":s_,"sgds-icon":I}}get defaultSlotItems(){return[...this.defaultNodes||[]].filter(e=>e.tagName!==void 0)}updated(){this._breakpointReached&&(this._copyTextToMenu(),this._resetDropdownMenu(),this._hideDropdownMenuItems())}_handleSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{e.addEventListener(`keydown`,this._handleKeyboardMenuItemsEvent.bind(this));let t=e.shadowRoot.querySelector(`.dropdown-item`);t.classList.add(`mainnav-dropdown-link`);let n=e.shadowRoot?.querySelector(`a`)||e.querySelector(`a`);n.tabIndex=-1,t.classList.contains(`disabled`)?(n.setAttribute(`href`,`javascript:void(0)`),n.setAttribute(`tabindex`,`-1`)):n.addEventListener(`click`,e=>{e.target.closest(`sgds-mainnav`).hide()})})}_handleDesktopSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{let t=e.shadowRoot.querySelector(`.dropdown-item`);t.classList.remove(`mainnav-dropdown-link`),e.shadowRoot.querySelector(`.dropdown-item slot`).assignedElements({flatten:!0}).forEach(e=>{t.classList.contains(`disabled`)&&(e.setAttribute(`href`,`javascript:void(0)`),e.setAttribute(`tabindex`,`-1`))})})}_handleKeyboardMenuItemsEvent(e){if(!this._breakpointReached)return;let t=this.defaultSlotItems.filter(e=>!e.hasAttribute(`disabled`)),n=[this.menuHeaderButton,...t],r=n.length;if(r===0)return;let i=n[0],a=n[r-1].shadowRoot.querySelector(`.dropdown-item`),o=document.activeElement;if(o===this&&(o=this.shadowRoot.activeElement),e.key===`Tab`){if(e.shiftKey)o===i&&(e.preventDefault(),setTimeout(()=>{a.focus()},0));else{let t=o.shadowRoot?o.shadowRoot.querySelector(`.dropdown-item`):null;t&&t===a&&(e.preventDefault(),i.focus())}}}_copyTextToMenu(){this.menuHeaderText.textContent=this.togglerNodes[0].textContent}_handleTogglerSlotChange(){}_hideDropdownMenuItems(){this.dropdownItems.style.display=`none`,this.dropdownItems.setAttribute(`aria-hidden`,`true`)}_resetDropdownMenu(){let e=this._getNavbarBody();return e?new Promise(t=>{let n=r=>{r.propertyName===`transform`&&(e.removeEventListener(`transitionend`,n),t())};getComputedStyle(e).transitionProperty.includes(`transform`)?(e.addEventListener(`transitionend`,n),e.style.removeProperty(`transform`)):(e.style.removeProperty(`transform`),t())}):Promise.resolve()}_handleKeyboardOpen(e){this.disabled||(e.key===$v||e.key===` `)&&(e.preventDefault(),this._openMenu())}_getNavbarBody(){let e=document.querySelector(`sgds-mainnav`);if(!e?.shadowRoot){console.warn(`sgds-mainnav or its shadowRoot not found`);return}let t=e.shadowRoot.querySelector(`.navbar-body`);if(!t){console.warn(`.navbar-body not found in sgds-mainnav`);return}return t}_openMenu(){let e=this._getNavbarBody();e.style.transform=`translateX(-100%)`,this.dropdownItems.style.removeProperty(`display`),this.dropdownItems.setAttribute(`aria-hidden`,`false`),setTimeout(()=>{this.menuHeaderButton.focus()},50)}_handleHeaderKeyboardEvent(e){switch(e.key){case`Tab`:this._handleKeyboardMenuItemsEvent(e);break;case $v:case` `:e.preventDefault(),this._closeMenu()}}async _closeMenu(){await this._resetDropdownMenu(),this._hideDropdownMenuItems(),this.navLink.focus()}render(){let e=v`
       <button
         class="${D({"nav-link":!0,active:this.active,disabled:this.disabled})}"
         aria-disabled=${this.disabled?`true`:`false`}