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

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

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

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

@@ -3,16 +3,71 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var linkElement = require('../../base/link-element.cjs.js');
+var tslib = require('tslib');
+var lit = require('lit');
+var decorators_js = require('lit/decorators.js');
+var watch = require('../../utils/watch.cjs.js');
+var sgdsElement = require('../../base/sgds-element.cjs.js');
 var mainnavItem = require('./mainnav-item.cjs.js');
 
 /**
  * @slot default - slot for SgdsMainnavItem element.
  *
  *  */
-class SgdsMainnavItem extends linkElement["default"] {
+class SgdsMainnavItem extends sgdsElement["default"] {
+    constructor() {
+        super(...arguments);
+        /** when true, sets the active stylings of .nav-link */
+        this.active = false;
+        /** Disables the SgdsMainnavItem */
+        this.disabled = false;
+    }
+    _handleDisabled() {
+        this.setAttribute("aria-disabled", `${this.disabled}`);
+    }
+    _handleSlotChange(e) {
+        const slot = e.target;
+        const assignedElements = slot.assignedElements({ flatten: true });
+        const anchorItems = assignedElements.filter(item => item.tagName.toLowerCase() === "a" || item.tagName.toLowerCase() === "sgds-link");
+        if (anchorItems.length > 1) {
+            console.error("More than one anchor tag is added to sgds-mainnav-item");
+            return;
+        }
+        if (anchorItems.length === 0) {
+            const nodes = slot.assignedNodes({ flatten: true });
+            nodes.forEach(node => {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    const hyperlink = document.createElement("a");
+                    hyperlink.textContent = node.textContent;
+                    node.parentNode.replaceChild(hyperlink, node);
+                }
+            });
+        }
+        if (anchorItems.length === 1) {
+            const anchor = anchorItems[0];
+            if (this.active) {
+                anchor.setAttribute("aria-current", "true");
+            }
+            if (this.disabled) {
+                anchor.setAttribute("href", "javascript:void(0)");
+                anchor.setAttribute("tabindex", "-1");
+            }
+        }
+    }
+    render() {
+        return lit.html `<slot @slotchange=${this._handleSlotChange}></slot>`;
+    }
 }
-SgdsMainnavItem.styles = [...linkElement["default"].styles, mainnavItem["default"]];
+SgdsMainnavItem.styles = [...sgdsElement["default"].styles, mainnavItem["default"]];
+tslib.__decorate([
+    decorators_js.property({ type: Boolean })
+], SgdsMainnavItem.prototype, "active", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true })
+], SgdsMainnavItem.prototype, "disabled", void 0);
+tslib.__decorate([
+    watch.watch("disabled")
+], SgdsMainnavItem.prototype, "_handleDisabled", null);
 
 exports.SgdsMainnavItem = SgdsMainnavItem;
 exports["default"] = SgdsMainnavItem;

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav-item.cjs.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import LinkElement from \"../../base/link-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends LinkElement {\n  static styles = [...LinkElement.styles, mainnavItemStyle];\n}\n\nexport default SgdsMainnavItem;\n"],"names":["LinkElement","mainnavItemStyle"],"mappings":";;;;;;;;AAGA;;;AAGM;AACA,MAAO,eAAgB,SAAQA,sBAAW,CAAA;;AACvC,eAAM,CAAA,MAAA,GAAG,CAAC,GAAGA,sBAAW,CAAC,MAAM,EAAEC,sBAAgB,CAAC;;;;;"}
+{"version":3,"file":"sgds-mainnav-item.cjs.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavItemStyle];\n\n  /** when true, sets the active stylings of .nav-link */\n  @property({ type: Boolean })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const anchorItems = assignedElements.filter(\n      item => item.tagName.toLowerCase() === \"a\" || item.tagName.toLowerCase() === \"sgds-link\"\n    );\n\n    if (anchorItems.length > 1) {\n      console.error(\"More than one anchor tag is added to sgds-mainnav-item\");\n      return;\n    }\n\n    if (anchorItems.length === 0) {\n      const nodes = slot.assignedNodes({ flatten: true });\n      nodes.forEach(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const hyperlink = document.createElement(\"a\");\n          hyperlink.textContent = node.textContent;\n          node.parentNode.replaceChild(hyperlink, node);\n        }\n      });\n    }\n\n    if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n\n      if (this.active) {\n        anchor.setAttribute(\"aria-current\", \"true\");\n      }\n\n      if (this.disabled) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n      }\n    }\n  }\n\n  render() {\n    return html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsMainnavItem;\n"],"names":["SgdsElement","html","mainnavItemStyle","__decorate","property","watch"],"mappings":"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"}

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

@@ -1,14 +1,69 @@
 'use client';
-import LinkElement from '../../base/link-element.js';
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { watch } from '../../utils/watch.js';
+import SgdsElement from '../../base/sgds-element.js';
 import css_248z from './mainnav-item.js';
 
 /**
  * @slot default - slot for SgdsMainnavItem element.
  *
  *  */
