@govtechsg/sgds-web-component 3.27.0-rc.3 → 3.27.0

package/react/components/Footer/sgds-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-footer.js","sources":["../../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsLink from \"../Link/sgds-link\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { watch } from \"../../utils/watch\";\nimport footerStyle from \"./footer.css\";\nimport gridStyle from \"../../css/grid.css\";\nimport type { SgdsFooterItem } from \"./sgds-footer-item\";\n\n/**\n * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.\n *\n * @slot default - The slot for footer content. Use this slot if you want full control over the layout or styling. When provided, it replaces the `items` slot layout.\n * @slot title - The slot for title\n * @slot description - The slot for description\n * @slot items - the slot for the list of footer items, styled automatically with `.footer-items`. For custom layouts or styles, use the `default` slot instead.\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, gridStyle, footerStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-link\": SgdsLink\n  };\n\n  /** Sets copyrightLiner of SgdsFooter */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\thref link for contacts */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\thref link for feedback */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\thref link for faq (optional) */\n  @property({ type: String })\n  faqHref = \"\";\n\n  /**\thref link for sitemap (optional) */\n  @property({ type: String })\n  sitemapHref = \"\";\n\n  /**\thref link for privacy statement */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\thref link for terms of use */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  /** Sets the layout context of the footer. Use \"sidebar\" when the footer is alongside a collapsible or persistent sidebar. Overlay sidebars should use \"default\". */\n  @property({ type: String, reflect: true }) layout: \"default\" | \"sidebar\" = \"default\";\n\n  /** Sets the color tone of the footer. Use \"neutral\" for light backgrounds (e.g. sidebar layouts). */\n  @property({ type: String, reflect: true }) tone: \"fixed-dark\" | \"neutral\" = \"fixed-dark\";\n\n  /** Used only for SSR to indicate the presence of the `default` slot. */\n  @property({ type: Boolean }) hasDefaultSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `title` slot. */\n  @property({ type: Boolean }) hasTitleSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `description` slot. */\n  @property({ type: Boolean }) hasDescriptionSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `items` slot. */\n  @property({ type: Boolean }) hasItemsSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\", \"title\", \"description\", \"items\");\n\n  private _handleItemsSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements();\n    assignedElements.forEach(el => {\n      (el as SgdsFooterItem).tone = this.tone;\n    });\n  }\n\n  @watch(\"tone\", { waitUntilFirstUpdate: true })\n  _handleToneChange() {\n    const itemsSlot = this.shadowRoot?.querySelector('slot[name=\"items\"]') as HTMLSlotElement | null;\n    itemsSlot?.assignedElements().forEach(el => {\n      (el as SgdsFooterItem).tone = this.tone;\n    });\n  }\n\n  updated() {\n    if (!this.hasDefaultSlot) this.hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n    if (!this.hasTitleSlot) this.hasTitleSlot = this.hasSlotController.test(\"title\");\n    if (!this.hasDescriptionSlot) this.hasDescriptionSlot = this.hasSlotController.test(\"description\");\n    if (!this.hasItemsSlot) this.hasItemsSlot = this.hasSlotController.test(\"items\");\n  }\n\n  private get _linkTone() {\n    return this.tone === \"neutral\" ? \"neutral\" : \"fixed-light\";\n  }\n\n  render() {\n    return html`\n      <footer class=\"footer\">\n        <section\n          class=\"${classMap({\n            \"footer-top\": this.hasDefaultSlot || this.hasTitleSlot || this.hasDescriptionSlot || this.hasItemsSlot,\n            \"has-content\": this.hasDefaultSlot || this.hasItemsSlot,\n            \"sgds-container\": this.layout === \"default\",\n            \"sgds-container-sidebar\": this.layout === \"sidebar\"\n          })}\"\n        >\n          <div class=\"footer-header\">\n            <slot name=\"title\"></slot>\n            <slot name=\"description\"></slot>\n          </div>\n          <div>\n            ${this.hasDefaultSlot\n              ? html`<slot></slot>`\n              : html`\n                  <div class=\"footer-items\">\n                    <slot name=\"items\" @slotchange=${this._handleItemsSlotChange}></slot>\n                  </div>\n                `}\n          </div>\n        </section>\n        <section\n          class=\"${classMap({\n            \"footer-bottom\": true,\n            \"sgds-container\": this.layout === \"default\",\n            \"sgds-container-sidebar\": this.layout === \"sidebar\"\n          })}\"\n        >\n          <div class=\"footer-mandatory-links\">\n            <ul>\n              <li>\n                <sgds-link size=\"sm\" tone=${this._linkTone}><a href=${this.contactHref}>Contact</a></sgds-link>\n              </li>\n              <li>\n                <sgds-link size=\"sm\" tone=${this._linkTone}><a href=${this.feedbackHref}>Feedback</a></sgds-link>\n              </li>\n              ${this.faqHref\n                ? html`<li>\n                    <sgds-link size=\"sm\" tone=${this._linkTone}><a href=${this.faqHref}>FAQ</a></sgds-link>\n                  </li>`\n                : nothing}\n              ${this.sitemapHref\n                ? html`<li>\n                    <sgds-link size=\"sm\" tone=${this._linkTone}><a href=${this.sitemapHref}>Sitemap</a></sgds-link>\n                  </li>`\n                : nothing}\n              <li>\n                <sgds-link size=\"sm\" tone=${this._linkTone}>\n                  <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\">\n                    Report Vulnerability\n                  </a>\n                </sgds-link>\n              </li>\n              <li>\n                <sgds-link size=\"sm\" tone=${this._linkTone}\n                  ><a href=${this.privacyHref}>Privacy Statement</a></sgds-link\n                >\n              </li>\n              <li>\n                <sgds-link size=\"sm\" tone=${this._linkTone}><a href=${this.termsOfUseHref}>Terms of use</a></sgds-link>\n              </li>\n            </ul>\n            <div class=\"footer-copyrights\">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["gridStyle","footerStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-footer.js","sources":["../../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsLink from \"../Link/sgds-link\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { watch } from \"../../utils/watch\";\nimport footerStyle from \"./footer.css\";\nimport gridStyle from \"../../css/grid.css\";\nimport type { SgdsFooterItem } from \"./sgds-footer-item\";\n\n/**\n * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.\n *\n * @slot default - The slot for footer content. Use this slot if you want full control over the layout or styling. When provided, it replaces the `items` slot layout.\n * @slot title - The slot for title\n * @slot description - The slot for description\n * @slot items - the slot for the list of footer items, styled automatically with `.footer-items`. For custom layouts or styles, use the `default` slot instead.\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, gridStyle, footerStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-link\": SgdsLink\n  };\n\n  /** Sets copyrightLiner of SgdsFooter */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\thref link for contacts */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\thref link for feedback */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\thref link for faq (optional) */\n  @property({ type: String })\n  faqHref = \"\";\n\n  /**\thref link for sitemap (optional) */\n  @property({ type: String })\n  sitemapHref = \"\";\n\n  /**\thref link for privacy statement */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\thref link for terms of use */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  /** Sets the layout context of the footer. Use \"sidebar\" when the footer is alongside a collapsible or persistent sidebar. Overlay sidebars should use \"default\". */\n  @property({ type: String, reflect: true }) layout: \"default\" | \"sidebar\" = \"default\";\n\n  /** Sets the color tone of the footer. Use \"neutral\" for light backgrounds (e.g. sidebar layouts). */\n  @property({ type: String, reflect: true }) tone: \"fixed-dark\" | \"neutral\" = \"fixed-dark\";\n\n  /** Used only for SSR to indicate the presence of the `default` slot. */\n  @property({ type: Boolean }) hasDefaultSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `title` slot. */\n  @property({ type: Boolean }) hasTitleSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `description` slot. */\n  @property({ type: Boolean }) hasDescriptionSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `items` slot. */\n  @property({ type: Boolean }) hasItemsSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\", \"title\", \"description\", \"items\");\n\n  private _handleItemsSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements();\n    assignedElements.forEach(el => {\n      (el as SgdsFooterItem).tone = this.tone;\n    });\n  }\n\n  @watch(\"tone\", { waitUntilFirstUpdate: true })\n  _handleToneChange() {\n    const itemsSlot = this.shadowRoot?.querySelector('slot[name=\"items\"]') as HTMLSlotElement | null;\n    itemsSlot?.assignedElements().forEach(el => {\n      (el as SgdsFooterItem).tone = this.tone;\n    });\n  }\n\n  updated() {\n    if (!this.hasDefaultSlot) this.hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n    if (!this.hasTitleSlot) this.hasTitleSlot = this.hasSlotController.test(\"title\");\n    if (!this.hasDescriptionSlot) this.hasDescriptionSlot = this.hasSlotController.test(\"description\");\n    if (!this.hasItemsSlot) this.hasItemsSlot = this.hasSlotController.test(\"items\");\n  }\n\n  private get _linkTone() {\n    return this.tone === \"neutral\" ? \"neutral\" : \"fixed-light\";\n  }\n\n  render() {\n    return html`\n      <footer class=\"footer\">\n        <section\n          class=\"${classMap({\n            \"footer-top\": this.hasDefaultSlot || this.hasTitleSlot || this.hasDescriptionSlot || this.hasItemsSlot,\n            \"has-content\": this.hasDefaultSlot || this.hasItemsSlot,\n            \"sgds-container\": this.layout === \"default\",\n            \"sgds-container-sidebar\": this.layout === \"sidebar\"\n          })}\"\n        >\n          <div class=\"footer-header\">\n            <slot name=\"title\"></slot>\n            <slot name=\"description\"></slot>\n          </div>\n          <div>\n            ${this.hasDefaultSlot\n              ? html`<slot></slot>`\n              : html`\n                  <div class=\"footer-items\">\n                    <slot name=\"items\" @slotchange=${this._handleItemsSlotChange}></slot>\n                  </div>\n                `}\n          </div>\n        </section>\n        <section\n          class=\"${classMap({\n            \"footer-bottom\": true,\n            \"sgds-container\": this.layout === \"default\",\n            \"sgds-container-sidebar\": this.layout === \"sidebar\"\n          })}\"\n        >\n          <div class=\"footer-mandatory-links\">\n            <ul>\n              <li>\n                <sgds-link size=\"sm\" tone=${this._linkTone}><a href=${this.contactHref}>Contact</a></sgds-link>\n              </li>\n              <li>\n                <sgds-link size=\"sm\" tone=${this._linkTone}><a href=${this.feedbackHref}>Feedback</a></sgds-link>\n              </li>\n              ${this.faqHref\n                ? html`<li>\n                    <sgds-link size=\"sm\" tone=${this._linkTone}><a href=${this.faqHref}>FAQ</a></sgds-link>\n                  </li>`\n                : nothing}\n              ${this.sitemapHref\n                ? html`<li>\n                    <sgds-link size=\"sm\" tone=${this._linkTone}><a href=${this.sitemapHref}>Sitemap</a></sgds-link>\n                  </li>`\n                : nothing}\n              <li>\n                <sgds-link size=\"sm\" tone=${this._linkTone}>\n                  <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\">\n                    Report Vulnerability\n                  </a>\n                </sgds-link>\n              </li>\n              <li>\n                <sgds-link size=\"sm\" tone=${this._linkTone}\n                  ><a href=${this.privacyHref}>Privacy Statement</a></sgds-link\n                >\n              </li>\n              <li>\n                <sgds-link size=\"sm\" tone=${this._linkTone}><a href=${this.termsOfUseHref}>Terms of Use</a></sgds-link>\n              </li>\n            </ul>\n            <div class=\"footer-copyrights\">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["gridStyle","footerStyle"],"mappings":"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"}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}:host([tone=brand][expand=always]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=always]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=sm]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=md]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=lg]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xxl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
+var css_248z = lit.css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=mainnav-dropdown.cjs.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}:host([tone=brand][expand=always]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=always]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=sm]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=md]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=lg]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xxl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
+var css_248z = css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=mainnav-dropdown.js.map

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([expand=always]) ::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 = lit.css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media screen and (min-width: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}@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([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)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=mainnav-item.cjs.js.map

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

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

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`: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)}:host([tone=brand]) nav{background-color:var(--sgds-primary-surface-default)}:host([tone=gradient-1]) nav{background:var(--sgds-gradient-1)}:host([tone=gradient-2]) nav{background:var(--sgds-gradient-2)}:host([tone=gradient-3]) nav{background:var(--sgds-gradient-3)}:host([tone=gradient-4]) nav{background:var(--sgds-gradient-4)}.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;color:var(--sgds-color-default);display:flex;text-decoration:none;white-space:nowrap}:host([tone=brand]) .navbar-brand,:host([tone^=gradient]) .navbar-brand{color:var(--sgds-color-fixed-light)}.navbar-brand:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown):not(sgds-mainnav-profile)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-end{align-items:center;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}slot[name=non-collapsible].slot-empty{display:none}slot[name=profile]{align-self:stretch;display:flex}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4)}:host([tone=brand]) slot[name=non-collapsible]::slotted(*),:host([tone^=gradient]) slot[name=non-collapsible]::slotted(*){color:var(--sgds-color-fixed-light)}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);height:inherit;margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
+var css_248z = lit.css`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 2px 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:space-between;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:80px;padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand{align-items:center;color:var(--sgds-color-default);display:flex;text-decoration:none;white-space:nowrap}.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 2px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index: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)){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}.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}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4);margin-left:auto}slot[name=non-collapsible].non-collapsible-empty{display:none}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=mainnav.cjs.js.map

