@govtechsg/sgds-web-component 3.26.1 → 3.27.0-rc.1

package/react/base/nav-element.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-element.cjs.js","sources":["../../../src/base/nav-element.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap, TemplateResult } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"./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 SgdsIconButton from \"../components/IconButton/sgds-icon-button\";\n\nexport type NavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\nexport type NavTone = \"default\" | \"brand\" | \"gradient-1\" | \"gradient-2\" | \"gradient-3\" | \"gradient-4\";\n\nconst SIZES: Record<NavExpandSize, number> = {\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 * Base class for navigation components (sgds-mainnav and sgds-appnav).\n * Provides collapse/expand behavior, breakpoint handling, and animation logic.\n * Subclasses must implement `render()` and provide their own context.\n */\nexport default abstract class NavElement extends SgdsElement {\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton\n  };\n\n  /** Indicates if mobile menu is open or closed */\n  @state()\n  protected expanded = false;\n\n  /** Denotes the transition state of mobile mainnav menu opening */\n  @state()\n  protected expanding = false;\n\n  @query(\"nav\") protected nav!: HTMLElement;\n  @query(\".navbar\") protected navbar!: HTMLElement;\n  @query(\".navbar-toggler\") protected header!: HTMLElement;\n  @query(\".navbar-body\") protected body!: HTMLElement;\n  @query(\".navbar-nav-scroll\") protected navScroll!: HTMLElement;\n  @query(\".navbar-end\") protected navbarEnd!: HTMLElement;\n\n  /** The href link for brand logo */\n  @property({ type: String })\n  brandHref = \"\";\n\n  /** @internal */\n  protected collapseId = genId(\"nav\", \"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: NavExpandSize = \"lg\";\n\n  @state()\n  protected breakpointReached = false;\n\n  /** @internal Whether sgds-*-profile is slotted in the profile slot */\n  @state()\n  protected _hasProfileComponent = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._handleResize();\n    window.addEventListener(\"click\", this._handleClickOutsideBound);\n    window.addEventListener(\"resize\", this._handleResizeBound);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener(\"click\", this._handleClickOutsideBound);\n    window.removeEventListener(\"resize\", this._handleResizeBound);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n      this._handleMobileNav();\n      this._onBreakpointReached(true);\n    }\n  }\n\n  private _handleClickOutsideBound = (event: MouseEvent) => this._handleClickOutOfElement(event, this.body);\n  private _handleResizeBound = () => this._handleResize();\n\n  private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n    if (!e.composedPath().includes(self) && !(this.header && e.composedPath().includes(this.header))) {\n      this.hide();\n    }\n  }\n\n  protected _handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      document.body.style.overflow = \"hidden\";\n      this.show();\n    }\n  }\n\n  protected _handleResize() {\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.expanding = false;\n    }\n\n    if (newBreakpointReachedValue) {\n      this._handleMobileNav();\n      if (!this._isBreakpointReached()) {\n        this._onBreakpointReached(true);\n        window.addEventListener(\"scrollend\", this._handleMobileNavBound);\n      }\n    } else {\n      this._handleDesktopNav();\n      this._onBreakpointReached(false);\n      window.removeEventListener(\"scrollend\", this._handleMobileNavBound);\n    }\n  }\n\n  /** Hook for subclasses to update context providers when breakpoint state changes */\n  protected abstract _onBreakpointReached(reached: boolean): void;\n\n  /** Hook for subclasses to check current breakpoint context state */\n  protected abstract _isBreakpointReached(): boolean;\n\n  private _handleMobileNavBound = this._handleMobileNav.bind(this);\n\n  protected async _handleMobileNav() {\n    if (!this.nav) return;\n    this.nav.appendChild(this.body);\n    await customElements.whenDefined(\"sgds-masthead\");\n\n    const { bottom } = this.nav.getBoundingClientRect();\n    const navBodyPaddingY =\n      parseFloat(getComputedStyle(this.body).paddingTop) + parseFloat(getComputedStyle(this.body).paddingBottom);\n\n    this.navScroll.style.maxHeight = `calc(100dvh - ${bottom}px - ${navBodyPaddingY}px)`;\n  }\n\n  protected _handleDesktopNav() {\n    this.navbar?.insertBefore(this.body, this.navbarEnd);\n  }\n\n  private async _animateToShow() {\n    const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n    if (sgdsShow.defaultPrevented) {\n      this.expanding = false;\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, \"nav.show\");\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.style.height = \"auto\";\n\n    this._onMenuShown();\n    this.emit(\"sgds-after-show\");\n  }\n\n  /** Hook for subclasses to perform actions after the mobile menu opens (e.g., focus management) */\n  protected _onMenuShown(): void {\n    // Default: no-op. Subclasses can override.\n  }\n\n  private async _animateToHide() {\n    const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n    if (sgdsHide.defaultPrevented) {\n      this.expanding = false;\n      this.expanded = true;\n      return;\n    }\n\n    await stopAnimations(this.body);\n\n    const { keyframes, options } = getAnimation(this, \"nav.hide\");\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.hidden = true;\n    this.body.style.height = \"auto\";\n    this.emit(\"sgds-after-hide\");\n  }\n\n  /** @internal */\n  @watch(\"expanding\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.expanding) {\n      await this._animateToShow();\n      this.expanded = true;\n    } else {\n      this.header?.focus();\n      await this._animateToHide();\n      this.expanded = false;\n    }\n  }\n\n  /** Shows the menu. For when nav is in the collapsed form */\n  public async show() {\n    if (this.expanded) return;\n    this.expanding = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the menu. For when nav is in the collapsed form */\n  public async hide() {\n    if (!this.expanded) return;\n    this.expanding = false;\n    document.body.style.removeProperty(\"overflow\");\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  /** Helper to get the expand CSS class */\n  protected _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\n  /** Helper: renders the hamburger toggler icon-button. Subclasses should call this in their render(). */\n  protected _renderToggler(tone?: NavTone): TemplateResult | typeof nothing {\n    return html`<sgds-icon-button\n      name=${this.expanded ? \"cross\" : \"menu\"}\n      variant=\"ghost\"\n      size=\"sm\"\n      tone=${ifDefined(tone && tone !== \"default\" ? \"fixed-light\" : undefined)}\n      class=\"navbar-toggler\"\n      @click=${this._handleSummaryClick}\n      aria-controls=\"${this.collapseId}\"\n      aria-expanded=\"${this.expanded}\"\n      .ariaLabel=${\"Toggle navigation\"}\n    ></sgds-icon-button>`;\n  }\n}\n\nsetDefaultAnimation(\"nav.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(\"nav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n"],"names":["SM_BREAKPOINT","MD_BREAKPOINT","LG_BREAKPOINT","XL_BREAKPOINT","XXL_BREAKPOINT","SgdsElement","genId","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","waitForEvent","html","ifDefined","SgdsIconButton","__decorate","state","query","property","watch","setDefaultAnimation"],"mappings":"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"}