-class SgdsMainnavItem extends LinkElement {
+class SgdsMainnavItem extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** when true, sets the active stylings of .nav-link */
+        this.active = false;
+        /** Disables the SgdsMainnavItem */
+        this.disabled = false;
+    }
+    _handleDisabled() {
+        this.setAttribute("aria-disabled", `${this.disabled}`);
+    }
+    _handleSlotChange(e) {
+        const slot = e.target;
+        const assignedElements = slot.assignedElements({ flatten: true });
+        const anchorItems = assignedElements.filter(item => item.tagName.toLowerCase() === "a" || item.tagName.toLowerCase() === "sgds-link");
+        if (anchorItems.length > 1) {
+            console.error("More than one anchor tag is added to sgds-mainnav-item");
+            return;
+        }
+        if (anchorItems.length === 0) {
+            const nodes = slot.assignedNodes({ flatten: true });
+            nodes.forEach(node => {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    const hyperlink = document.createElement("a");
+                    hyperlink.textContent = node.textContent;
+                    node.parentNode.replaceChild(hyperlink, node);
+                }
+            });
+        }
+        if (anchorItems.length === 1) {
+            const anchor = anchorItems[0];
+            if (this.active) {
+                anchor.setAttribute("aria-current", "true");
+            }
+            if (this.disabled) {
+                anchor.setAttribute("href", "javascript:void(0)");
+                anchor.setAttribute("tabindex", "-1");
+            }
+        }
+    }
+    render() {
+        return html `<slot @slotchange=${this._handleSlotChange}></slot>`;
+    }
 }
-SgdsMainnavItem.styles = [...LinkElement.styles, css_248z];
+SgdsMainnavItem.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    property({ type: Boolean })
+], SgdsMainnavItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsMainnavItem.prototype, "disabled", void 0);
+__decorate([
+    watch("disabled")
+], SgdsMainnavItem.prototype, "_handleDisabled", null);
 
 export { SgdsMainnavItem, SgdsMainnavItem as default };
 //# sourceMappingURL=sgds-mainnav-item.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav-item.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import LinkElement from \"../../base/link-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends LinkElement {\n  static styles = [...LinkElement.styles, mainnavItemStyle];\n}\n\nexport default SgdsMainnavItem;\n"],"names":["mainnavItemStyle"],"mappings":";;;;AAGA;;;AAGM;AACA,MAAO,eAAgB,SAAQ,WAAW,CAAA;;AACvC,eAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAgB,CAAC;;;;"}
+{"version":3,"file":"sgds-mainnav-item.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavItemStyle];\n\n  /** when true, sets the active stylings of .nav-link */\n  @property({ type: Boolean })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const anchorItems = assignedElements.filter(\n      item => item.tagName.toLowerCase() === \"a\" || item.tagName.toLowerCase() === \"sgds-link\"\n    );\n\n    if (anchorItems.length > 1) {\n      console.error(\"More than one anchor tag is added to sgds-mainnav-item\");\n      return;\n    }\n\n    if (anchorItems.length === 0) {\n      const nodes = slot.assignedNodes({ flatten: true });\n      nodes.forEach(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const hyperlink = document.createElement(\"a\");\n          hyperlink.textContent = node.textContent;\n          node.parentNode.replaceChild(hyperlink, node);\n        }\n      });\n    }\n\n    if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n\n      if (this.active) {\n        anchor.setAttribute(\"aria-current\", \"true\");\n      }\n\n      if (this.disabled) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n      }\n    }\n  }\n\n  render() {\n    return html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsMainnavItem;\n"],"names":["mainnavItemStyle"],"mappings":"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"}

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