package/react/components/Mainnav/mainnav.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`: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)}:host([tone=brand]) nav{background-color:var(--sgds-primary-surface-default)}:host([tone=gradient-1]) nav{background:var(--sgds-gradient-1)}:host([tone=gradient-2]) nav{background:var(--sgds-gradient-2)}:host([tone=gradient-3]) nav{background:var(--sgds-gradient-3)}:host([tone=gradient-4]) nav{background:var(--sgds-gradient-4)}.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;color:var(--sgds-color-default);display:flex;text-decoration:none;white-space:nowrap}:host([tone=brand]) .navbar-brand,:host([tone^=gradient]) .navbar-brand{color:var(--sgds-color-fixed-light)}.navbar-brand:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown):not(sgds-mainnav-profile)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-end{align-items:center;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}slot[name=non-collapsible].slot-empty{display:none}slot[name=profile]{align-self:stretch;display:flex}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4)}:host([tone=brand]) slot[name=non-collapsible]::slotted(*),:host([tone^=gradient]) slot[name=non-collapsible]::slotted(*){color:var(--sgds-color-fixed-light)}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);height:inherit;margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
+var css_248z = css`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 2px 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:space-between;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:80px;padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand{align-items:center;color:var(--sgds-color-default);display:flex;text-decoration:none;white-space:nowrap}.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 2px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index: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)){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}.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}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4);margin-left:auto}slot[name=non-collapsible].non-collapsible-empty{display:none}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
 
 export { css_248z as default };
 //# sourceMappingURL=mainnav.js.map

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