package/react/base/nav-element.js

@@ -0,0 +1,264 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { state, query, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import SgdsElement from './sgds-element.js';
+import { stopAnimations, animateTo, shimKeyframesHeightAuto } from '../utils/animate.js';
+import { setDefaultAnimation, getAnimation } from '../utils/animation-registry.js';
+import { SM_BREAKPOINT, MD_BREAKPOINT, LG_BREAKPOINT, XL_BREAKPOINT, XXL_BREAKPOINT } from '../utils/breakpoints.js';
+import { waitForEvent } from '../utils/event.js';
+import genId from '../utils/generateId.js';
+import { watch } from '../utils/watch.js';
+import { SgdsIconButton } from '../components/IconButton/sgds-icon-button.js';
+
+const SIZES = {
+    sm: SM_BREAKPOINT,
+    md: MD_BREAKPOINT,
+    lg: LG_BREAKPOINT,
+    xl: XL_BREAKPOINT,
+    xxl: XXL_BREAKPOINT,
+    never: Infinity,
+    always: -1
+};
+/**
+ * Base class for navigation components (sgds-mainnav and sgds-appnav).
+ * Provides collapse/expand behavior, breakpoint handling, and animation logic.
+ * Subclasses must implement `render()` and provide their own context.
+ */
+class NavElement extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** Indicates if mobile menu is open or closed */
+        this.expanded = false;
+        /** Denotes the transition state of mobile mainnav menu opening */
+        this.expanding = false;
+        /** The href link for brand logo */
+        this.brandHref = "";
+        /** @internal */
+        this.collapseId = genId("nav", "collapse");
+        /** The breakpoint, below which, the Navbar will collapse. When always the Navbar will always be expanded regardless of screen size. When never, the Navbar will always be collapsed */
+        this.expand = "lg";
+        this.breakpointReached = false;
+        /** @internal Whether sgds-*-profile is slotted in the profile slot */
+        this._hasProfileComponent = false;
+        this._handleClickOutsideBound = (event) => this._handleClickOutOfElement(event, this.body);
+        this._handleResizeBound = () => this._handleResize();
+        this._handleMobileNavBound = this._handleMobileNav.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._handleResize();
+        window.addEventListener("click", this._handleClickOutsideBound);
+        window.addEventListener("resize", this._handleResizeBound);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("click", this._handleClickOutsideBound);
+        window.removeEventListener("resize", this._handleResizeBound);
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        if (this.breakpointReached && this.body) {
+            this.expanded = false;
+            this.body.hidden = true;
+            this._handleMobileNav();
+            this._onBreakpointReached(true);
+        }
+    }
+    _handleClickOutOfElement(e, self) {
+        if (!e.composedPath().includes(self) && !(this.header && e.composedPath().includes(this.header))) {
+            this.hide();
+        }
+    }
+    _handleSummaryClick() {
+        if (this.expanded) {
+            this.hide();
+        }
+        else {
+            document.body.style.overflow = "hidden";
+            this.show();
+        }
+    }
+    _handleResize() {
+        const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];
+        if (newBreakpointReachedValue !== this.breakpointReached) {
+            this.requestUpdate();
+        }
+        else {
+            this.body ? (this.body.hidden = true) : null;
+            this.expanding = false;
+        }
+        if (newBreakpointReachedValue) {
+            this._handleMobileNav();
+            if (!this._isBreakpointReached()) {
+                this._onBreakpointReached(true);
+                window.addEventListener("scrollend", this._handleMobileNavBound);
+            }
+        }
+        else {
+            this._handleDesktopNav();
+            this._onBreakpointReached(false);
+            window.removeEventListener("scrollend", this._handleMobileNavBound);
+        }
+    }
+    async _handleMobileNav() {
+        if (!this.nav)
+            return;
+        this.nav.appendChild(this.body);
+        await customElements.whenDefined("sgds-masthead");
+        const { bottom } = this.nav.getBoundingClientRect();
+        const navBodyPaddingY = parseFloat(getComputedStyle(this.body).paddingTop) + parseFloat(getComputedStyle(this.body).paddingBottom);
+        this.navScroll.style.maxHeight = `calc(100dvh - ${bottom}px - ${navBodyPaddingY}px)`;
+    }
+    _handleDesktopNav() {
+        var _a;
+        (_a = this.navbar) === null || _a === void 0 ? void 0 : _a.insertBefore(this.body, this.navbarEnd);
+    }
+    async _animateToShow() {
+        const sgdsShow = this.emit("sgds-show", { cancelable: true });
+        if (sgdsShow.defaultPrevented) {
+            this.expanding = false;
+            this.expanded = false;
+            return;
+        }
+        await stopAnimations(this.body);
+        this.body.hidden = false;
+        const { keyframes, options } = getAnimation(this, "nav.show");
+        await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+        this.body.style.height = "auto";
+        this._onMenuShown();
+        this.emit("sgds-after-show");
+    }
+    /** Hook for subclasses to perform actions after the mobile menu opens (e.g., focus management) */
+    _onMenuShown() {
+        // Default: no-op. Subclasses can override.
+    }
+    async _animateToHide() {
+        const sgdsHide = this.emit("sgds-hide", { cancelable: true });
+        if (sgdsHide.defaultPrevented) {
+            this.expanding = false;
+            this.expanded = true;
+            return;
+        }
+        await stopAnimations(this.body);
+        const { keyframes, options } = getAnimation(this, "nav.hide");
+        await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+        this.body.hidden = true;
+        this.body.style.height = "auto";
+        this.emit("sgds-after-hide");
+    }
+    /** @internal */
+    async handleOpenChange() {
+        var _a;
+        if (this.expanding) {
+            await this._animateToShow();
+            this.expanded = true;
+        }
+        else {
+            (_a = this.header) === null || _a === void 0 ? void 0 : _a.focus();
+            await this._animateToHide();
+            this.expanded = false;
+        }
+    }
+    /** Shows the menu. For when nav is in the collapsed form */
+    async show() {
+        if (this.expanded)
+            return;
+        this.expanding = true;
+        return waitForEvent(this, "sgds-after-show");
+    }
+    /** Hide the menu. For when nav is in the collapsed form */
+    async hide() {
+        if (!this.expanded)
+            return;
+        this.expanding = false;
+        document.body.style.removeProperty("overflow");
+        return waitForEvent(this, "sgds-after-hide");
+    }
+    /** Helper to get the expand CSS class */
+    _expandClass() {
+        switch (this.expand) {
+            case "always":
+                return "navbar-expand";
+            case "never":
+                break;
+            default:
+                return `navbar-expand-${this.expand}`;
+        }
+    }
+    /** Helper: renders the hamburger toggler icon-button. Subclasses should call this in their render(). */
+    _renderToggler(tone) {
+        return html `<sgds-icon-button
+      name=${this.expanded ? "cross" : "menu"}
+      variant="ghost"
+      size="sm"
+      tone=${ifDefined(tone && tone !== "default" ? "fixed-light" : undefined)}
+      class="navbar-toggler"
+      @click=${this._handleSummaryClick}
+      aria-controls="${this.collapseId}"
+      aria-expanded="${this.expanded}"
+      .ariaLabel=${"Toggle navigation"}
+    ></sgds-icon-button>`;
+    }
+}
+/** @internal */
+NavElement.dependencies = {
+    "sgds-icon-button": SgdsIconButton
+};
+__decorate([
+    state()
+], NavElement.prototype, "expanded", void 0);
+__decorate([
+    state()
+], NavElement.prototype, "expanding", void 0);
+__decorate([
+    query("nav")
+], NavElement.prototype, "nav", void 0);
+__decorate([
+    query(".navbar")
+], NavElement.prototype, "navbar", void 0);
+__decorate([
+    query(".navbar-toggler")
+], NavElement.prototype, "header", void 0);
+__decorate([
+    query(".navbar-body")
+], NavElement.prototype, "body", void 0);
+__decorate([
+    query(".navbar-nav-scroll")
+], NavElement.prototype, "navScroll", void 0);
+__decorate([
+    query(".navbar-end")
+], NavElement.prototype, "navbarEnd", void 0);
+__decorate([
+    property({ type: String })
+], NavElement.prototype, "brandHref", void 0);
+__decorate([
+    property({ type: String })
+], NavElement.prototype, "expand", void 0);
+__decorate([
+    state()
+], NavElement.prototype, "breakpointReached", void 0);
+__decorate([
+    state()
+], NavElement.prototype, "_hasProfileComponent", void 0);
+__decorate([
+    watch("expanding", { waitUntilFirstUpdate: true })
+], NavElement.prototype, "handleOpenChange", null);
+setDefaultAnimation("nav.show", {
+    keyframes: [
+        { height: "0", opacity: "0" },
+        { height: "auto", opacity: "1" }
+    ],
+    options: { duration: 200, easing: "ease-in-out" }
+});
+setDefaultAnimation("nav.hide", {
+    keyframes: [
+        { height: "auto", opacity: "1" },
+        { height: "0", opacity: "0" }
+    ],
+    options: { duration: 200, easing: "ease-in-out" }
+});
+
+export { NavElement as default };
+//# sourceMappingURL=nav-element.js.map