@@ -120,14 +120,15 @@ class SgdsMainnav extends sgdsElement["default"] {
         this.header.focus();
     }
     async _handleMobileNav() {
-        var _a, _b;
-        (_a = this.nav) === null || _a === void 0 ? void 0 : _a.appendChild(this.body);
+        if (!this.nav)
+            return;
+        this.nav.appendChild(this.body);
         await customElements.whenDefined("sgds-masthead");
-        const mastheadHeight = ((_b = document.querySelector("sgds-masthead")) === null || _b === void 0 ? void 0 : _b.clientHeight) | 0;
+        const offsetTop = this.nav.offsetTop;
         const navHeight = this.nav.clientHeight;
-        const mainNavHeight = mastheadHeight + navHeight;
-        this.body.style.top = `${mainNavHeight}px`;
-        this.navScroll.style.maxHeight = `calc(100dvh - ${mainNavHeight}px)`;
+        const mainNavPosition = offsetTop + navHeight;
+        this.body.style.top = `${mainNavPosition}px`;
+        this.navScroll.style.maxHeight = `calc(100dvh - ${mainNavPosition}px)`;
     }
     _handleDesktopNav() {
         var _a;

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav.cjs.js","sources":["../../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { provide } from \"@lit/context\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { LG_BREAKPOINT, MD_BREAKPOINT, SM_BREAKPOINT, XL_BREAKPOINT, XXL_BREAKPOINT } from \"../../utils/breakpoints\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { MainnavContext } from \"./mainnav-context\";\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\nconst SIZES = {\n  sm: SM_BREAKPOINT,\n  md: MD_BREAKPOINT,\n  lg: LG_BREAKPOINT,\n  xl: XL_BREAKPOINT,\n  XXL: XXL_BREAKPOINT,\n  never: Infinity,\n  always: -1\n};\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @provide({ context: MainnavContext })\n  @state()\n  private _breakpointReached = false;\n\n  /** @internal */\n  @query(\"nav\") nav: HTMLElement;\n  /** @internal */\n  @query(\".navbar\") navbar: HTMLElement;\n  /** @internal */\n  @query(\".navbar-toggler\") header: HTMLElement;\n  /** @internal */\n  @query(\".navbar-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".navbar-nav-scroll\") navScroll: HTMLElement;\n  /** @internal */\n  @query(\"slot[name='non-collapsible']\") nonCollapsibleSlot: HTMLSlotElement;\n\n  constructor() {\n    super();\n    window.addEventListener(\"resize\", () => {\n      const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];\n      if (newBreakpointReachedValue !== this.breakpointReached) {\n        this.requestUpdate();\n      } else {\n        this.body ? (this.body.hidden = true) : null;\n        this.expanded = false;\n      }\n\n      if (newBreakpointReachedValue) {\n        this._handleMobileNav();\n\n        if (!this._breakpointReached) {\n          this._breakpointReached = true;\n        }\n      } else {\n        this._handleDesktopNav();\n        this._breakpointReached = false;\n      }\n    });\n  }\n\n  /** The href link for brand logo */\n  @property({ type: String })\n  brandHref = \"\";\n\n  private collapseId = genId(\"mainnav\", \"collapse\");\n\n  /** 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 */\n  @property({ type: String })\n  expand: MainnavExpandSize = \"lg\";\n\n  /** @internal */\n  @state()\n  breakpointReached = false;\n\n  /** @internal */\n  @state()\n  expanded = false;\n\n  /** @internal */\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  firstUpdated() {\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n      this._handleMobileNav();\n      this._breakpointReached = true;\n    }\n\n    const items = [...this.defaultSlotItems, ...this.endSlotItems] as SgdsMainnavItem[] | SgdsMainnavDropdown[];\n    items.forEach((item: SgdsMainnavItem | SgdsMainnavDropdown) => {\n      item.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n    if (!e.composedPath().includes(self) && !e.composedPath().includes(this.header)) {\n      this.hide();\n    }\n  }\n\n  private _handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      document.querySelector(\"body\").style.overflow = \"hidden\";\n      this.show();\n    }\n\n    this.header.focus();\n  }\n\n  private async _handleMobileNav() {\n    this.nav?.appendChild(this.body);\n    await customElements.whenDefined(\"sgds-masthead\");\n    const mastheadHeight = document.querySelector(\"sgds-masthead\")?.clientHeight | 0;\n    const navHeight = this.nav.clientHeight;\n    const mainNavHeight = mastheadHeight + navHeight;\n    this.body.style.top = `${mainNavHeight}px`;\n    this.navScroll.style.maxHeight = `calc(100dvh - ${mainNavHeight}px)`;\n  }\n\n  private _handleDesktopNav() {\n    this.navbar?.insertBefore(this.body, this.nonCollapsibleSlot);\n  }\n\n  private async _animateToShow() {\n    const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n    if (sgdsShow.defaultPrevented) {\n      this.expanded = false;\n      return;\n    }\n\n    await stopAnimations(this.body);\n    this.body.hidden = false;\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.show\");\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.style.height = \"auto\";\n\n    this.emit(\"sgds-after-show\");\n  }\n\n  private async _animateToHide() {\n    const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n    if (slHide.defaultPrevented) {\n      this.expanded = true;\n      return;\n    }\n\n    await stopAnimations(this.body);\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.hide\");\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.hidden = true;\n    this.body.style.height = \"auto\";\n\n    this.emit(\"sgds-after-hide\");\n  }\n\n  @watch(\"expanded\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.expanded) {\n      // Show\n      this._animateToShow();\n    } else {\n      // Hide\n      this._animateToHide();\n    }\n  }\n  /** Shows the menu. For when mainnav is in the collapsed form */\n  public async show() {\n    if (this.expanded) {\n      return;\n    }\n\n    this.expanded = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the menu. For when mainnav is in the collapsed form */\n  public async hide() {\n    if (!this.expanded) {\n      return;\n    }\n\n    this.expanded = false;\n    document.querySelector(\"body\").style.removeProperty(\"overflow\");\n    this.emit(\"close-dropdown-menu\");\n\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  // assigning name attribute to elements added in slot=\"end\", to use wildcard css selector to assign styles only to *-mainnav-item\n  _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n    });\n  }\n\n  render() {\n    this.breakpointReached = window.innerWidth < SIZES[this.expand];\n\n    return html`\n      <nav>\n        <div class=\"navbar ${this._expandClass()}\">\n          <a class=\"navbar-brand\" href=${this.brandHref} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <slot name=\"non-collapsible\"></slot>\n          <sgds-icon-button\n            name=${this.expanded ? \"cross\" : \"menu\"}\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"navbar-toggler\"\n            @click=${this._handleSummaryClick}\n            aria-controls=\"${this.collapseId}\"\n            aria-expanded=\"${this.expanded}\"\n            aria-label=\"Toggle navigation\"\n          ></sgds-icon-button>\n        </div>\n      </nav>\n    `;\n  }\n  _expandClass() {\n    switch (this.expand) {\n      case \"always\":\n        return \"navbar-expand\";\n      case \"never\":\n        break;\n      default:\n        return `navbar-expand-${this.expand}`;\n    }\n  }\n}\nsetDefaultAnimation(\"mainnav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"mainnav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsMainnav;\n"],"names":["SM_BREAKPOINT","MD_BREAKPOINT","LG_BREAKPOINT","XL_BREAKPOINT","XXL_BREAKPOINT","SgdsElement","genId","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","waitForEvent","html","classMap","mainnavStyle","SgdsIcon","__decorate","provide","MainnavContext","state","query","property","queryAssignedElements","watch","setDefaultAnimation"],"mappings":"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"}
+{"version":3,"file":"sgds-mainnav.cjs.js","sources":["../../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { provide } from \"@lit/context\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { LG_BREAKPOINT, MD_BREAKPOINT, SM_BREAKPOINT, XL_BREAKPOINT, XXL_BREAKPOINT } from \"../../utils/breakpoints\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { MainnavContext } from \"./mainnav-context\";\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\nconst SIZES = {\n  sm: SM_BREAKPOINT,\n  md: MD_BREAKPOINT,\n  lg: LG_BREAKPOINT,\n  xl: XL_BREAKPOINT,\n  XXL: XXL_BREAKPOINT,\n  never: Infinity,\n  always: -1\n};\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @provide({ context: MainnavContext })\n  @state()\n  private _breakpointReached = false;\n\n  /** @internal */\n  @query(\"nav\") nav: HTMLElement;\n  /** @internal */\n  @query(\".navbar\") navbar: HTMLElement;\n  /** @internal */\n  @query(\".navbar-toggler\") header: HTMLElement;\n  /** @internal */\n  @query(\".navbar-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".navbar-nav-scroll\") navScroll: HTMLElement;\n  /** @internal */\n  @query(\"slot[name='non-collapsible']\") nonCollapsibleSlot: HTMLSlotElement;\n\n  constructor() {\n    super();\n    window.addEventListener(\"resize\", () => {\n      const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];\n      if (newBreakpointReachedValue !== this.breakpointReached) {\n        this.requestUpdate();\n      } else {\n        this.body ? (this.body.hidden = true) : null;\n        this.expanded = false;\n      }\n\n      if (newBreakpointReachedValue) {\n        this._handleMobileNav();\n\n        if (!this._breakpointReached) {\n          this._breakpointReached = true;\n        }\n      } else {\n        this._handleDesktopNav();\n        this._breakpointReached = false;\n      }\n    });\n  }\n\n  /** The href link for brand logo */\n  @property({ type: String })\n  brandHref = \"\";\n\n  private collapseId = genId(\"mainnav\", \"collapse\");\n\n  /** 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 */\n  @property({ type: String })\n  expand: MainnavExpandSize = \"lg\";\n\n  /** @internal */\n  @state()\n  breakpointReached = false;\n\n  /** @internal */\n  @state()\n  expanded = false;\n\n  /** @internal */\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  firstUpdated() {\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n      this._handleMobileNav();\n      this._breakpointReached = true;\n    }\n\n    const items = [...this.defaultSlotItems, ...this.endSlotItems] as SgdsMainnavItem[] | SgdsMainnavDropdown[];\n    items.forEach((item: SgdsMainnavItem | SgdsMainnavDropdown) => {\n      item.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n    if (!e.composedPath().includes(self) && !e.composedPath().includes(this.header)) {\n      this.hide();\n    }\n  }\n\n  private _handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      document.querySelector(\"body\").style.overflow = \"hidden\";\n      this.show();\n    }\n\n    this.header.focus();\n  }\n\n  private async _handleMobileNav() {\n    if (!this.nav) return;\n\n    this.nav.appendChild(this.body);\n    await customElements.whenDefined(\"sgds-masthead\");\n    const offsetTop = this.nav.offsetTop;\n    const navHeight = this.nav.clientHeight;\n    const mainNavPosition = offsetTop + navHeight;\n    this.body.style.top = `${mainNavPosition}px`;\n    this.navScroll.style.maxHeight = `calc(100dvh - ${mainNavPosition}px)`;\n  }\n\n  private _handleDesktopNav() {\n    this.navbar?.insertBefore(this.body, this.nonCollapsibleSlot);\n  }\n\n  private async _animateToShow() {\n    const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n    if (sgdsShow.defaultPrevented) {\n      this.expanded = false;\n      return;\n    }\n\n    await stopAnimations(this.body);\n    this.body.hidden = false;\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.show\");\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.style.height = \"auto\";\n\n    this.emit(\"sgds-after-show\");\n  }\n\n  private async _animateToHide() {\n    const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n    if (slHide.defaultPrevented) {\n      this.expanded = true;\n      return;\n    }\n\n    await stopAnimations(this.body);\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.hide\");\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.hidden = true;\n    this.body.style.height = \"auto\";\n\n    this.emit(\"sgds-after-hide\");\n  }\n\n  @watch(\"expanded\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.expanded) {\n      // Show\n      this._animateToShow();\n    } else {\n      // Hide\n      this._animateToHide();\n    }\n  }\n  /** Shows the menu. For when mainnav is in the collapsed form */\n  public async show() {\n    if (this.expanded) {\n      return;\n    }\n\n    this.expanded = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the menu. For when mainnav is in the collapsed form */\n  public async hide() {\n    if (!this.expanded) {\n      return;\n    }\n\n    this.expanded = false;\n    document.querySelector(\"body\").style.removeProperty(\"overflow\");\n    this.emit(\"close-dropdown-menu\");\n\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  // assigning name attribute to elements added in slot=\"end\", to use wildcard css selector to assign styles only to *-mainnav-item\n  _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n    });\n  }\n\n  render() {\n    this.breakpointReached = window.innerWidth < SIZES[this.expand];\n\n    return html`\n      <nav>\n        <div class=\"navbar ${this._expandClass()}\">\n          <a class=\"navbar-brand\" href=${this.brandHref} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <slot name=\"non-collapsible\"></slot>\n          <sgds-icon-button\n            name=${this.expanded ? \"cross\" : \"menu\"}\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"navbar-toggler\"\n            @click=${this._handleSummaryClick}\n            aria-controls=\"${this.collapseId}\"\n            aria-expanded=\"${this.expanded}\"\n            aria-label=\"Toggle navigation\"\n          ></sgds-icon-button>\n        </div>\n      </nav>\n    `;\n  }\n  _expandClass() {\n    switch (this.expand) {\n      case \"always\":\n        return \"navbar-expand\";\n      case \"never\":\n        break;\n      default:\n        return `navbar-expand-${this.expand}`;\n    }\n  }\n}\nsetDefaultAnimation(\"mainnav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"mainnav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsMainnav;\n"],"names":["SM_BREAKPOINT","MD_BREAKPOINT","LG_BREAKPOINT","XL_BREAKPOINT","XXL_BREAKPOINT","SgdsElement","genId","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","waitForEvent","html","classMap","mainnavStyle","SgdsIcon","__decorate","provide","MainnavContext","state","query","property","queryAssignedElements","watch","setDefaultAnimation"],"mappings":"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"}

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

@@ -116,14 +116,15 @@ class SgdsMainnav extends SgdsElement {
         this.header.focus();
     }
     async _handleMobileNav() {
-        var _a, _b;
-        (_a = this.nav) === null || _a === void 0 ? void 0 : _a.appendChild(this.body);
+        if (!this.nav)
+            return;
+        this.nav.appendChild(this.body);
         await customElements.whenDefined("sgds-masthead");
-        const mastheadHeight = ((_b = document.querySelector("sgds-masthead")) === null || _b === void 0 ? void 0 : _b.clientHeight) | 0;
+        const offsetTop = this.nav.offsetTop;
         const navHeight = this.nav.clientHeight;
-        const mainNavHeight = mastheadHeight + navHeight;
-        this.body.style.top = `${mainNavHeight}px`;
-        this.navScroll.style.maxHeight = `calc(100dvh - ${mainNavHeight}px)`;
+        const mainNavPosition = offsetTop + navHeight;
+        this.body.style.top = `${mainNavPosition}px`;
+        this.navScroll.style.maxHeight = `calc(100dvh - ${mainNavPosition}px)`;
     }
     _handleDesktopNav() {
         var _a;

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav.js","sources":["../../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { provide } from \"@lit/context\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { LG_BREAKPOINT, MD_BREAKPOINT, SM_BREAKPOINT, XL_BREAKPOINT, XXL_BREAKPOINT } from \"../../utils/breakpoints\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { MainnavContext } from \"./mainnav-context\";\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\nconst SIZES = {\n  sm: SM_BREAKPOINT,\n  md: MD_BREAKPOINT,\n  lg: LG_BREAKPOINT,\n  xl: XL_BREAKPOINT,\n  XXL: XXL_BREAKPOINT,\n  never: Infinity,\n  always: -1\n};\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @provide({ context: MainnavContext })\n  @state()\n  private _breakpointReached = false;\n\n  /** @internal */\n  @query(\"nav\") nav: HTMLElement;\n  /** @internal */\n  @query(\".navbar\") navbar: HTMLElement;\n  /** @internal */\n  @query(\".navbar-toggler\") header: HTMLElement;\n  /** @internal */\n  @query(\".navbar-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".navbar-nav-scroll\") navScroll: HTMLElement;\n  /** @internal */\n  @query(\"slot[name='non-collapsible']\") nonCollapsibleSlot: HTMLSlotElement;\n\n  constructor() {\n    super();\n    window.addEventListener(\"resize\", () => {\n      const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];\n      if (newBreakpointReachedValue !== this.breakpointReached) {\n        this.requestUpdate();\n      } else {\n        this.body ? (this.body.hidden = true) : null;\n        this.expanded = false;\n      }\n\n      if (newBreakpointReachedValue) {\n        this._handleMobileNav();\n\n        if (!this._breakpointReached) {\n          this._breakpointReached = true;\n        }\n      } else {\n        this._handleDesktopNav();\n        this._breakpointReached = false;\n      }\n    });\n  }\n\n  /** The href link for brand logo */\n  @property({ type: String })\n  brandHref = \"\";\n\n  private collapseId = genId(\"mainnav\", \"collapse\");\n\n  /** 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 */\n  @property({ type: String })\n  expand: MainnavExpandSize = \"lg\";\n\n  /** @internal */\n  @state()\n  breakpointReached = false;\n\n  /** @internal */\n  @state()\n  expanded = false;\n\n  /** @internal */\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  firstUpdated() {\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n      this._handleMobileNav();\n      this._breakpointReached = true;\n    }\n\n    const items = [...this.defaultSlotItems, ...this.endSlotItems] as SgdsMainnavItem[] | SgdsMainnavDropdown[];\n    items.forEach((item: SgdsMainnavItem | SgdsMainnavDropdown) => {\n      item.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n    if (!e.composedPath().includes(self) && !e.composedPath().includes(this.header)) {\n      this.hide();\n    }\n  }\n\n  private _handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      document.querySelector(\"body\").style.overflow = \"hidden\";\n      this.show();\n    }\n\n    this.header.focus();\n  }\n\n  private async _handleMobileNav() {\n    this.nav?.appendChild(this.body);\n    await customElements.whenDefined(\"sgds-masthead\");\n    const mastheadHeight = document.querySelector(\"sgds-masthead\")?.clientHeight | 0;\n    const navHeight = this.nav.clientHeight;\n    const mainNavHeight = mastheadHeight + navHeight;\n    this.body.style.top = `${mainNavHeight}px`;\n    this.navScroll.style.maxHeight = `calc(100dvh - ${mainNavHeight}px)`;\n  }\n\n  private _handleDesktopNav() {\n    this.navbar?.insertBefore(this.body, this.nonCollapsibleSlot);\n  }\n\n  private async _animateToShow() {\n    const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n    if (sgdsShow.defaultPrevented) {\n      this.expanded = false;\n      return;\n    }\n\n    await stopAnimations(this.body);\n    this.body.hidden = false;\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.show\");\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.style.height = \"auto\";\n\n    this.emit(\"sgds-after-show\");\n  }\n\n  private async _animateToHide() {\n    const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n    if (slHide.defaultPrevented) {\n      this.expanded = true;\n      return;\n    }\n\n    await stopAnimations(this.body);\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.hide\");\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.hidden = true;\n    this.body.style.height = \"auto\";\n\n    this.emit(\"sgds-after-hide\");\n  }\n\n  @watch(\"expanded\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.expanded) {\n      // Show\n      this._animateToShow();\n    } else {\n      // Hide\n      this._animateToHide();\n    }\n  }\n  /** Shows the menu. For when mainnav is in the collapsed form */\n  public async show() {\n    if (this.expanded) {\n      return;\n    }\n\n    this.expanded = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the menu. For when mainnav is in the collapsed form */\n  public async hide() {\n    if (!this.expanded) {\n      return;\n    }\n\n    this.expanded = false;\n    document.querySelector(\"body\").style.removeProperty(\"overflow\");\n    this.emit(\"close-dropdown-menu\");\n\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  // assigning name attribute to elements added in slot=\"end\", to use wildcard css selector to assign styles only to *-mainnav-item\n  _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n    });\n  }\n\n  render() {\n    this.breakpointReached = window.innerWidth < SIZES[this.expand];\n\n    return html`\n      <nav>\n        <div class=\"navbar ${this._expandClass()}\">\n          <a class=\"navbar-brand\" href=${this.brandHref} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <slot name=\"non-collapsible\"></slot>\n          <sgds-icon-button\n            name=${this.expanded ? \"cross\" : \"menu\"}\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"navbar-toggler\"\n            @click=${this._handleSummaryClick}\n            aria-controls=\"${this.collapseId}\"\n            aria-expanded=\"${this.expanded}\"\n            aria-label=\"Toggle navigation\"\n          ></sgds-icon-button>\n        </div>\n      </nav>\n    `;\n  }\n  _expandClass() {\n    switch (this.expand) {\n      case \"always\":\n        return \"navbar-expand\";\n      case \"never\":\n        break;\n      default:\n        return `navbar-expand-${this.expand}`;\n    }\n  }\n}\nsetDefaultAnimation(\"mainnav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"mainnav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsMainnav;\n"],"names":["mainnavStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-mainnav.js","sources":["../../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { provide } from \"@lit/context\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { LG_BREAKPOINT, MD_BREAKPOINT, SM_BREAKPOINT, XL_BREAKPOINT, XXL_BREAKPOINT } from \"../../utils/breakpoints\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { MainnavContext } from \"./mainnav-context\";\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\nconst SIZES = {\n  sm: SM_BREAKPOINT,\n  md: MD_BREAKPOINT,\n  lg: LG_BREAKPOINT,\n  xl: XL_BREAKPOINT,\n  XXL: XXL_BREAKPOINT,\n  never: Infinity,\n  always: -1\n};\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @provide({ context: MainnavContext })\n  @state()\n  private _breakpointReached = false;\n\n  /** @internal */\n  @query(\"nav\") nav: HTMLElement;\n  /** @internal */\n  @query(\".navbar\") navbar: HTMLElement;\n  /** @internal */\n  @query(\".navbar-toggler\") header: HTMLElement;\n  /** @internal */\n  @query(\".navbar-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".navbar-nav-scroll\") navScroll: HTMLElement;\n  /** @internal */\n  @query(\"slot[name='non-collapsible']\") nonCollapsibleSlot: HTMLSlotElement;\n\n  constructor() {\n    super();\n    window.addEventListener(\"resize\", () => {\n      const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];\n      if (newBreakpointReachedValue !== this.breakpointReached) {\n        this.requestUpdate();\n      } else {\n        this.body ? (this.body.hidden = true) : null;\n        this.expanded = false;\n      }\n\n      if (newBreakpointReachedValue) {\n        this._handleMobileNav();\n\n        if (!this._breakpointReached) {\n          this._breakpointReached = true;\n        }\n      } else {\n        this._handleDesktopNav();\n        this._breakpointReached = false;\n      }\n    });\n  }\n\n  /** The href link for brand logo */\n  @property({ type: String })\n  brandHref = \"\";\n\n  private collapseId = genId(\"mainnav\", \"collapse\");\n\n  /** 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 */\n  @property({ type: String })\n  expand: MainnavExpandSize = \"lg\";\n\n  /** @internal */\n  @state()\n  breakpointReached = false;\n\n  /** @internal */\n  @state()\n  expanded = false;\n\n  /** @internal */\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  firstUpdated() {\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n      this._handleMobileNav();\n      this._breakpointReached = true;\n    }\n\n    const items = [...this.defaultSlotItems, ...this.endSlotItems] as SgdsMainnavItem[] | SgdsMainnavDropdown[];\n    items.forEach((item: SgdsMainnavItem | SgdsMainnavDropdown) => {\n      item.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n    if (!e.composedPath().includes(self) && !e.composedPath().includes(this.header)) {\n      this.hide();\n    }\n  }\n\n  private _handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      document.querySelector(\"body\").style.overflow = \"hidden\";\n      this.show();\n    }\n\n    this.header.focus();\n  }\n\n  private async _handleMobileNav() {\n    if (!this.nav) return;\n\n    this.nav.appendChild(this.body);\n    await customElements.whenDefined(\"sgds-masthead\");\n    const offsetTop = this.nav.offsetTop;\n    const navHeight = this.nav.clientHeight;\n    const mainNavPosition = offsetTop + navHeight;\n    this.body.style.top = `${mainNavPosition}px`;\n    this.navScroll.style.maxHeight = `calc(100dvh - ${mainNavPosition}px)`;\n  }\n\n  private _handleDesktopNav() {\n    this.navbar?.insertBefore(this.body, this.nonCollapsibleSlot);\n  }\n\n  private async _animateToShow() {\n    const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n    if (sgdsShow.defaultPrevented) {\n      this.expanded = false;\n      return;\n    }\n\n    await stopAnimations(this.body);\n    this.body.hidden = false;\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.show\");\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.style.height = \"auto\";\n\n    this.emit(\"sgds-after-show\");\n  }\n\n  private async _animateToHide() {\n    const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n    if (slHide.defaultPrevented) {\n      this.expanded = true;\n      return;\n    }\n\n    await stopAnimations(this.body);\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.hide\");\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.hidden = true;\n    this.body.style.height = \"auto\";\n\n    this.emit(\"sgds-after-hide\");\n  }\n\n  @watch(\"expanded\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.expanded) {\n      // Show\n      this._animateToShow();\n    } else {\n      // Hide\n      this._animateToHide();\n    }\n  }\n  /** Shows the menu. For when mainnav is in the collapsed form */\n  public async show() {\n    if (this.expanded) {\n      return;\n    }\n\n    this.expanded = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the menu. For when mainnav is in the collapsed form */\n  public async hide() {\n    if (!this.expanded) {\n      return;\n    }\n\n    this.expanded = false;\n    document.querySelector(\"body\").style.removeProperty(\"overflow\");\n    this.emit(\"close-dropdown-menu\");\n\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  // assigning name attribute to elements added in slot=\"end\", to use wildcard css selector to assign styles only to *-mainnav-item\n  _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n    });\n  }\n\n  render() {\n    this.breakpointReached = window.innerWidth < SIZES[this.expand];\n\n    return html`\n      <nav>\n        <div class=\"navbar ${this._expandClass()}\">\n          <a class=\"navbar-brand\" href=${this.brandHref} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <slot name=\"non-collapsible\"></slot>\n          <sgds-icon-button\n            name=${this.expanded ? \"cross\" : \"menu\"}\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"navbar-toggler\"\n            @click=${this._handleSummaryClick}\n            aria-controls=\"${this.collapseId}\"\n            aria-expanded=\"${this.expanded}\"\n            aria-label=\"Toggle navigation\"\n          ></sgds-icon-button>\n        </div>\n      </nav>\n    `;\n  }\n  _expandClass() {\n    switch (this.expand) {\n      case \"always\":\n        return \"navbar-expand\";\n      case \"never\":\n        break;\n      default:\n        return `navbar-expand-${this.expand}`;\n    }\n  }\n}\nsetDefaultAnimation(\"mainnav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"mainnav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsMainnav;\n"],"names":["mainnavStyle"],"mappings":"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"}

package/react/components/Masthead/masthead.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc}a:hover{color:#0022b9}.sgds-masthead{color:light-dark(#252525,#eaeaea);font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#eaeaea,#252525)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width);padding:.25rem var(--sgds-mainnav-padding-x);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#5a42c0,#9288f0);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#42209f,#7562e2)}.panel{background-color:light-dark(hsla(0,0%,5%,.05),hsla(0,0%,100%,.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#595959,#b2b2b2)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#0e0e0e,#fff)}a.trusted-websites-link{color:light-dark(#5a42c0,#9288f0);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#42209f,#7562e2)}@media screen and (max-width:768px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
+var css_248z = lit.css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#f3f3f3,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width);padding:.25rem var(--sgds-mainnav-padding-x);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(oklch(from #0e0e0e l c h/.1),oklch(from #fff l c h/.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}@media screen and (max-width:768px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=masthead.cjs.js.map

package/react/components/Masthead/masthead.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc}a:hover{color:#0022b9}.sgds-masthead{color:light-dark(#252525,#eaeaea);font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#eaeaea,#252525)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width);padding:.25rem var(--sgds-mainnav-padding-x);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#5a42c0,#9288f0);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#42209f,#7562e2)}.panel{background-color:light-dark(hsla(0,0%,5%,.05),hsla(0,0%,100%,.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#595959,#b2b2b2)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#0e0e0e,#fff)}a.trusted-websites-link{color:light-dark(#5a42c0,#9288f0);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#42209f,#7562e2)}@media screen and (max-width:768px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
+var css_248z = css`b{font-weight:bolder}[role=button]{cursor:pointer}a{color:#0049dc}a:hover{color:#0022b9}.sgds-masthead{font-family:Inter,system-ui,sans-serif;font-size:.875rem;line-height:1.25rem}.banner{background-color:light-dark(#f3f3f3,#1a1a1a)}.container{margin-left:auto;margin-right:auto;max-width:var(--sgds-mainnav-max-width);padding:.25rem var(--sgds-mainnav-padding-x);width:100%}.sg-crest{flex-shrink:0;height:20px;width:20px}.sg-crest path{fill:#db0000}.masthead-layout{display:flex;gap:.25rem}.masthead-text-layout{align-items:center;display:flex;flex-wrap:wrap;gap:0 .75rem}.sgds-masthead-identify-icon{align-self:center;display:block;height:20px;transform:rotate(180deg);transition:transform .3s ease-in-out 0s;user-select:none;width:20px}.sgds-masthead-identify-icon.show{transform:rotate(0deg)}.sgds-masthead-button{align-items:center;color:light-dark(#0269d0,#60aaf4);cursor:pointer;display:flex;gap:4px}.sgds-masthead-button:hover{color:light-dark(#0151a0,#96c7f7)}.panel{background-color:light-dark(oklch(from #0e0e0e l c h/.1),oklch(from #fff l c h/.1))}.sgds-masthead .sgds-masthead-content{display:none;padding-bottom:1rem;padding-top:1rem}.sgds-masthead .sgds-masthead-content.show{display:block}.content-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.icon{margin-top:-.1em}.wrapper{display:flex;gap:.5rem}.content{display:flex;flex-direction:column;gap:.25rem}.content .title{font-weight:600}.content article{color:light-dark(#525252,#a5a5a5)}.banner-icon,.banner-icon-inline{height:20px;width:20px}.banner-icon path,.banner-icon-inline path{fill:light-dark(#1a1a1a,#f3f3f3)}a.trusted-websites-link{color:light-dark(#0269d0,#60aaf4);text-decoration:underline;width:fit-content}a.trusted-websites-link:hover{color:light-dark(#0151a0,#96c7f7)}@media screen and (max-width:768px){.container{padding:.25rem var(--sgds-mainnav-mobile-padding-x)}.sgds-masthead-content .content-grid{gap:1rem;grid-template-columns:1fr}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=masthead.js.map

package/react/components/Modal/modal.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([size=sm]) .modal-panel{max-width:480px}:host([size=lg]) .modal-panel{max-width:800px}:host([size=fullscreen]) .modal-panel{max-width:1128px}:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-neutral-bg-inverse)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-neutral-bg-inverse)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:105500}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;margin:var(--sgds-spacer-9) var(--sgds-spacer-6);max-height:calc(100% - var(--sgds-spacer-9) - var(--sgds-spacer-9));max-width:640px;position:relative;width:100%}.modal-panel:focus{outline:none}@media screen and (max-width:420px){.modal-panel{margin:var(--sgds-spacer-8) var(--sgds-spacer-6);max-height:calc(100% - var(--sgds-spacer-8) - var(--sgds-spacer-8))}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;padding:var(--sgds-padding-xl)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-6:var(--sgds-font-size-4);align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-6,--sgds-font-size-4);gap:1rem;line-height:var(--sgds-line-height-heading);margin:var(--sgds-margin-none,var(--sgds-margin-xs,--sgds-margin-2-xs))}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-default-color-subtle);line-height:var(--sgds-line-height-body);margin:var(--sgds-margin-none,--sgds-paragraph-spacing-xl)}.modal-body{-webkit-overflow-scrolling:touch;overflow:auto;padding:0 var(--sgds-padding-xl) var(--sgds-padding-xl)}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding:var(--sgds-padding-xl)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-default-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
+var css_248z = lit.css`:host([size=sm]) .modal-panel{max-width:480px}:host([size=lg]) .modal-panel{max-width:800px}:host([size=fullscreen]) .modal-panel{max-width:1128px}:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:105500}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;margin:var(--sgds-spacer-9) var(--sgds-spacer-6);max-height:calc(100% - var(--sgds-spacer-9) - var(--sgds-spacer-9));max-width:640px;position:relative;width:100%}.modal-panel:focus{outline:none}@media screen and (max-width:420px){.modal-panel{margin:var(--sgds-spacer-8) var(--sgds-spacer-6);max-height:calc(100% - var(--sgds-spacer-8) - var(--sgds-spacer-8))}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;padding:var(--sgds-padding-xl)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-6:var(--sgds-font-size-4);align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-6,--sgds-font-size-4);gap:1rem;line-height:var(--sgds-line-height-heading);margin:var(--sgds-margin-none,var(--sgds-margin-xs,--sgds-margin-2-xs))}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-body);margin:var(--sgds-margin-none,--sgds-paragraph-spacing-xl)}.modal-body{-webkit-overflow-scrolling:touch;overflow:auto;padding:0 var(--sgds-padding-xl) var(--sgds-padding-xl)}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding:var(--sgds-padding-xl)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=modal.cjs.js.map

