@govtechsg/sgds-web-component 3.30.1-rc.7 → 3.30.1-rc.9

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

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/Mainnav/mainnav-item.css
-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:512px){: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)}}@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)}}@media screen and (min-width:1024px){: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)}}@media screen and (min-width:1280px){: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)}}@media screen and (min-width:1440px){: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)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);--sgds-link-color-emphasis:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-color-default)!important;cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);height:auto!important;line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important}:host([tone=brand][expand=always]) ::slotted(*),:host([tone^=gradient][expand=always]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) ::slotted(*),:host([tone^=gradient][expand=sm]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) ::slotted(*),:host([tone^=gradient][expand=md]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) ::slotted(*),:host([tone^=gradient][expand=lg]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) ::slotted(*),:host([tone^=gradient][expand=xl]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) ::slotted(*),:host([tone^=gradient][expand=xxl]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}@media screen and (min-width:512px){:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:768px){:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:active){color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:active){color:var(--sgds-primary-color-default)!important}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
+var css_248z = css`.mainnav-item{--sgds-link-color-default:var(--sgds-color-default);--sgds-link-color-emphasis:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs,20px)}:host([expand=always]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}@media screen and (min-width:512px){:host([expand=sm]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=sm]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:768px){:host([expand=md]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=md]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1024px){:host([expand=lg]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=lg]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1280px){:host([expand=xl]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=xl]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1440px){:host([expand=xxl]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}:host(:not([disabled])[active][expand=xxl]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}:host(:not([disabled])[active]) .mainnav-item{--sgds-link-color-default:var(--sgds-primary-color-default);--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)}:host([tone=brand][expand=always]) .mainnav-item,:host([tone^=gradient][expand=always]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .mainnav-item,:host([tone^=gradient][expand=sm]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .mainnav-item,:host([tone^=gradient][expand=md]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .mainnav-item,:host([tone^=gradient][expand=lg]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .mainnav-item,:host([tone^=gradient][expand=xl]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .mainnav-item,:host([tone^=gradient][expand=xxl]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}:host([tone=brand][expand=always]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=always]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=sm]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=md]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=lg]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=xl]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=xxl]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}.mainnav-item:focus-within{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) .mainnav-item{cursor:not-allowed;opacity:var(--sgds-opacity-40)}::slotted(*){color:inherit!important;padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important}:host([expand=always]) ::slotted(*){padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1024px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}::slotted(a:focus-visible){outline:none}`;
 //#endregion
 export { css_248z as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"mainnav-item.js","names":[],"sources":["../../../../src/components/Mainnav/mainnav-item.css"],"sourcesContent":[":host([expand=\"always\"]) ::slotted(*) {\n  padding: 0px var(--sgds-padding-md);\n  border-bottom: var(--sgds-border-width-4) solid transparent;\n  min-height: 100%;\n}\n\n@media screen and (min-width: 512px) {\n  :host([expand=\"sm\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"sm\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([expand=\"md\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"md\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([expand=\"lg\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"lg\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([expand=\"xl\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"xl\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([expand=\"xxl\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"xxl\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (max-width: 511px) {\n  :host(:not([disabled])[active][expand=\"sm\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 767px) {\n  :host(:not([disabled])[active][expand=\"md\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1023px) {\n  :host(:not([disabled])[active][expand=\"lg\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1279px) {\n  :host(:not([disabled])[active][expand=\"xl\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1439px) {\n  :host(:not([disabled])[active][expand=\"xxl\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n::slotted(*) {\n  --sgds-link-color-default: var(--sgds-color-default);\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  display: flex;\n  cursor: pointer;\n  height: auto !important;\n  text-decoration: none !important;\n  align-items: center;\n  color: var(--sgds-color-default) !important;\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  box-sizing: border-box;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n}\n\n:host([tone=\"brand\"][expand=\"always\"]) ::slotted(*),\n:host([tone^=\"gradient\"][expand=\"always\"]) ::slotted(*) {\n  --sgds-link-color-default: var(--sgds-color-fixed-light);\n  --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n  color: var(--sgds-color-fixed-light) !important;\n}\n\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) ::slotted(*),\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) ::slotted(*) {\n  border-color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"sm\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"md\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"lg\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xl\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  ::slotted(*) {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}\n\n:host(:not([disabled])[active]) ::slotted(*) {\n  --sgds-link-color-default: var(--sgds-primary-color-default);\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-primary-color-default) !important;\n}\n\n:host(:not([disabled]):not([active])) ::slotted(a:hover) {\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  color: var(--sgds-color-default) !important;\n}\n\n:host(:not([disabled])[active]) ::slotted(a:hover) {\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-primary-color-default) !important;\n}\n\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) ::slotted(*),\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) ::slotted(a:hover),\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) ::slotted(*),\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) ::slotted(a:hover) {\n  --sgds-link-color-default: var(--sgds-color-fixed-light);\n  --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n  color: var(--sgds-color-fixed-light) !important;\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n:host([disabled]) ::slotted(a:hover) {\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  color: var(--sgds-color-default) !important;\n}\n\n:host(:not([disabled]):not([active])) ::slotted(a:active) {\n  color: var(--sgds-color-default) !important;\n}\n\n:host(:not([disabled])[active]) ::slotted(a:active) {\n  color: var(--sgds-primary-color-default) !important;\n}\n\n::slotted(a:focus-visible) {\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-primary-color-default) !important;\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([disabled]) ::slotted(*) {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n}\n"],"mappings":""}
+{"version":3,"file":"mainnav-item.js","names":[],"sources":["../../../../src/components/Mainnav/mainnav-item.css"],"sourcesContent":["/* ===== .mainnav-item (inner shadow DOM — protected from external CSS) ===== */\n\n.mainnav-item {\n  display: flex;\n  align-items: center;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n  box-sizing: border-box;\n  cursor: pointer;\n  --sgds-link-color-default: var(--sgds-color-default);\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  color: var(--sgds-color-default);\n}\n\n/* Expand variants — border-bottom active indicator + min-height */\n\n:host([expand=\"always\"]) .mainnav-item {\n  border-bottom: var(--sgds-border-width-4) solid transparent;\n  min-height: 100%;\n}\n\n@media screen and (min-width: 512px) {\n  :host([expand=\"sm\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"sm\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([expand=\"md\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"md\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([expand=\"lg\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"lg\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([expand=\"xl\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"xl\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([expand=\"xxl\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"xxl\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n/* Mobile active — background-color */\n\n@media screen and (max-width: 511px) {\n  :host(:not([disabled])[active][expand=\"sm\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 767px) {\n  :host(:not([disabled])[active][expand=\"md\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1023px) {\n  :host(:not([disabled])[active][expand=\"lg\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1279px) {\n  :host(:not([disabled])[active][expand=\"xl\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1439px) {\n  :host(:not([disabled])[active][expand=\"xxl\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n/* Active state — color */\n\n:host(:not([disabled])[active]) .mainnav-item {\n  --sgds-link-color-default: var(--sgds-primary-color-default);\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-primary-color-default);\n}\n\n/* Tone brand/gradient — color */\n\n:host([tone=\"brand\"][expand=\"always\"]) .mainnav-item,\n:host([tone^=\"gradient\"][expand=\"always\"]) .mainnav-item {\n  --sgds-link-color-default: var(--sgds-color-fixed-light);\n  --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n  color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"sm\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"md\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"lg\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"xl\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n/* Tone brand/gradient — active border-color */\n\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) .mainnav-item,\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) .mainnav-item {\n  border-color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n/* Focus-within — outline on wrapper, anchor inherits color */\n\n.mainnav-item:focus-within {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n/* Disabled */\n\n:host([disabled]) .mainnav-item {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n}\n\n/* ===== ::slotted (light DOM — minimal anchor overrides) ===== */\n\n::slotted(*) {\n  text-decoration: none !important;\n  color: inherit !important;\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n}\n\n/* Expand variants — padding */\n\n:host([expand=\"always\"]) ::slotted(*) {\n  padding: 0px var(--sgds-padding-md);\n}\n\n@media screen and (min-width: 512px) {\n  :host([expand=\"sm\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([expand=\"md\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([expand=\"lg\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([expand=\"xl\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([expand=\"xxl\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n/* Desktop padding override */\n\n@media screen and (min-width: 1024px) {\n  ::slotted(*) {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}\n\n/* Focus-visible — suppress anchor outline, wrapper handles it */\n\n::slotted(a:focus-visible) {\n  outline: none;\n}\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Mainnav/mainnav.css
-var css_248z = require("lit").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}`;
+var css_248z = require("lit").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{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,.navbar-brand:focus-within{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-brand ::slotted(a:focus-visible){outline:none}.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
 exports.default = css_248z;
 

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

@@ -1 +1 @@
-{"version":3,"file":"mainnav.cjs.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":""}
+{"version":3,"file":"mainnav.cjs.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  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.navbar-brand:focus-within {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.navbar-brand ::slotted(a:focus-visible) {\n  outline: none;\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/react/components/Mainnav/mainnav.js

@@ -1,7 +1,7 @@
 "use client";
 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}.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}`;
+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{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,.navbar-brand:focus-within{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-brand ::slotted(a:focus-visible){outline:none}.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/react/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\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":""}
+{"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  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.navbar-brand:focus-within {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.navbar-brand ::slotted(a:focus-visible) {\n  outline: none;\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/react/components/Mainnav/sgds-mainnav-dropdown.cjs.js

@@ -197,7 +197,7 @@ var SgdsMainnavDropdown = class extends require_sgds_element.default {
         @click=${this._openMenu}
         @keydown=${this._handleKeyboardOpen}
       >
-        <slot name="toggler" @slotchange=${this._handleTogglerSlotChange}></slot>
+        <span class="toggler-wrapper"><slot name="toggler" @slotchange=${this._handleTogglerSlotChange}></slot></span>
         <sgds-icon name="chevron-right" size="md"></sgds-icon>
       </button>
       <div class="dropdown-items">
@@ -224,7 +224,7 @@ var SgdsMainnavDropdown = class extends require_sgds_element.default {
         ?disabled=${this.disabled}
         slot="toggler"
       >
-        <slot name="toggler" @slotchange=${this._handleTogglerSlotChange}></slot>
+        <span class="toggler-wrapper"><slot name="toggler" @slotchange=${this._handleTogglerSlotChange}></slot></span>
         <sgds-icon name="chevron-down" size="md"></sgds-icon>
       </button>
       <slot @slotchange=${this._handleDesktopSlotChange}></slot>

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav-dropdown.cjs.js","names":["SgdsElement","genId","dropdownStyle","dropdownMenuStyle","mainnavDropdownStyle","SgdsDropdown","SgdsDropdownItem","SgdsIcon","classMap","ifDefined","offset","consume","MainnavBreakpointContext","state","MainnavExpandedContext","query","property","queryAssignedElements"],"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 { SgdsMainnav } from \"./sgds-mainnav\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { offset } from \"@floating-ui/dom\";\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 { MainnavBreakpointContext, MainnavExpandedContext } 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: MainnavBreakpointContext, subscribe: true })\n  @state()\n  private _breakpointReached = true;\n\n  @consume({ context: MainnavExpandedContext, subscribe: true })\n  @state()\n  private expanded: 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  /**\n   * Accessible label for the dropdown's toggle button. Forwarded to the button's aria-label attribute.\n   */\n  @property({ type: String })\n  ariaLabel: string;\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  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(\"mainnav-dropdown-link\");\n\n      const link = item.shadowRoot?.querySelector(\"a\") || item.querySelector(\"a\");\n      link.tabIndex = -1;\n      if (dropdownItem.classList.contains(\"disabled\")) {\n        link.setAttribute(\"href\", \"javascript:void(0)\");\n        link.setAttribute(\"tabindex\", \"-1\");\n      } else {\n        link.addEventListener(\"click\", (e: Event) => {\n          const target = e.target as HTMLElement;\n          const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n          mainnav.hide();\n        });\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(\"mainnav-dropdown-link\");\n\n      const slottedItem = (item.shadowRoot.querySelector(\".dropdown-item slot\") as HTMLSlotElement).assignedElements({\n        flatten: true\n      });\n      slottedItem.forEach(item => {\n        if (dropdownItem.classList.contains(\"disabled\")) {\n          item.setAttribute(\"href\", \"javascript:void(0)\");\n          item.setAttribute(\"tabindex\", \"-1\");\n        }\n      });\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.textContent = this.togglerNodes[0].textContent;\n  }\n\n  private _handleTogglerSlotChange() {\n    // no-op: toggler slot change handled by _copyTextToMenu in mobile view\n  }\n\n  private _hideDropdownMenuItems() {\n    this.dropdownItems.style.display = \"none\";\n    this.dropdownItems.setAttribute(\"aria-hidden\", \"true\");\n  }\n\n  private _resetDropdownMenu(): Promise<void> {\n    const navbarBody = this._getNavbarBody();\n    if (!navbarBody) return Promise.resolve();\n\n    return new Promise(resolve => {\n      const onEnd = (event: TransitionEvent) => {\n        if (event.propertyName === \"transform\") {\n          navbarBody.removeEventListener(\"transitionend\", onEnd);\n          resolve();\n        }\n      };\n\n      const hasTransition = getComputedStyle(navbarBody).transitionProperty.includes(\"transform\");\n\n      if (hasTransition) {\n        navbarBody.addEventListener(\"transitionend\", onEnd);\n        navbarBody.style.removeProperty(\"transform\");\n      } else {\n        navbarBody.style.removeProperty(\"transform\");\n        resolve();\n      }\n    });\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 async _closeMenu() {\n    await this._resetDropdownMenu();\n    this._hideDropdownMenuItems();\n    this.navLink.focus();\n  }\n\n  render() {\n    const mobileView = html`\n      <button\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        aria-label=${ifDefined(this.ariaLabel)}\n        ?disabled=${this.disabled}\n        @click=${this._openMenu}\n        @keydown=${this._handleKeyboardOpen}\n      >\n        <slot name=\"toggler\" @slotchange=${this._handleTogglerSlotChange}></slot>\n        <sgds-icon name=\"chevron-right\" size=\"md\"></sgds-icon>\n      </button>\n      <div class=\"dropdown-items\">\n        <a tabindex=\"0\" role=\"button\" @click=${this._closeMenu} @keydown=${this._handleHeaderKeyboardEvent}>\n          <sgds-icon name=\"chevron-left\" size=\"md\"></sgds-icon>\n          <span></span>\n        </a>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n\n    const desktopView = html`<sgds-dropdown\n      .floatingOpts=${{\n        middleware: [offset(0)]\n      }}\n      ?disabled=${this.disabled}\n    >\n      <button\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        aria-label=${ifDefined(this.ariaLabel)}\n        id=${this.togglerId}\n        ?disabled=${this.disabled}\n        slot=\"toggler\"\n      >\n        <slot name=\"toggler\" @slotchange=${this._handleTogglerSlotChange}></slot>\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </button>\n      <slot @slotchange=${this._handleDesktopSlotChange}></slot>\n    </sgds-dropdown>`;\n\n    return this._breakpointReached ? mobileView : desktopView;\n  }\n}\n\nexport default SgdsMainnavDropdown;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-mainnav-dropdown.cjs.js","names":["SgdsElement","genId","dropdownStyle","dropdownMenuStyle","mainnavDropdownStyle","SgdsDropdown","SgdsDropdownItem","SgdsIcon","classMap","ifDefined","offset","consume","MainnavBreakpointContext","state","MainnavExpandedContext","query","property","queryAssignedElements"],"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 { SgdsMainnav } from \"./sgds-mainnav\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { offset } from \"@floating-ui/dom\";\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 { MainnavBreakpointContext, MainnavExpandedContext } 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: MainnavBreakpointContext, subscribe: true })\n  @state()\n  private _breakpointReached = true;\n\n  @consume({ context: MainnavExpandedContext, subscribe: true })\n  @state()\n  private expanded: 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  /**\n   * Accessible label for the dropdown's toggle button. Forwarded to the button's aria-label attribute.\n   */\n  @property({ type: String })\n  ariaLabel: string;\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  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(\"mainnav-dropdown-link\");\n\n      const link = item.shadowRoot?.querySelector(\"a\") || item.querySelector(\"a\");\n      link.tabIndex = -1;\n      if (dropdownItem.classList.contains(\"disabled\")) {\n        link.setAttribute(\"href\", \"javascript:void(0)\");\n        link.setAttribute(\"tabindex\", \"-1\");\n      } else {\n        link.addEventListener(\"click\", (e: Event) => {\n          const target = e.target as HTMLElement;\n          const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n          mainnav.hide();\n        });\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(\"mainnav-dropdown-link\");\n\n      const slottedItem = (item.shadowRoot.querySelector(\".dropdown-item slot\") as HTMLSlotElement).assignedElements({\n        flatten: true\n      });\n      slottedItem.forEach(item => {\n        if (dropdownItem.classList.contains(\"disabled\")) {\n          item.setAttribute(\"href\", \"javascript:void(0)\");\n          item.setAttribute(\"tabindex\", \"-1\");\n        }\n      });\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.textContent = this.togglerNodes[0].textContent;\n  }\n\n  private _handleTogglerSlotChange() {\n    // no-op: toggler slot change handled by _copyTextToMenu in mobile view\n  }\n\n  private _hideDropdownMenuItems() {\n    this.dropdownItems.style.display = \"none\";\n    this.dropdownItems.setAttribute(\"aria-hidden\", \"true\");\n  }\n\n  private _resetDropdownMenu(): Promise<void> {\n    const navbarBody = this._getNavbarBody();\n    if (!navbarBody) return Promise.resolve();\n\n    return new Promise(resolve => {\n      const onEnd = (event: TransitionEvent) => {\n        if (event.propertyName === \"transform\") {\n          navbarBody.removeEventListener(\"transitionend\", onEnd);\n          resolve();\n        }\n      };\n\n      const hasTransition = getComputedStyle(navbarBody).transitionProperty.includes(\"transform\");\n\n      if (hasTransition) {\n        navbarBody.addEventListener(\"transitionend\", onEnd);\n        navbarBody.style.removeProperty(\"transform\");\n      } else {\n        navbarBody.style.removeProperty(\"transform\");\n        resolve();\n      }\n    });\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 async _closeMenu() {\n    await this._resetDropdownMenu();\n    this._hideDropdownMenuItems();\n    this.navLink.focus();\n  }\n\n  render() {\n    const mobileView = html`\n      <button\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        aria-label=${ifDefined(this.ariaLabel)}\n        ?disabled=${this.disabled}\n        @click=${this._openMenu}\n        @keydown=${this._handleKeyboardOpen}\n      >\n        <span class=\"toggler-wrapper\"><slot name=\"toggler\" @slotchange=${this._handleTogglerSlotChange}></slot></span>\n        <sgds-icon name=\"chevron-right\" size=\"md\"></sgds-icon>\n      </button>\n      <div class=\"dropdown-items\">\n        <a tabindex=\"0\" role=\"button\" @click=${this._closeMenu} @keydown=${this._handleHeaderKeyboardEvent}>\n          <sgds-icon name=\"chevron-left\" size=\"md\"></sgds-icon>\n          <span></span>\n        </a>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n\n    const desktopView = html`<sgds-dropdown\n      .floatingOpts=${{\n        middleware: [offset(0)]\n      }}\n      ?disabled=${this.disabled}\n    >\n      <button\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        aria-label=${ifDefined(this.ariaLabel)}\n        id=${this.togglerId}\n        ?disabled=${this.disabled}\n        slot=\"toggler\"\n      >\n        <span class=\"toggler-wrapper\"><slot name=\"toggler\" @slotchange=${this._handleTogglerSlotChange}></slot></span>\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </button>\n      <slot @slotchange=${this._handleDesktopSlotChange}></slot>\n    </sgds-dropdown>`;\n\n    return this._breakpointReached ? mobileView : desktopView;\n  }\n}\n\nexport default SgdsMainnavDropdown;\n"],"mappings":"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"}

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

@@ -197,7 +197,7 @@ var SgdsMainnavDropdown = class extends SgdsElement {
         @click=${this._openMenu}
         @keydown=${this._handleKeyboardOpen}
       >
-        <slot name="toggler" @slotchange=${this._handleTogglerSlotChange}></slot>
+        <span class="toggler-wrapper"><slot name="toggler" @slotchange=${this._handleTogglerSlotChange}></slot></span>
         <sgds-icon name="chevron-right" size="md"></sgds-icon>
       </button>
       <div class="dropdown-items">
@@ -224,7 +224,7 @@ var SgdsMainnavDropdown = class extends SgdsElement {
         ?disabled=${this.disabled}
         slot="toggler"
       >
-        <slot name="toggler" @slotchange=${this._handleTogglerSlotChange}></slot>
+        <span class="toggler-wrapper"><slot name="toggler" @slotchange=${this._handleTogglerSlotChange}></slot></span>
         <sgds-icon name="chevron-down" size="md"></sgds-icon>
       </button>
       <slot @slotchange=${this._handleDesktopSlotChange}></slot>

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav-dropdown.js","names":["genId","dropdownStyle","dropdownMenuStyle","mainnavDropdownStyle"],"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 { SgdsMainnav } from \"./sgds-mainnav\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { offset } from \"@floating-ui/dom\";\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 { MainnavBreakpointContext, MainnavExpandedContext } 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: MainnavBreakpointContext, subscribe: true })\n  @state()\n  private _breakpointReached = true;\n\n  @consume({ context: MainnavExpandedContext, subscribe: true })\n  @state()\n  private expanded: 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  /**\n   * Accessible label for the dropdown's toggle button. Forwarded to the button's aria-label attribute.\n   */\n  @property({ type: String })\n  ariaLabel: string;\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  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(\"mainnav-dropdown-link\");\n\n      const link = item.shadowRoot?.querySelector(\"a\") || item.querySelector(\"a\");\n      link.tabIndex = -1;\n      if (dropdownItem.classList.contains(\"disabled\")) {\n        link.setAttribute(\"href\", \"javascript:void(0)\");\n        link.setAttribute(\"tabindex\", \"-1\");\n      } else {\n        link.addEventListener(\"click\", (e: Event) => {\n          const target = e.target as HTMLElement;\n          const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n          mainnav.hide();\n        });\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(\"mainnav-dropdown-link\");\n\n      const slottedItem = (item.shadowRoot.querySelector(\".dropdown-item slot\") as HTMLSlotElement).assignedElements({\n        flatten: true\n      });\n      slottedItem.forEach(item => {\n        if (dropdownItem.classList.contains(\"disabled\")) {\n          item.setAttribute(\"href\", \"javascript:void(0)\");\n          item.setAttribute(\"tabindex\", \"-1\");\n        }\n      });\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.textContent = this.togglerNodes[0].textContent;\n  }\n\n  private _handleTogglerSlotChange() {\n    // no-op: toggler slot change handled by _copyTextToMenu in mobile view\n  }\n\n  private _hideDropdownMenuItems() {\n    this.dropdownItems.style.display = \"none\";\n    this.dropdownItems.setAttribute(\"aria-hidden\", \"true\");\n  }\n\n  private _resetDropdownMenu(): Promise<void> {\n    const navbarBody = this._getNavbarBody();\n    if (!navbarBody) return Promise.resolve();\n\n    return new Promise(resolve => {\n      const onEnd = (event: TransitionEvent) => {\n        if (event.propertyName === \"transform\") {\n          navbarBody.removeEventListener(\"transitionend\", onEnd);\n          resolve();\n        }\n      };\n\n      const hasTransition = getComputedStyle(navbarBody).transitionProperty.includes(\"transform\");\n\n      if (hasTransition) {\n        navbarBody.addEventListener(\"transitionend\", onEnd);\n        navbarBody.style.removeProperty(\"transform\");\n      } else {\n        navbarBody.style.removeProperty(\"transform\");\n        resolve();\n      }\n    });\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 async _closeMenu() {\n    await this._resetDropdownMenu();\n    this._hideDropdownMenuItems();\n    this.navLink.focus();\n  }\n\n  render() {\n    const mobileView = html`\n      <button\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        aria-label=${ifDefined(this.ariaLabel)}\n        ?disabled=${this.disabled}\n        @click=${this._openMenu}\n        @keydown=${this._handleKeyboardOpen}\n      >\n        <slot name=\"toggler\" @slotchange=${this._handleTogglerSlotChange}></slot>\n        <sgds-icon name=\"chevron-right\" size=\"md\"></sgds-icon>\n      </button>\n      <div class=\"dropdown-items\">\n        <a tabindex=\"0\" role=\"button\" @click=${this._closeMenu} @keydown=${this._handleHeaderKeyboardEvent}>\n          <sgds-icon name=\"chevron-left\" size=\"md\"></sgds-icon>\n          <span></span>\n        </a>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n\n    const desktopView = html`<sgds-dropdown\n      .floatingOpts=${{\n        middleware: [offset(0)]\n      }}\n      ?disabled=${this.disabled}\n    >\n      <button\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        aria-label=${ifDefined(this.ariaLabel)}\n        id=${this.togglerId}\n        ?disabled=${this.disabled}\n        slot=\"toggler\"\n      >\n        <slot name=\"toggler\" @slotchange=${this._handleTogglerSlotChange}></slot>\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </button>\n      <slot @slotchange=${this._handleDesktopSlotChange}></slot>\n    </sgds-dropdown>`;\n\n    return this._breakpointReached ? mobileView : desktopView;\n  }\n}\n\nexport default SgdsMainnavDropdown;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-mainnav-dropdown.js","names":["genId","dropdownStyle","dropdownMenuStyle","mainnavDropdownStyle"],"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 { SgdsMainnav } from \"./sgds-mainnav\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { offset } from \"@floating-ui/dom\";\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 { MainnavBreakpointContext, MainnavExpandedContext } 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: MainnavBreakpointContext, subscribe: true })\n  @state()\n  private _breakpointReached = true;\n\n  @consume({ context: MainnavExpandedContext, subscribe: true })\n  @state()\n  private expanded: 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  /**\n   * Accessible label for the dropdown's toggle button. Forwarded to the button's aria-label attribute.\n   */\n  @property({ type: String })\n  ariaLabel: string;\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  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(\"mainnav-dropdown-link\");\n\n      const link = item.shadowRoot?.querySelector(\"a\") || item.querySelector(\"a\");\n      link.tabIndex = -1;\n      if (dropdownItem.classList.contains(\"disabled\")) {\n        link.setAttribute(\"href\", \"javascript:void(0)\");\n        link.setAttribute(\"tabindex\", \"-1\");\n      } else {\n        link.addEventListener(\"click\", (e: Event) => {\n          const target = e.target as HTMLElement;\n          const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n          mainnav.hide();\n        });\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(\"mainnav-dropdown-link\");\n\n      const slottedItem = (item.shadowRoot.querySelector(\".dropdown-item slot\") as HTMLSlotElement).assignedElements({\n        flatten: true\n      });\n      slottedItem.forEach(item => {\n        if (dropdownItem.classList.contains(\"disabled\")) {\n          item.setAttribute(\"href\", \"javascript:void(0)\");\n          item.setAttribute(\"tabindex\", \"-1\");\n        }\n      });\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.textContent = this.togglerNodes[0].textContent;\n  }\n\n  private _handleTogglerSlotChange() {\n    // no-op: toggler slot change handled by _copyTextToMenu in mobile view\n  }\n\n  private _hideDropdownMenuItems() {\n    this.dropdownItems.style.display = \"none\";\n    this.dropdownItems.setAttribute(\"aria-hidden\", \"true\");\n  }\n\n  private _resetDropdownMenu(): Promise<void> {\n    const navbarBody = this._getNavbarBody();\n    if (!navbarBody) return Promise.resolve();\n\n    return new Promise(resolve => {\n      const onEnd = (event: TransitionEvent) => {\n        if (event.propertyName === \"transform\") {\n          navbarBody.removeEventListener(\"transitionend\", onEnd);\n          resolve();\n        }\n      };\n\n      const hasTransition = getComputedStyle(navbarBody).transitionProperty.includes(\"transform\");\n\n      if (hasTransition) {\n        navbarBody.addEventListener(\"transitionend\", onEnd);\n        navbarBody.style.removeProperty(\"transform\");\n      } else {\n        navbarBody.style.removeProperty(\"transform\");\n        resolve();\n      }\n    });\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 async _closeMenu() {\n    await this._resetDropdownMenu();\n    this._hideDropdownMenuItems();\n    this.navLink.focus();\n  }\n\n  render() {\n    const mobileView = html`\n      <button\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        aria-label=${ifDefined(this.ariaLabel)}\n        ?disabled=${this.disabled}\n        @click=${this._openMenu}\n        @keydown=${this._handleKeyboardOpen}\n      >\n        <span class=\"toggler-wrapper\"><slot name=\"toggler\" @slotchange=${this._handleTogglerSlotChange}></slot></span>\n        <sgds-icon name=\"chevron-right\" size=\"md\"></sgds-icon>\n      </button>\n      <div class=\"dropdown-items\">\n        <a tabindex=\"0\" role=\"button\" @click=${this._closeMenu} @keydown=${this._handleHeaderKeyboardEvent}>\n          <sgds-icon name=\"chevron-left\" size=\"md\"></sgds-icon>\n          <span></span>\n        </a>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n\n    const desktopView = html`<sgds-dropdown\n      .floatingOpts=${{\n        middleware: [offset(0)]\n      }}\n      ?disabled=${this.disabled}\n    >\n      <button\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        aria-label=${ifDefined(this.ariaLabel)}\n        id=${this.togglerId}\n        ?disabled=${this.disabled}\n        slot=\"toggler\"\n      >\n        <span class=\"toggler-wrapper\"><slot name=\"toggler\" @slotchange=${this._handleTogglerSlotChange}></slot></span>\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </button>\n      <slot @slotchange=${this._handleDesktopSlotChange}></slot>\n    </sgds-dropdown>`;\n\n    return this._breakpointReached ? mobileView : desktopView;\n  }\n}\n\nexport default SgdsMainnavDropdown;\n"],"mappings":"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"}

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

@@ -50,7 +50,7 @@ var SgdsMainnavItem = class extends require_sgds_element.default {
 		}
 	}
 	render() {
-		return lit.html`<slot @slotchange=${this._handleSlotChange}></slot>`;
+		return lit.html`<div class="mainnav-item"><slot @slotchange=${this._handleSlotChange}></slot></div>`;
 	}
 };
 require_decorate.default([(0, lit_decorators_js.property)({

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav-item.cjs.js","names":["SgdsElement","mainnavItemStyle","property","watch"],"sources":["../../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { SgdsMainnav } from \"./sgds-mainnav\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavItemStyle];\n\n  /** when true, sets the active stylings of the navigation item */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const anchorItems = assignedElements.filter(\n      item => item.tagName.toLowerCase() === \"a\" || item.tagName.toLowerCase() === \"sgds-link\"\n    );\n\n    if (anchorItems.length > 1) {\n      console.error(\"More than one anchor tag is added to sgds-mainnav-item\");\n      return;\n    }\n\n    if (anchorItems.length === 0) {\n      const nodes = slot.assignedNodes({ flatten: true });\n      nodes.forEach(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const hyperlink = document.createElement(\"a\");\n          hyperlink.textContent = node.textContent;\n          node.parentNode.replaceChild(hyperlink, node);\n        }\n      });\n    }\n\n    if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n\n      if (this.active) {\n        anchor.setAttribute(\"aria-current\", \"true\");\n      }\n\n      if (this.disabled) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n        return;\n      }\n\n      anchor.addEventListener(\"click\", (e: Event) => {\n        const target = e.target as HTMLElement;\n        const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n        mainnav.hide();\n      });\n    }\n  }\n\n  render() {\n    return html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsMainnavItem;\n"],"mappings":";;;;;;;;;;;;AAWA,IAAa,kBAAb,cAAqCA,qBAAAA,QAAY;;;EAKtC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EARK,KAAA,SAAA,CAAC,GAAGA,qBAAAA,QAAY,QAAQC,qBAAAA,OAAgB;;CAUxD,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBAA0B,GAAU;EAClC,MAAM,OAAO,EAAE;EAEf,MAAM,cADmB,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAC5B,CAAC,CAAC,QACnC,SAAQ,KAAK,QAAQ,YAAY,MAAM,OAAO,KAAK,QAAQ,YAAY,MAAM,WAC/E;EAEA,IAAI,YAAY,SAAS,GAAG;GAC1B,QAAQ,MAAM,wDAAwD;GACtE;EACF;EAEA,IAAI,YAAY,WAAW,GAEzB,KADmB,cAAc,EAAE,SAAS,KAAK,CAC7C,CAAC,CAAC,SAAQ,SAAQ;GACpB,IAAI,KAAK,aAAa,KAAK,WAAW;IACpC,MAAM,YAAY,SAAS,cAAc,GAAG;IAC5C,UAAU,cAAc,KAAK;IAC7B,KAAK,WAAW,aAAa,WAAW,IAAI;GAC9C;EACF,CAAC;EAGH,IAAI,YAAY,WAAW,GAAG;GAC5B,MAAM,SAAS,YAAY;GAE3B,IAAI,KAAK,QACP,OAAO,aAAa,gBAAgB,MAAM;GAG5C,IAAI,KAAK,UAAU;IACjB,OAAO,aAAa,QAAQ,oBAAoB;IAChD,OAAO,aAAa,YAAY,IAAI;IACpC;GACF;GAEA,OAAO,iBAAiB,UAAU,MAAa;IAG7C,EAFiB,OACM,QAAQ,cACzB,CAAC,CAAC,KAAK;GACf,CAAC;EACH;CACF;CAEA,SAAS;EACP,OAAO,IAAA,IAAI,qBAAqB,KAAK,kBAAkB;CACzD;AACF;AA3DGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAIzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AAGzCC,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,UAAU,CAAA,GAAA,gBAAA,WAAA,mBAAA,IAAA"}
+{"version":3,"file":"sgds-mainnav-item.cjs.js","names":["SgdsElement","mainnavItemStyle","property","watch"],"sources":["../../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { SgdsMainnav } from \"./sgds-mainnav\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavItemStyle];\n\n  /** when true, sets the active stylings of the navigation item */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const anchorItems = assignedElements.filter(\n      item => item.tagName.toLowerCase() === \"a\" || item.tagName.toLowerCase() === \"sgds-link\"\n    );\n\n    if (anchorItems.length > 1) {\n      console.error(\"More than one anchor tag is added to sgds-mainnav-item\");\n      return;\n    }\n\n    if (anchorItems.length === 0) {\n      const nodes = slot.assignedNodes({ flatten: true });\n      nodes.forEach(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const hyperlink = document.createElement(\"a\");\n          hyperlink.textContent = node.textContent;\n          node.parentNode.replaceChild(hyperlink, node);\n        }\n      });\n    }\n\n    if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n\n      if (this.active) {\n        anchor.setAttribute(\"aria-current\", \"true\");\n      }\n\n      if (this.disabled) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n        return;\n      }\n\n      anchor.addEventListener(\"click\", (e: Event) => {\n        const target = e.target as HTMLElement;\n        const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n        mainnav.hide();\n      });\n    }\n  }\n\n  render() {\n    return html`<div class=\"mainnav-item\"><slot @slotchange=${this._handleSlotChange}></slot></div>`;\n  }\n}\n\nexport default SgdsMainnavItem;\n"],"mappings":";;;;;;;;;;;;AAWA,IAAa,kBAAb,cAAqCA,qBAAAA,QAAY;;;EAKtC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EARK,KAAA,SAAA,CAAC,GAAGA,qBAAAA,QAAY,QAAQC,qBAAAA,OAAgB;;CAUxD,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBAA0B,GAAU;EAClC,MAAM,OAAO,EAAE;EAEf,MAAM,cADmB,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAC5B,CAAC,CAAC,QACnC,SAAQ,KAAK,QAAQ,YAAY,MAAM,OAAO,KAAK,QAAQ,YAAY,MAAM,WAC/E;EAEA,IAAI,YAAY,SAAS,GAAG;GAC1B,QAAQ,MAAM,wDAAwD;GACtE;EACF;EAEA,IAAI,YAAY,WAAW,GAEzB,KADmB,cAAc,EAAE,SAAS,KAAK,CAC7C,CAAC,CAAC,SAAQ,SAAQ;GACpB,IAAI,KAAK,aAAa,KAAK,WAAW;IACpC,MAAM,YAAY,SAAS,cAAc,GAAG;IAC5C,UAAU,cAAc,KAAK;IAC7B,KAAK,WAAW,aAAa,WAAW,IAAI;GAC9C;EACF,CAAC;EAGH,IAAI,YAAY,WAAW,GAAG;GAC5B,MAAM,SAAS,YAAY;GAE3B,IAAI,KAAK,QACP,OAAO,aAAa,gBAAgB,MAAM;GAG5C,IAAI,KAAK,UAAU;IACjB,OAAO,aAAa,QAAQ,oBAAoB;IAChD,OAAO,aAAa,YAAY,IAAI;IACpC;GACF;GAEA,OAAO,iBAAiB,UAAU,MAAa;IAG7C,EAFiB,OACM,QAAQ,cACzB,CAAC,CAAC,KAAK;GACf,CAAC;EACH;CACF;CAEA,SAAS;EACP,OAAO,IAAA,IAAI,+CAA+C,KAAK,kBAAkB;CACnF;AACF;AA3DGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAIzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AAGzCC,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,UAAU,CAAA,GAAA,gBAAA,WAAA,mBAAA,IAAA"}

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

@@ -50,7 +50,7 @@ var SgdsMainnavItem = class extends SgdsElement {
 		}
 	}
 	render() {
-		return html`<slot @slotchange=${this._handleSlotChange}></slot>`;
+		return html`<div class="mainnav-item"><slot @slotchange=${this._handleSlotChange}></slot></div>`;
 	}
 };
 __decorate([property({

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav-item.js","names":["mainnavItemStyle"],"sources":["../../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { SgdsMainnav } from \"./sgds-mainnav\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavItemStyle];\n\n  /** when true, sets the active stylings of the navigation item */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const anchorItems = assignedElements.filter(\n      item => item.tagName.toLowerCase() === \"a\" || item.tagName.toLowerCase() === \"sgds-link\"\n    );\n\n    if (anchorItems.length > 1) {\n      console.error(\"More than one anchor tag is added to sgds-mainnav-item\");\n      return;\n    }\n\n    if (anchorItems.length === 0) {\n      const nodes = slot.assignedNodes({ flatten: true });\n      nodes.forEach(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const hyperlink = document.createElement(\"a\");\n          hyperlink.textContent = node.textContent;\n          node.parentNode.replaceChild(hyperlink, node);\n        }\n      });\n    }\n\n    if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n\n      if (this.active) {\n        anchor.setAttribute(\"aria-current\", \"true\");\n      }\n\n      if (this.disabled) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n        return;\n      }\n\n      anchor.addEventListener(\"click\", (e: Event) => {\n        const target = e.target as HTMLElement;\n        const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n        mainnav.hide();\n      });\n    }\n  }\n\n  render() {\n    return html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsMainnavItem;\n"],"mappings":";;;;;;;;;;;;AAWA,IAAa,kBAAb,cAAqC,YAAY;;;EAKtC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EARK,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAgB;;CAUxD,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBAA0B,GAAU;EAClC,MAAM,OAAO,EAAE;EAEf,MAAM,cADmB,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAC5B,CAAC,CAAC,QACnC,SAAQ,KAAK,QAAQ,YAAY,MAAM,OAAO,KAAK,QAAQ,YAAY,MAAM,WAC/E;EAEA,IAAI,YAAY,SAAS,GAAG;GAC1B,QAAQ,MAAM,wDAAwD;GACtE;EACF;EAEA,IAAI,YAAY,WAAW,GAEzB,KADmB,cAAc,EAAE,SAAS,KAAK,CAC7C,CAAC,CAAC,SAAQ,SAAQ;GACpB,IAAI,KAAK,aAAa,KAAK,WAAW;IACpC,MAAM,YAAY,SAAS,cAAc,GAAG;IAC5C,UAAU,cAAc,KAAK;IAC7B,KAAK,WAAW,aAAa,WAAW,IAAI;GAC9C;EACF,CAAC;EAGH,IAAI,YAAY,WAAW,GAAG;GAC5B,MAAM,SAAS,YAAY;GAE3B,IAAI,KAAK,QACP,OAAO,aAAa,gBAAgB,MAAM;GAG5C,IAAI,KAAK,UAAU;IACjB,OAAO,aAAa,QAAQ,oBAAoB;IAChD,OAAO,aAAa,YAAY,IAAI;IACpC;GACF;GAEA,OAAO,iBAAiB,UAAU,MAAa;IAG7C,EAFiB,OACM,QAAQ,cACzB,CAAC,CAAC,KAAK;GACf,CAAC;EACH;CACF;CAEA,SAAS;EACP,OAAO,IAAI,qBAAqB,KAAK,kBAAkB;CACzD;AACF;AA3DG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAIzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,MAAM,UAAU,CAAA,GAAA,gBAAA,WAAA,mBAAA,IAAA"}
+{"version":3,"file":"sgds-mainnav-item.js","names":["mainnavItemStyle"],"sources":["../../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { SgdsMainnav } from \"./sgds-mainnav\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavItemStyle];\n\n  /** when true, sets the active stylings of the navigation item */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const anchorItems = assignedElements.filter(\n      item => item.tagName.toLowerCase() === \"a\" || item.tagName.toLowerCase() === \"sgds-link\"\n    );\n\n    if (anchorItems.length > 1) {\n      console.error(\"More than one anchor tag is added to sgds-mainnav-item\");\n      return;\n    }\n\n    if (anchorItems.length === 0) {\n      const nodes = slot.assignedNodes({ flatten: true });\n      nodes.forEach(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const hyperlink = document.createElement(\"a\");\n          hyperlink.textContent = node.textContent;\n          node.parentNode.replaceChild(hyperlink, node);\n        }\n      });\n    }\n\n    if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n\n      if (this.active) {\n        anchor.setAttribute(\"aria-current\", \"true\");\n      }\n\n      if (this.disabled) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n        return;\n      }\n\n      anchor.addEventListener(\"click\", (e: Event) => {\n        const target = e.target as HTMLElement;\n        const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n        mainnav.hide();\n      });\n    }\n  }\n\n  render() {\n    return html`<div class=\"mainnav-item\"><slot @slotchange=${this._handleSlotChange}></slot></div>`;\n  }\n}\n\nexport default SgdsMainnavItem;\n"],"mappings":";;;;;;;;;;;;AAWA,IAAa,kBAAb,cAAqC,YAAY;;;EAKtC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EARK,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAgB;;CAUxD,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBAA0B,GAAU;EAClC,MAAM,OAAO,EAAE;EAEf,MAAM,cADmB,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAC5B,CAAC,CAAC,QACnC,SAAQ,KAAK,QAAQ,YAAY,MAAM,OAAO,KAAK,QAAQ,YAAY,MAAM,WAC/E;EAEA,IAAI,YAAY,SAAS,GAAG;GAC1B,QAAQ,MAAM,wDAAwD;GACtE;EACF;EAEA,IAAI,YAAY,WAAW,GAEzB,KADmB,cAAc,EAAE,SAAS,KAAK,CAC7C,CAAC,CAAC,SAAQ,SAAQ;GACpB,IAAI,KAAK,aAAa,KAAK,WAAW;IACpC,MAAM,YAAY,SAAS,cAAc,GAAG;IAC5C,UAAU,cAAc,KAAK;IAC7B,KAAK,WAAW,aAAa,WAAW,IAAI;GAC9C;EACF,CAAC;EAGH,IAAI,YAAY,WAAW,GAAG;GAC5B,MAAM,SAAS,YAAY;GAE3B,IAAI,KAAK,QACP,OAAO,aAAa,gBAAgB,MAAM;GAG5C,IAAI,KAAK,UAAU;IACjB,OAAO,aAAa,QAAQ,oBAAoB;IAChD,OAAO,aAAa,YAAY,IAAI;IACpC;GACF;GAEA,OAAO,iBAAiB,UAAU,MAAa;IAG7C,EAFiB,OACM,QAAQ,cACzB,CAAC,CAAC,KAAK;GACf,CAAC;EACH;CACF;CAEA,SAAS;EACP,OAAO,IAAI,+CAA+C,KAAK,kBAAkB;CACnF;AACF;AA3DG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAIzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,MAAM,UAAU,CAAA,GAAA,gBAAA,WAAA,mBAAA,IAAA"}

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

@@ -88,7 +88,9 @@ var SgdsMainnav = class extends require_nav_element.default {
         <div class="navbar ${this._expandClass()}">
           ${this.brandHref ? lit.html`<a class="navbar-brand" href=${require_safeUrl.sanitizeHref(this.brandHref) ?? ""}>
                 <slot name="brand"></slot>
-              </a>` : lit.html`<slot name="brand" @slotchange=${this._handleBrandSlotChange}></slot>`}
+              </a>` : lit.html`<div class="navbar-brand">
+                <slot name="brand" @slotchange=${this._handleBrandSlotChange}></slot>
+              </div>`}
           <div class="navbar-body navbar-collapse" id=${this.collapseId}>
             <div class="navbar-nav navbar-nav-scroll">
               <slot @slotchange=${this._handleDefaultSlotChange}></slot>

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav.cjs.js","names":["NavElement","HasSlotController","mainnavStyle","sanitizeHref","classMap","provide","MainnavBreakpointContext","state","MainnavExpandedContext","property","queryAssignedElements"],"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":"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"}
+{"version":3,"file":"sgds-mainnav.cjs.js","names":["NavElement","HasSlotController","mainnavStyle","sanitizeHref","classMap","provide","MainnavBreakpointContext","state","MainnavExpandedContext","property","queryAssignedElements"],"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`<div class=\"navbar-brand\">\n                <slot name=\"brand\" @slotchange=${this._handleBrandSlotChange}></slot>\n              </div>`}\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":"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"}

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

@@ -88,7 +88,9 @@ var SgdsMainnav = class extends NavElement {
         <div class="navbar ${this._expandClass()}">
           ${this.brandHref ? html`<a class="navbar-brand" href=${sanitizeHref(this.brandHref) ?? ""}>
                 <slot name="brand"></slot>
-              </a>` : html`<slot name="brand" @slotchange=${this._handleBrandSlotChange}></slot>`}
+              </a>` : html`<div class="navbar-brand">
+                <slot name="brand" @slotchange=${this._handleBrandSlotChange}></slot>
+              </div>`}
           <div class="navbar-body navbar-collapse" id=${this.collapseId}>
             <div class="navbar-nav navbar-nav-scroll">
               <slot @slotchange=${this._handleDefaultSlotChange}></slot>