package/react/base/nav-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-element.js","sources":["../../../src/base/nav-element.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap, TemplateResult } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"./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 SgdsIconButton from \"../components/IconButton/sgds-icon-button\";\n\nexport type NavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\nexport type NavTone = \"default\" | \"brand\" | \"gradient-1\" | \"gradient-2\" | \"gradient-3\" | \"gradient-4\";\n\nconst SIZES: Record<NavExpandSize, number> = {\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 * Base class for navigation components (sgds-mainnav and sgds-appnav).\n * Provides collapse/expand behavior, breakpoint handling, and animation logic.\n * Subclasses must implement `render()` and provide their own context.\n */\nexport default abstract class NavElement extends SgdsElement {\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton\n  };\n\n  /** Indicates if mobile menu is open or closed */\n  @state()\n  protected expanded = false;\n\n  /** Denotes the transition state of mobile mainnav menu opening */\n  @state()\n  protected expanding = false;\n\n  @query(\"nav\") protected nav!: HTMLElement;\n  @query(\".navbar\") protected navbar!: HTMLElement;\n  @query(\".navbar-toggler\") protected header!: HTMLElement;\n  @query(\".navbar-body\") protected body!: HTMLElement;\n  @query(\".navbar-nav-scroll\") protected navScroll!: HTMLElement;\n  @query(\".navbar-end\") protected navbarEnd!: HTMLElement;\n\n  /** The href link for brand logo */\n  @property({ type: String })\n  brandHref = \"\";\n\n  /** @internal */\n  protected collapseId = genId(\"nav\", \"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: NavExpandSize = \"lg\";\n\n  @state()\n  protected breakpointReached = false;\n\n  /** @internal Whether sgds-*-profile is slotted in the profile slot */\n  @state()\n  protected _hasProfileComponent = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._handleResize();\n    window.addEventListener(\"click\", this._handleClickOutsideBound);\n    window.addEventListener(\"resize\", this._handleResizeBound);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener(\"click\", this._handleClickOutsideBound);\n    window.removeEventListener(\"resize\", this._handleResizeBound);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n      this._handleMobileNav();\n      this._onBreakpointReached(true);\n    }\n  }\n\n  private _handleClickOutsideBound = (event: MouseEvent) => this._handleClickOutOfElement(event, this.body);\n  private _handleResizeBound = () => this._handleResize();\n\n  private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n    if (!e.composedPath().includes(self) && !(this.header && e.composedPath().includes(this.header))) {\n      this.hide();\n    }\n  }\n\n  protected _handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      document.body.style.overflow = \"hidden\";\n      this.show();\n    }\n  }\n\n  protected _handleResize() {\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.expanding = false;\n    }\n\n    if (newBreakpointReachedValue) {\n      this._handleMobileNav();\n      if (!this._isBreakpointReached()) {\n        this._onBreakpointReached(true);\n        window.addEventListener(\"scrollend\", this._handleMobileNavBound);\n      }\n    } else {\n      this._handleDesktopNav();\n      this._onBreakpointReached(false);\n      window.removeEventListener(\"scrollend\", this._handleMobileNavBound);\n    }\n  }\n\n  /** Hook for subclasses to update context providers when breakpoint state changes */\n  protected abstract _onBreakpointReached(reached: boolean): void;\n\n  /** Hook for subclasses to check current breakpoint context state */\n  protected abstract _isBreakpointReached(): boolean;\n\n  private _handleMobileNavBound = this._handleMobileNav.bind(this);\n\n  protected async _handleMobileNav() {\n    if (!this.nav) return;\n    this.nav.appendChild(this.body);\n    await customElements.whenDefined(\"sgds-masthead\");\n\n    const { bottom } = this.nav.getBoundingClientRect();\n    const navBodyPaddingY =\n      parseFloat(getComputedStyle(this.body).paddingTop) + parseFloat(getComputedStyle(this.body).paddingBottom);\n\n    this.navScroll.style.maxHeight = `calc(100dvh - ${bottom}px - ${navBodyPaddingY}px)`;\n  }\n\n  protected _handleDesktopNav() {\n    this.navbar?.insertBefore(this.body, this.navbarEnd);\n  }\n\n  private async _animateToShow() {\n    const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n    if (sgdsShow.defaultPrevented) {\n      this.expanding = false;\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, \"nav.show\");\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.style.height = \"auto\";\n\n    this._onMenuShown();\n    this.emit(\"sgds-after-show\");\n  }\n\n  /** Hook for subclasses to perform actions after the mobile menu opens (e.g., focus management) */\n  protected _onMenuShown(): void {\n    // Default: no-op. Subclasses can override.\n  }\n\n  private async _animateToHide() {\n    const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n    if (sgdsHide.defaultPrevented) {\n      this.expanding = false;\n      this.expanded = true;\n      return;\n    }\n\n    await stopAnimations(this.body);\n\n    const { keyframes, options } = getAnimation(this, \"nav.hide\");\n    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n    this.body.hidden = true;\n    this.body.style.height = \"auto\";\n    this.emit(\"sgds-after-hide\");\n  }\n\n  /** @internal */\n  @watch(\"expanding\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.expanding) {\n      await this._animateToShow();\n      this.expanded = true;\n    } else {\n      this.header?.focus();\n      await this._animateToHide();\n      this.expanded = false;\n    }\n  }\n\n  /** Shows the menu. For when nav is in the collapsed form */\n  public async show() {\n    if (this.expanded) return;\n    this.expanding = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the menu. For when nav is in the collapsed form */\n  public async hide() {\n    if (!this.expanded) return;\n    this.expanding = false;\n    document.body.style.removeProperty(\"overflow\");\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  /** Helper to get the expand CSS class */\n  protected _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\n  /** Helper: renders the hamburger toggler icon-button. Subclasses should call this in their render(). */\n  protected _renderToggler(tone?: NavTone): TemplateResult | typeof nothing {\n    return html`<sgds-icon-button\n      name=${this.expanded ? \"cross\" : \"menu\"}\n      variant=\"ghost\"\n      size=\"sm\"\n      tone=${ifDefined(tone && tone !== \"default\" ? \"fixed-light\" : undefined)}\n      class=\"navbar-toggler\"\n      @click=${this._handleSummaryClick}\n      aria-controls=\"${this.collapseId}\"\n      aria-expanded=\"${this.expanded}\"\n      .ariaLabel=${\"Toggle navigation\"}\n    ></sgds-icon-button>`;\n  }\n}\n\nsetDefaultAnimation(\"nav.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(\"nav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n"],"names":[],"mappings":"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"}