@@ -8,11 +8,27 @@ var context = require('@lit/context');
 var lit = require('lit');
 var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
-var navElement = require('../../base/nav-element.cjs.js');
-var slot = require('../../utils/slot.cjs.js');
+var sgdsElement = require('../../base/sgds-element.cjs.js');
+var animate = require('../../utils/animate.cjs.js');
+var animationRegistry = require('../../utils/animation-registry.cjs.js');
+var breakpoints = require('../../utils/breakpoints.cjs.js');
+var event = require('../../utils/event.cjs.js');
+var generateId = require('../../utils/generateId.cjs.js');
+var watch = require('../../utils/watch.cjs.js');
+var sgdsIconButton = require('../IconButton/sgds-icon-button.cjs.js');
 var mainnavContext = require('./mainnav-context.cjs.js');
 var mainnav = require('./mainnav.cjs.js');
+var slot = require('../../utils/slot.cjs.js');
 
+const SIZES = {
+    sm: breakpoints.SM_BREAKPOINT,
+    md: breakpoints.MD_BREAKPOINT,
+    lg: breakpoints.LG_BREAKPOINT,
+    xl: breakpoints.XL_BREAKPOINT,
+    xxl: breakpoints.XXL_BREAKPOINT,
+    never: Infinity,
+    always: -1
+};
 /**
  * @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.
  *
@@ -22,23 +38,32 @@ var mainnav = require('./mainnav.cjs.js');
  * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.
  *
  * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.
- * @slot start - Elements in this slot will be positioned to the left of the brand.
  * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.
  * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here
- * @slot profile - Profile slot positioned at the far right in desktop. In mobile, moves into the collapsed menu as the first item.
  * @slot non-collapsible - Elements in this slot will not be collapsed
  *
  */