package/react/components/Modal/modal.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([size=sm]) .modal-panel{max-width:480px}:host([size=lg]) .modal-panel{max-width:800px}:host([size=fullscreen]) .modal-panel{max-width:1128px}:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-neutral-bg-inverse)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-neutral-bg-inverse)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:105500}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;margin:var(--sgds-spacer-9) var(--sgds-spacer-6);max-height:calc(100% - var(--sgds-spacer-9) - var(--sgds-spacer-9));max-width:640px;position:relative;width:100%}.modal-panel:focus{outline:none}@media screen and (max-width:420px){.modal-panel{margin:var(--sgds-spacer-8) var(--sgds-spacer-6);max-height:calc(100% - var(--sgds-spacer-8) - var(--sgds-spacer-8))}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;padding:var(--sgds-padding-xl)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-6:var(--sgds-font-size-4);align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-6,--sgds-font-size-4);gap:1rem;line-height:var(--sgds-line-height-heading);margin:var(--sgds-margin-none,var(--sgds-margin-xs,--sgds-margin-2-xs))}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-default-color-subtle);line-height:var(--sgds-line-height-body);margin:var(--sgds-margin-none,--sgds-paragraph-spacing-xl)}.modal-body{-webkit-overflow-scrolling:touch;overflow:auto;padding:0 var(--sgds-padding-xl) var(--sgds-padding-xl)}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding:var(--sgds-padding-xl)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-default-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
+var css_248z = css`:host([size=sm]) .modal-panel{max-width:480px}:host([size=lg]) .modal-panel{max-width:800px}:host([size=fullscreen]) .modal-panel{max-width:1128px}:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:105500}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;margin:var(--sgds-spacer-9) var(--sgds-spacer-6);max-height:calc(100% - var(--sgds-spacer-9) - var(--sgds-spacer-9));max-width:640px;position:relative;width:100%}.modal-panel:focus{outline:none}@media screen and (max-width:420px){.modal-panel{margin:var(--sgds-spacer-8) var(--sgds-spacer-6);max-height:calc(100% - var(--sgds-spacer-8) - var(--sgds-spacer-8))}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;padding:var(--sgds-padding-xl)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-6:var(--sgds-font-size-4);align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-6,--sgds-font-size-4);gap:1rem;line-height:var(--sgds-line-height-heading);margin:var(--sgds-margin-none,var(--sgds-margin-xs,--sgds-margin-2-xs))}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-body);margin:var(--sgds-margin-none,--sgds-paragraph-spacing-xl)}.modal-body{-webkit-overflow-scrolling:touch;overflow:auto;padding:0 var(--sgds-padding-xl) var(--sgds-padding-xl)}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding:var(--sgds-padding-xl)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
 
 export { css_248z as default };
 //# sourceMappingURL=modal.js.map