package/react/base/nav-profile-element.cjs.js

@@ -0,0 +1,196 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var lit = require('lit');
+var decorators_js = require('lit/decorators.js');
+var classMap_js = require('lit/directives/class-map.js');
+var ifDefined_js = require('lit/directives/if-defined.js');
+var dom = require('@floating-ui/dom');
+var sgdsElement = require('./sgds-element.cjs.js');
+var sgdsDropdown = require('../components/Dropdown/sgds-dropdown.cjs.js');
+var sgdsIcon = require('../components/Icon/sgds-icon.cjs.js');
+var navProfile = require('./nav-profile.cjs.js');
+var generateId = require('../utils/generateId.cjs.js');
+
+/**
+ * Base class for navigation profile components (sgds-mainnav-profile and sgds-appnav-profile).
+ * Provides the full profile dropdown (desktop) and mobile panel behavior.
+ * When no dropdown items are slotted into the default slot, renders as a non-interactive
+ * read-only element (no dropdown menu, no caret icon, cursor default, not focusable by keyboard or mouse).
+ * Subclasses must consume the appropriate breakpoint context and set `_breakpointReached`.
+ *
+ * @slot avatar - Avatar element displayed in both desktop (before label) and mobile (as toggler)
+ * @slot default - Profile menu items (sgds-dropdown-item elements). When empty, the component becomes read-only.
+ */
+class NavProfileElement extends sgdsElement["default"] {
+    constructor() {
+        super(...arguments);
+        /** @internal Whether the breakpoint is reached (mobile mode). Subclasses set this via context consumption. */
+        this._breakpointReached = true;
+        /** @internal Whether the mobile menu is open */
+        this._mobileMenuOpen = false;
+        /** @internal Whether dropdown items are slotted */
+        this._hasDropdownItems = false;
+        /** Primary text displayed next to the avatar in desktop (e.g. user name) */
+        this.label = "";
+        /** Secondary text displayed below the label in desktop (e.g. agency or role) */
+        this.secondaryText = "";
+        /** When true, disables the profile dropdown */
+        this.disabled = false;
+        /** Accessible label for the profile toggle button */
+        this.ariaLabel = "";
+        /** Controls dropdown close behavior. "default" auto-closes on item/outside click, "outside" closes only on outside click, "inside" prevents auto-close. */
+        this.close = "default";
+        /** @internal */
+        this.togglerId = generateId["default"]("profile", "button");
+        this._handleMobileToggle = () => {
+            this._mobileMenuOpen = !this._mobileMenuOpen;
+        };
+        this._handleClickOutside = (e) => {
+            if (!this._mobileMenuOpen)
+                return;
+            if (this.close === "inside")
+                return;
+            if (!e.composedPath().includes(this)) {
+                this._mobileMenuOpen = false;
+            }
+        };
+        this._handleSlotChange = () => {
+            this._hasDropdownItems = this._defaultSlotElements.length > 0;
+        };
+        this._handleKeydown = (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                this._handleMobileToggle();
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("click", this._handleClickOutside);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("click", this._handleClickOutside);
+    }
+    render() {
+        if (!this._breakpointReached) {
+            // Desktop: read-only (no dropdown items)
+            if (!this._hasDropdownItems) {
+                return lit.html `
+          <div
+            class="${classMap_js.classMap({
+                    "nav-link": true,
+                    "read-only": true
+                })}"
+            aria-label=${ifDefined_js.ifDefined(this.ariaLabel)}
+          >
+            <slot name="avatar"></slot>
+            ${this.label || this.secondaryText
+                    ? lit.html `<div class="profile-text">
+                  ${this.label ? lit.html `<span class="profile-label">${this.label}</span>` : lit.nothing}
+                  ${this.secondaryText
+                        ? lit.html `<span class="profile-secondary-text">${this.secondaryText}</span>`
+                        : lit.nothing}
+                </div>`
+                    : lit.nothing}
+          </div>
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        `;
+            }
+            // Desktop: dropdown with avatar + label + secondaryText
+            return lit.html `
+        <sgds-dropdown .floatingOpts=${{ middleware: [dom.offset(0)] }} ?disabled=${this.disabled} close=${this.close}>
+          <button
+            class="${classMap_js.classMap({
+                "nav-link": true,
+                disabled: this.disabled
+            })}"
+            aria-disabled=${this.disabled ? "true" : "false"}
+            aria-label=${ifDefined_js.ifDefined(this.ariaLabel)}
+            id=${this.togglerId}
+            tabindex=${this.disabled ? "-1" : "0"}
+            slot="toggler"
+          >
+            <slot name="avatar"></slot>
+            ${this.label || this.secondaryText
+                ? lit.html `<div class="profile-text">
+                  ${this.label ? lit.html `<span class="profile-label">${this.label}</span>` : lit.nothing}
+                  ${this.secondaryText
+                    ? lit.html `<span class="profile-secondary-text">${this.secondaryText}</span>`
+                    : lit.nothing}
+                </div>`
+                : lit.nothing}
+            <sgds-icon name="chevron-down" size="md"></sgds-icon>
+          </button>
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </sgds-dropdown>
+      `;
+        }
+        // Mobile: read-only (no dropdown items)
+        if (!this._hasDropdownItems) {
+            return lit.html `
+        <div class="profile-avatar-mobile read-only">
+          <slot name="avatar"></slot>
+        </div>
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      `;
+        }
+        // Mobile: avatar toggler + self-contained mobile panel
+        return lit.html `
+      <button
+        class="profile-avatar-mobile"
+        aria-label=${this.ariaLabel || "Toggle navigation"}
+        aria-expanded=${this._mobileMenuOpen ? "true" : "false"}
+        @click=${this._handleMobileToggle}
+        @keydown=${this._handleKeydown}
+      >
+        <slot name="avatar"></slot>
+      </button>
+      <div class="profile-mobile-panel" ?hidden=${!this._mobileMenuOpen}>
+        <div class="profile-mobile-items">
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+NavProfileElement.styles = [...sgdsElement["default"].styles, navProfile["default"]];
+/** @internal */
+NavProfileElement.dependencies = {
+    "sgds-dropdown": sgdsDropdown.SgdsDropdown,
+    "sgds-icon": sgdsIcon.SgdsIcon
+};
+tslib.__decorate([
+    decorators_js.state()
+], NavProfileElement.prototype, "_breakpointReached", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], NavProfileElement.prototype, "_mobileMenuOpen", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], NavProfileElement.prototype, "_hasDropdownItems", void 0);
+tslib.__decorate([
+    decorators_js.queryAssignedElements({ flatten: true })
+], NavProfileElement.prototype, "_defaultSlotElements", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String, reflect: true })
+], NavProfileElement.prototype, "label", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String, reflect: true })
+], NavProfileElement.prototype, "secondaryText", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: Boolean })
+], NavProfileElement.prototype, "disabled", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String })
+], NavProfileElement.prototype, "ariaLabel", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String })
+], NavProfileElement.prototype, "close", void 0);
+
+exports["default"] = NavProfileElement;
+//# sourceMappingURL=nav-profile-element.cjs.js.map

package/react/base/nav-profile-element.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-profile-element.cjs.js","sources":["../../../src/base/nav-profile-element.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { offset } from \"@floating-ui/dom\";\nimport SgdsElement from \"./sgds-element\";\nimport SgdsDropdown from \"../components/Dropdown/sgds-dropdown\";\nimport SgdsIcon from \"../components/Icon/sgds-icon\";\nimport navProfileStyle from \"./nav-profile.css\";\nimport genId from \"../utils/generateId\";\n\n/**\n * Base class for navigation profile components (sgds-mainnav-profile and sgds-appnav-profile).\n * Provides the full profile dropdown (desktop) and mobile panel behavior.\n * When no dropdown items are slotted into the default slot, renders as a non-interactive\n * read-only element (no dropdown menu, no caret icon, cursor default, not focusable by keyboard or mouse).\n * Subclasses must consume the appropriate breakpoint context and set `_breakpointReached`.\n *\n * @slot avatar - Avatar element displayed in both desktop (before label) and mobile (as toggler)\n * @slot default - Profile menu items (sgds-dropdown-item elements). When empty, the component becomes read-only.\n */\nexport default abstract class NavProfileElement extends SgdsElement {\n  static styles = [...SgdsElement.styles, navProfileStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-dropdown\": SgdsDropdown,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** @internal Whether the breakpoint is reached (mobile mode). Subclasses set this via context consumption. */\n  @state()\n  protected _breakpointReached = true;\n\n  /** @internal Whether the mobile menu is open */\n  @state()\n  private _mobileMenuOpen = false;\n\n  /** @internal Whether dropdown items are slotted */\n  @state()\n  private _hasDropdownItems = false;\n\n  @queryAssignedElements({ flatten: true })\n  private _defaultSlotElements!: HTMLElement[];\n\n  /** Primary text displayed next to the avatar in desktop (e.g. user name) */\n  @property({ type: String, reflect: true })\n  label = \"\";\n\n  /** Secondary text displayed below the label in desktop (e.g. agency or role) */\n  @property({ type: String, reflect: true })\n  secondaryText = \"\";\n\n  /** When true, disables the profile dropdown */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Accessible label for the profile toggle button */\n  @property({ type: String })\n  ariaLabel = \"\";\n\n  /** Controls dropdown close behavior. \"default\" auto-closes on item/outside click, \"outside\" closes only on outside click, \"inside\" prevents auto-close. */\n  @property({ type: String })\n  close: \"default\" | \"outside\" | \"inside\" = \"default\";\n\n  /** @internal */\n  private togglerId: string = genId(\"profile\", \"button\");\n\n  private _handleMobileToggle = () => {\n    this._mobileMenuOpen = !this._mobileMenuOpen;\n  };\n\n  private _handleClickOutside = (e: MouseEvent) => {\n    if (!this._mobileMenuOpen) return;\n    if (this.close === \"inside\") return;\n    if (!e.composedPath().includes(this)) {\n      this._mobileMenuOpen = false;\n    }\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener(\"click\", this._handleClickOutside);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener(\"click\", this._handleClickOutside);\n  }\n\n  private _handleSlotChange = () => {\n    this._hasDropdownItems = this._defaultSlotElements.length > 0;\n  };\n\n  private _handleKeydown = (e: KeyboardEvent) => {\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      this._handleMobileToggle();\n    }\n  };\n\n  render() {\n    if (!this._breakpointReached) {\n      // Desktop: read-only (no dropdown items)\n      if (!this._hasDropdownItems) {\n        return html`\n          <div\n            class=\"${classMap({\n              \"nav-link\": true,\n              \"read-only\": true\n            })}\"\n            aria-label=${ifDefined(this.ariaLabel)}\n          >\n            <slot name=\"avatar\"></slot>\n            ${this.label || this.secondaryText\n              ? html`<div class=\"profile-text\">\n                  ${this.label ? html`<span class=\"profile-label\">${this.label}</span>` : nothing}\n                  ${this.secondaryText\n                    ? html`<span class=\"profile-secondary-text\">${this.secondaryText}</span>`\n                    : nothing}\n                </div>`\n              : nothing}\n          </div>\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        `;\n      }\n\n      // Desktop: dropdown with avatar + label + secondaryText\n      return html`\n        <sgds-dropdown .floatingOpts=${{ middleware: [offset(0)] }} ?disabled=${this.disabled} close=${this.close}>\n          <button\n            class=\"${classMap({\n              \"nav-link\": true,\n              disabled: this.disabled\n            })}\"\n            aria-disabled=${this.disabled ? \"true\" : \"false\"}\n            aria-label=${ifDefined(this.ariaLabel)}\n            id=${this.togglerId}\n            tabindex=${this.disabled ? \"-1\" : \"0\"}\n            slot=\"toggler\"\n          >\n            <slot name=\"avatar\"></slot>\n            ${this.label || this.secondaryText\n              ? html`<div class=\"profile-text\">\n                  ${this.label ? html`<span class=\"profile-label\">${this.label}</span>` : nothing}\n                  ${this.secondaryText\n                    ? html`<span class=\"profile-secondary-text\">${this.secondaryText}</span>`\n                    : nothing}\n                </div>`\n              : nothing}\n            <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n          </button>\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </sgds-dropdown>\n      `;\n    }\n\n    // Mobile: read-only (no dropdown items)\n    if (!this._hasDropdownItems) {\n      return html`\n        <div class=\"profile-avatar-mobile read-only\">\n          <slot name=\"avatar\"></slot>\n        </div>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      `;\n    }\n\n    // Mobile: avatar toggler + self-contained mobile panel\n    return html`\n      <button\n        class=\"profile-avatar-mobile\"\n        aria-label=${this.ariaLabel || \"Toggle navigation\"}\n        aria-expanded=${this._mobileMenuOpen ? \"true\" : \"false\"}\n        @click=${this._handleMobileToggle}\n        @keydown=${this._handleKeydown}\n      >\n        <slot name=\"avatar\"></slot>\n      </button>\n      <div class=\"profile-mobile-panel\" ?hidden=${!this._mobileMenuOpen}>\n        <div class=\"profile-mobile-items\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["SgdsElement","genId","html","classMap","ifDefined","nothing","offset","navProfileStyle","SgdsDropdown","SgdsIcon","__decorate","state","queryAssignedElements","property"],"mappings":"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"}