-class SgdsMainnav extends navElement["default"] {
+class SgdsMainnav extends sgdsElement["default"] {
     constructor() {
         super(...arguments);
         this._breakpointReached = false;
-        this._expanded = false;
+        /** Indicates if mobile menu is open or closed */
+        this.expanded = false;
+        /** Denotes the transition state of mobile mainnav menu opening  */
+        this.expanding = false;
         /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */
         this.hasNonCollapsibleSlot = false;
+        /** The href link for brand logo */
+        this.brandHref = "";
+        this.collapseId = generateId["default"]("mainnav", "collapse");
+        /** The breakpoint, below which, the Navbar will collapse. When always the Navbar will always be expanded regardless of screen size. When never, the Navbar will always be collapsed */
+        this.expand = "lg";
         /** When true, removes max-width constraint to allow content to stretch full screen width */
         this.fluid = false;
+        /** @internal */
+        this.breakpointReached = false;
         this.hasSlotController = new slot.HasSlotController(this, "non-collapsible");
+        this._handleMobileNavBound = this._handleMobileNav.bind(this);
     }
     /** @internal */
     get defaultSlotItems() {
@@ -48,29 +73,146 @@ class SgdsMainnav extends navElement["default"] {
     get endSlotItems() {
         return [...(this.endNodes || [])].filter((node) => typeof node.tagName !== "undefined");
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this._handleResize();
+        window.addEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
+        window.addEventListener("resize", this._handleResize.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
+        window.removeEventListener("resize", this._handleResize.bind(this));
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        if (this.breakpointReached && this.body) {
+            this.expanded = false;
+            this.body.hidden = true;
+            this._handleMobileNav();
+            this._breakpointReached = true;
+        }
+    }
     updated() {
         if (!this.hasNonCollapsibleSlot)
             this.hasNonCollapsibleSlot = this.hasSlotController.test("non-collapsible");
-        // Sync expanded state to context
-        this._expanded = this.expanded;
     }
-    _onBreakpointReached(reached) {
-        this._breakpointReached = reached;
+    _handleClickOutOfElement(e, self) {
+        if (!e.composedPath().includes(self) && !e.composedPath().includes(this.header)) {
+            this.hide();
+        }
+    }
+    _handleSummaryClick() {
+        if (this.expanded) {
+            this.hide();
+        }
+        else {
+            document.body.style.overflow = "hidden";
+            this.show();
+        }
+    }
+    _handleResize() {
+        const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];
+        if (newBreakpointReachedValue !== this.breakpointReached) {
+            this.requestUpdate();
+        }
+        else {
+            this.body ? (this.body.hidden = true) : null;
+            // this.expanded = false;
+            this.expanding = false;
+        }
+        if (newBreakpointReachedValue) {
+            this._handleMobileNav();
+            if (!this._breakpointReached) {
+                this._breakpointReached = true;
+                window.addEventListener("scrollend", this._handleMobileNavBound);
+            }
+        }
+        else {
+            this._handleDesktopNav();
+            this._breakpointReached = false;
+            window.removeEventListener("scrollend", this._handleMobileNavBound);
+        }
+    }
+    async _handleMobileNav() {
+        if (!this.nav)
+            return;
+        this.nav.appendChild(this.body);
+        await customElements.whenDefined("sgds-masthead");
+        const { bottom } = this.nav.getBoundingClientRect();
+        const navBodyPaddingY = parseFloat(getComputedStyle(this.body).paddingTop) + parseFloat(getComputedStyle(this.body).paddingBottom);
+        this.navScroll.style.maxHeight = `calc(100dvh - ${bottom}px - ${navBodyPaddingY}px)`;
+    }
+    _handleDesktopNav() {
+        var _a;
+        (_a = this.navbar) === null || _a === void 0 ? void 0 : _a.insertBefore(this.body, this.nonCollapsibleSlot);
+    }
+    async _animateToShow() {
+        const sgdsShow = this.emit("sgds-show", { cancelable: true });
+        if (sgdsShow.defaultPrevented) {
+            this.expanding = false;
+            this.expanded = false;
+            return;
+        }
+        await animate.stopAnimations(this.body);
+        this.body.hidden = false;
+        const { keyframes, options } = animationRegistry.getAnimation(this, "mainnav.show");
+        await animate.animateTo(this.body, animate.shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+        this.body.style.height = "auto";
+        this.emit("sgds-after-show");
+    }
+    async _animateToHide() {
+        const slHide = this.emit("sgds-hide", { cancelable: true });
+        if (slHide.defaultPrevented) {
+            this.expanding = false;
+            this.expanded = true;
+            return;
+        }
+        await animate.stopAnimations(this.body);
+        const { keyframes, options } = animationRegistry.getAnimation(this, "mainnav.hide");
+        await animate.animateTo(this.body, animate.shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+        this.body.hidden = true;
+        this.body.style.height = "auto";
+        this.emit("sgds-after-hide");
+    }
+    /** @internal */
+    async handleOpenChange() {
+        if (this.expanding) {
+            // Show
+            await this._animateToShow();
+            this.expanded = true;
+        }
+        else {
+            this.header.focus();
+            // Hide
+            await this._animateToHide();
+            this.expanded = false;
+        }
+    }
+    /** Shows the menu. For when mainnav is in the collapsed form */
+    async show() {
+        if (this.expanded) {
+            return;
+        }
+        this.expanding = true;
+        return event.waitForEvent(this, "sgds-after-show");
     }
-    _isBreakpointReached() {
-        return this._breakpointReached;
+    /** Hide the menu. For when mainnav is in the collapsed form */
+    async hide() {
+        if (!this.expanded) {
+            return;
+        }
+        this.expanding = false;
+        document.body.style.removeProperty("overflow");
+        return event.waitForEvent(this, "sgds-after-hide");
     }
     _handleDefaultSlotChange(e) {
         const childElements = e.target.assignedElements({ flatten: true });
         childElements.forEach(el => {
             el.setAttribute("expand", this.expand);
         });
-        if (this._hasProfileComponent && childElements.length > 0) {
-            console.warn("[sgds-mainnav] Using <sgds-mainnav-item> alongside <sgds-mainnav-profile> is not recommended. " +
-                "The profile component disables the mainnav hamburger menu, so nav items will have no mobile menu. " +
-                "Use a sidebar for navigation in operational apps.");
-        }
     }
+    // assigning name attribute to elements added in slot="end", to use wildcard css selector to assign styles only to *-mainnav-item
     _handleSlotChange(e) {
         const childElements = e.target.assignedElements({ flatten: true });
         childElements.forEach(e => {
@@ -78,24 +220,11 @@ class SgdsMainnav extends navElement["default"] {
             e.setAttribute("expand", this.expand);
         });
     }
-    _handleProfileSlotChange(e) {
-        const childElements = e.target.assignedElements({ flatten: true });
-        childElements.forEach(el => {
-            el.setAttribute("expand", this.expand);
-        });
-    }
     render() {
-        this.breakpointReached =
-            window.innerWidth <
-                (this.expand === "always"
-                    ? -1
-                    : this.expand === "never"
-                        ? Infinity
-                        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);
+        this.breakpointReached = window.innerWidth < SIZES[this.expand];
         return lit.html `
       <nav>
         <div class="navbar ${this._expandClass()}">
-          <slot name="start"></slot>
           <a class="navbar-brand" href=${this.brandHref} aria-label="brand-link">
             <slot name="brand"></slot>
           </a>
@@ -109,17 +238,40 @@ class SgdsMainnav extends navElement["default"] {
               ></slot>
             </div>
           </div>
-          <div class="navbar-end">
-            <slot name="non-collapsible" class=${classMap_js.classMap({ "slot-empty": !this.hasNonCollapsibleSlot })}></slot>
-            <slot name="profile" @slotchange=${this._handleProfileSlotChange}></slot>
-            ${this._renderToggler()}
-          </div>
+          <slot
+            name="non-collapsible"
+            class=${classMap_js.classMap({ "non-collapsible-empty": !this.hasNonCollapsibleSlot })}
+          ></slot>
+          <sgds-icon-button
+            name=${this.expanded ? "cross" : "menu"}
+            variant="ghost"
+            size="sm"
+            class="navbar-toggler"
+            @click=${this._handleSummaryClick}
+            aria-controls="${this.collapseId}"
+            aria-expanded="${this.expanded}"
+            .ariaLabel=${"Toggle navigation"}
+          ></sgds-icon-button>
         </div>
       </nav>
     `;
     }
+    _expandClass() {
+        switch (this.expand) {
+            case "always":
+                return "navbar-expand";
+            case "never":
+                break;
+            default:
+                return `navbar-expand-${this.expand}`;
+        }
+    }
 }
-SgdsMainnav.styles = [...navElement["default"].styles, mainnav["default"]];
+SgdsMainnav.styles = [...sgdsElement["default"].styles, mainnav["default"]];
+/** @internal */
+SgdsMainnav.dependencies = {
+    "sgds-icon-button": sgdsIconButton.SgdsIconButton
+};
 tslib.__decorate([
     context.provide({ context: mainnavContext.MainnavBreakpointContext }),
     decorators_js.state()
@@ -127,20 +279,66 @@ tslib.__decorate([
 tslib.__decorate([
     context.provide({ context: mainnavContext.MainnavExpandedContext }),
     decorators_js.state()
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-], SgdsMainnav.prototype, "_expanded", void 0);
+], SgdsMainnav.prototype, "expanded", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsMainnav.prototype, "expanding", void 0);
+tslib.__decorate([
+    decorators_js.query("nav")
+], SgdsMainnav.prototype, "nav", void 0);
+tslib.__decorate([
+    decorators_js.query(".navbar")
+], SgdsMainnav.prototype, "navbar", void 0);
+tslib.__decorate([
+    decorators_js.query(".navbar-toggler")
+], SgdsMainnav.prototype, "header", void 0);
+tslib.__decorate([
+    decorators_js.query(".navbar-body")
+], SgdsMainnav.prototype, "body", void 0);
+tslib.__decorate([
+    decorators_js.query(".navbar-nav-scroll")
+], SgdsMainnav.prototype, "navScroll", void 0);
+tslib.__decorate([
+    decorators_js.query("slot[name='non-collapsible']")
+], SgdsMainnav.prototype, "nonCollapsibleSlot", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean })
 ], SgdsMainnav.prototype, "hasNonCollapsibleSlot", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String })
+], SgdsMainnav.prototype, "brandHref", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String })
+], SgdsMainnav.prototype, "expand", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsMainnav.prototype, "fluid", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsMainnav.prototype, "breakpointReached", void 0);
 tslib.__decorate([
     decorators_js.queryAssignedElements()
 ], SgdsMainnav.prototype, "defaultNodes", void 0);
 tslib.__decorate([
     decorators_js.queryAssignedElements({ slot: "end" })
 ], SgdsMainnav.prototype, "endNodes", void 0);
+tslib.__decorate([
+    watch.watch("expanding", { waitUntilFirstUpdate: true })
+], SgdsMainnav.prototype, "handleOpenChange", null);
+animationRegistry.setDefaultAnimation("mainnav.show", {
+    keyframes: [
+        { height: "0", opacity: "0" },
+        { height: "auto", opacity: "1" }
+    ],
+    options: { duration: 200, easing: "ease-in-out" }
+});
+animationRegistry.setDefaultAnimation("mainnav.hide", {
+    keyframes: [
+        { height: "auto", opacity: "1" },
+        { height: "0", opacity: "0" }
+    ],
+    options: { duration: 200, easing: "ease-in-out" }
+});
 
 exports.SgdsMainnav = SgdsMainnav;
 exports["default"] = SgdsMainnav;