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

package/base/dropdown-list-element.js

@@ -6,6 +6,7 @@ const TAB = "Tab";
 const ARROW_DOWN = "ArrowDown";
 const ARROW_UP = "ArrowUp";
 const ENTER = "Enter";
+const ESCAPE = "Escape";
 /**
  * @event sgds-select - Emitted when a dropdown item is selected. `event.detail.item` is the clicked `SgdsDropdownItem` element.
  */
@@ -83,6 +84,12 @@ class DropdownListElement extends DropdownElement {
                     this._setMenuItem(this.nextDropdownItemNo);
                 }
                 break;
+            case ESCAPE:
+                if (this.menuIsOpen) {
+                    e.preventDefault();
+                    this.hideMenu();
+                }
+                break;
             case ENTER: {
                 const target = menuItems.find(item => e.composedPath().includes(item));
                 if (target) {
@@ -99,7 +106,7 @@ class DropdownListElement extends DropdownElement {
         if (defaultSlot) {
             const defaultSlotItems = (_a = this.shadowRoot.querySelector("slot#default")) === null || _a === void 0 ? void 0 : _a.assignedElements({
                 flatten: true
-            }).filter(el => !el.classList.contains("empty-menu") && !el.hasAttribute("hidden"));
+            }).filter(el => el.getAttribute("role") === "menuitem" && !el.classList.contains("empty-menu") && !el.hasAttribute("hidden"));
             return defaultSlotItems;
         }
         // for case when there is no slot e.g. combobox
@@ -110,7 +117,7 @@ class DropdownListElement extends DropdownElement {
         return [];
     }
     _getActiveMenuItems() {
-        return this._getMenuItems().filter(item => !item.disabled && !item.hidden);
+        return this._getMenuItems().filter(item => !item.disabled && !item.hidden && !item.readonly);
     }
     _setMenuItem(currentItemIdx) {
         const items = this._getActiveMenuItems();

package/base/dropdown-list-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-list-element.js","sources":["../../src/base/dropdown-list-element.ts"],"sourcesContent":["import { property, query, state } from \"lit/decorators.js\";\nimport { DropdownElement } from \"./dropdown-element\";\nimport { SgdsDropdownItem } from \"../components\";\nimport { PropertyValueMap } from \"lit\";\n\nconst TAB = \"Tab\";\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ENTER = \"Enter\";\n\n/**\n * @event sgds-select - Emitted when a dropdown item is selected. `event.detail.item` is the clicked `SgdsDropdownItem` element.\n */\nexport class DropdownListElement extends DropdownElement {\n  static styles = DropdownElement.styles;\n\n  /**@internal */\n  @query(\"ul.dropdown-menu\")\n  private menu: HTMLUListElement;\n\n  /** @internal */\n  @state()\n  nextDropdownItemNo = 0;\n\n  /** @internal */\n  @state()\n  prevDropdownItemNo = -1;\n\n  @property({ type: Boolean, reflect: true })\n  hidden = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._resetMenu);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"sgds-hide\", this._resetMenu);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent);\n  }\n\n  protected handleSelectSlot(e: KeyboardEvent | MouseEvent) {\n    const items = this._getActiveMenuItems();\n\n    const selectedItem = items.find(item => e.composedPath().includes(item));\n    if (!selectedItem) return;\n\n    const currentItemNo = items.indexOf(selectedItem);\n    this.nextDropdownItemNo = currentItemNo + 1;\n    this.prevDropdownItemNo = currentItemNo <= 0 ? items.length - 1 : currentItemNo - 1;\n\n    /** Emitted event from SgdsDropdown element when a slot item is selected */\n    if (!selectedItem.disabled) {\n      this.emit(\"sgds-select\", { detail: { item: selectedItem } });\n      if (this.close !== \"outside\") {\n        this.hideMenu(); // <-- Use new API\n      }\n    }\n  }\n\n  private _resetMenu() {\n    this.nextDropdownItemNo = 0;\n    this.prevDropdownItemNo = -1;\n    // reset the tabindex\n    const items = this._getMenuItems();\n    items.forEach(item => {\n      const dropdownItem = item?.shadowRoot?.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n      dropdownItem && dropdownItem.removeAttribute(\"tabindex\");\n    });\n  }\n  protected _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n    if (this.readonly) return;\n    const menuItems = this._getActiveMenuItems();\n    if (menuItems.length === 0) return;\n\n    switch (e.key) {\n      case ARROW_DOWN:\n        e.preventDefault();\n        this._setMenuItem(this.nextDropdownItemNo);\n        break;\n      case ARROW_UP:\n        e.preventDefault();\n        this._setMenuItem(this.prevDropdownItemNo);\n        break;\n      case TAB:\n        if (!this.menuIsOpen) return;\n        e.preventDefault();\n        if (e.shiftKey) {\n          this._setMenuItem(this.prevDropdownItemNo);\n        } else {\n          this._setMenuItem(this.nextDropdownItemNo);\n        }\n        break;\n      case ENTER: {\n        const target = menuItems.find(item => e.composedPath().includes(item));\n        if (target) {\n          this.handleSelectSlot(e);\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  private _getMenuItems(): SgdsDropdownItem[] {\n    const defaultSlot = this.shadowRoot.querySelector(\"slot#default\");\n    // for case when default slot is used e.g. dropdown, mainnavdropdown\n    if (defaultSlot) {\n      const defaultSlotItems = (this.shadowRoot.querySelector(\"slot#default\") as HTMLSlotElement)\n        ?.assignedElements({\n          flatten: true\n        })\n        .filter(el => !el.classList.contains(\"empty-menu\") && !el.hasAttribute(\"hidden\")) as SgdsDropdownItem[];\n      return defaultSlotItems;\n    }\n    // for case when there is no slot e.g. combobox\n    if (this.menu?.hasChildNodes()) {\n      const menuItems = Array.from(this.menu.children);\n      return [...menuItems] as SgdsDropdownItem[];\n    }\n\n    return [];\n  }\n\n  private _getActiveMenuItems(): SgdsDropdownItem[] {\n    return this._getMenuItems().filter(item => !item.disabled && !item.hidden);\n  }\n  private _setMenuItem(currentItemIdx: number) {\n    const items = this._getActiveMenuItems();\n    if (items.length === 0) return;\n\n    // Use modulo for looping\n    const idx = ((currentItemIdx % items.length) + items.length) % items.length;\n    const activeItem = items[idx];\n    this.emit(\"i-sgds-option-focus\", { detail: { option: activeItem } });\n    this.nextDropdownItemNo = (idx + 1) % items.length;\n    this.prevDropdownItemNo = (idx - 1 + items.length) % items.length;\n\n    items.forEach(item => {\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n      dropdownItem.setAttribute(\"tabindex\", item === activeItem ? \"0\" : \"-1\");\n      if (item === activeItem) dropdownItem.focus();\n    });\n  }\n}\n\nexport interface IDropdownListElement {\n  item: SgdsDropdownItem;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"dropdown-list-element.js","sources":["../../src/base/dropdown-list-element.ts"],"sourcesContent":["import { property, query, state } from \"lit/decorators.js\";\nimport { DropdownElement } from \"./dropdown-element\";\nimport { SgdsDropdownItem } from \"../components\";\nimport { PropertyValueMap } from \"lit\";\n\nconst TAB = \"Tab\";\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ENTER = \"Enter\";\nconst ESCAPE = \"Escape\";\n\n/**\n * @event sgds-select - Emitted when a dropdown item is selected. `event.detail.item` is the clicked `SgdsDropdownItem` element.\n */\nexport class DropdownListElement extends DropdownElement {\n  static styles = DropdownElement.styles;\n\n  /**@internal */\n  @query(\"ul.dropdown-menu\")\n  private menu: HTMLUListElement;\n\n  /** @internal */\n  @state()\n  nextDropdownItemNo = 0;\n\n  /** @internal */\n  @state()\n  prevDropdownItemNo = -1;\n\n  @property({ type: Boolean, reflect: true })\n  hidden = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._resetMenu);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"sgds-hide\", this._resetMenu);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent);\n  }\n\n  protected handleSelectSlot(e: KeyboardEvent | MouseEvent) {\n    const items = this._getActiveMenuItems();\n\n    const selectedItem = items.find(item => e.composedPath().includes(item));\n    if (!selectedItem) return;\n\n    const currentItemNo = items.indexOf(selectedItem);\n    this.nextDropdownItemNo = currentItemNo + 1;\n    this.prevDropdownItemNo = currentItemNo <= 0 ? items.length - 1 : currentItemNo - 1;\n\n    /** Emitted event from SgdsDropdown element when a slot item is selected */\n    if (!selectedItem.disabled) {\n      this.emit(\"sgds-select\", { detail: { item: selectedItem } });\n      if (this.close !== \"outside\") {\n        this.hideMenu(); // <-- Use new API\n      }\n    }\n  }\n\n  private _resetMenu() {\n    this.nextDropdownItemNo = 0;\n    this.prevDropdownItemNo = -1;\n    // reset the tabindex\n    const items = this._getMenuItems();\n    items.forEach(item => {\n      const dropdownItem = item?.shadowRoot?.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n      dropdownItem && dropdownItem.removeAttribute(\"tabindex\");\n    });\n  }\n  protected _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n    if (this.readonly) return;\n    const menuItems = this._getActiveMenuItems();\n    if (menuItems.length === 0) return;\n\n    switch (e.key) {\n      case ARROW_DOWN:\n        e.preventDefault();\n        this._setMenuItem(this.nextDropdownItemNo);\n        break;\n      case ARROW_UP:\n        e.preventDefault();\n        this._setMenuItem(this.prevDropdownItemNo);\n        break;\n      case TAB:\n        if (!this.menuIsOpen) return;\n        e.preventDefault();\n        if (e.shiftKey) {\n          this._setMenuItem(this.prevDropdownItemNo);\n        } else {\n          this._setMenuItem(this.nextDropdownItemNo);\n        }\n        break;\n      case ESCAPE:\n        if (this.menuIsOpen) {\n          e.preventDefault();\n          this.hideMenu();\n        }\n        break;\n      case ENTER: {\n        const target = menuItems.find(item => e.composedPath().includes(item));\n        if (target) {\n          this.handleSelectSlot(e);\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  private _getMenuItems(): SgdsDropdownItem[] {\n    const defaultSlot = this.shadowRoot.querySelector(\"slot#default\");\n    // for case when default slot is used e.g. dropdown, mainnavdropdown\n    if (defaultSlot) {\n      const defaultSlotItems = (this.shadowRoot.querySelector(\"slot#default\") as HTMLSlotElement)\n        ?.assignedElements({\n          flatten: true\n        })\n        .filter(\n          el =>\n            el.getAttribute(\"role\") === \"menuitem\" && !el.classList.contains(\"empty-menu\") && !el.hasAttribute(\"hidden\")\n        ) as SgdsDropdownItem[];\n      return defaultSlotItems;\n    }\n    // for case when there is no slot e.g. combobox\n    if (this.menu?.hasChildNodes()) {\n      const menuItems = Array.from(this.menu.children);\n      return [...menuItems] as SgdsDropdownItem[];\n    }\n\n    return [];\n  }\n\n  private _getActiveMenuItems(): SgdsDropdownItem[] {\n    return this._getMenuItems().filter(item => !item.disabled && !item.hidden && !item.readonly);\n  }\n  private _setMenuItem(currentItemIdx: number) {\n    const items = this._getActiveMenuItems();\n    if (items.length === 0) return;\n\n    // Use modulo for looping\n    const idx = ((currentItemIdx % items.length) + items.length) % items.length;\n    const activeItem = items[idx];\n    this.emit(\"i-sgds-option-focus\", { detail: { option: activeItem } });\n    this.nextDropdownItemNo = (idx + 1) % items.length;\n    this.prevDropdownItemNo = (idx - 1 + items.length) % items.length;\n\n    items.forEach(item => {\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n      dropdownItem.setAttribute(\"tabindex\", item === activeItem ? \"0\" : \"-1\");\n      if (item === activeItem) dropdownItem.focus();\n    });\n  }\n}\n\nexport interface IDropdownListElement {\n  item: SgdsDropdownItem;\n}\n"],"names":[],"mappings":";;;;AAKA,MAAM,GAAG,GAAG,KAAK,CAAC;AAClB,MAAM,UAAU,GAAG,WAAW,CAAC;AAC/B,MAAM,QAAQ,GAAG,SAAS,CAAC;AAC3B,MAAM,KAAK,GAAG,OAAO,CAAC;AACtB,MAAM,MAAM,GAAG,QAAQ,CAAC;AAExB;;AAEG;AACG,MAAO,mBAAoB,SAAQ,eAAe,CAAA;AAAxD,IAAA,WAAA,GAAA;;;QASE,IAAkB,CAAA,kBAAA,GAAG,CAAC,CAAC;;QAIvB,IAAkB,CAAA,kBAAA,GAAG,CAAC,CAAC,CAAC;QAGxB,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAkIhB;IAhIC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;KACrD;IAED,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;KACxD;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACtC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,6BAA6B,CAAC,CAAC;KACtE;AAES,IAAA,gBAAgB,CAAC,CAA6B,EAAA;AACtD,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAEzC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;AACzE,QAAA,IAAI,CAAC,YAAY;YAAE,OAAO;QAE1B,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;AAClD,QAAA,IAAI,CAAC,kBAAkB,GAAG,aAAa,GAAG,CAAC,CAAC;QAC5C,IAAI,CAAC,kBAAkB,GAAG,aAAa,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,aAAa,GAAG,CAAC,CAAC;;AAGpF,QAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE;AAC1B,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,CAAC,CAAC;AAC7D,YAAA,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;AAC5B,gBAAA,IAAI,CAAC,QAAQ,EAAE,CAAC;aACjB;SACF;KACF;IAEO,UAAU,GAAA;AAChB,QAAA,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC;AAC5B,QAAA,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC,CAAC;;AAE7B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;AACnC,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;AACnB,YAAA,MAAM,YAAY,GAAG,CAAA,EAAA,GAAA,IAAI,aAAJ,IAAI,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAJ,IAAI,CAAE,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAa,CAAC,gBAAgB,CAAsB,CAAC;AAC5F,YAAA,YAAY,IAAI,YAAY,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;AAC3D,SAAC,CAAC,CAAC;KACJ;AACS,IAAA,6BAA6B,CAAC,CAAgB,EAAA;QACtD,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;AAC1B,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;AAC7C,QAAA,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;AAEnC,QAAA,QAAQ,CAAC,CAAC,GAAG;AACX,YAAA,KAAK,UAAU;gBACb,CAAC,CAAC,cAAc,EAAE,CAAC;AACnB,gBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;gBAC3C,MAAM;AACR,YAAA,KAAK,QAAQ;gBACX,CAAC,CAAC,cAAc,EAAE,CAAC;AACnB,gBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;gBAC3C,MAAM;AACR,YAAA,KAAK,GAAG;gBACN,IAAI,CAAC,IAAI,CAAC,UAAU;oBAAE,OAAO;gBAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;AACnB,gBAAA,IAAI,CAAC,CAAC,QAAQ,EAAE;AACd,oBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;iBAC5C;qBAAM;AACL,oBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;iBAC5C;gBACD,MAAM;AACR,YAAA,KAAK,MAAM;AACT,gBAAA,IAAI,IAAI,CAAC,UAAU,EAAE;oBACnB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,QAAQ,EAAE,CAAC;iBACjB;gBACD,MAAM;YACR,KAAK,KAAK,EAAE;gBACV,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;gBACvE,IAAI,MAAM,EAAE;AACV,oBAAA,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;iBAC1B;gBACD,MAAM;aACP;SAGF;KACF;IAEO,aAAa,GAAA;;QACnB,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;;QAElE,IAAI,WAAW,EAAE;AACf,YAAA,MAAM,gBAAgB,GAAG,CAAC,EAAA,GAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAqB,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CACvF,gBAAgB,CAAC;AACjB,gBAAA,OAAO,EAAE,IAAI;AACd,aAAA,CAAA,CACA,MAAM,CACL,EAAE,IACA,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,UAAU,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CACzF,CAAC;AAC1B,YAAA,OAAO,gBAAgB,CAAC;SACzB;;QAED,IAAI,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,0CAAE,aAAa,EAAE,EAAE;AAC9B,YAAA,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AACjD,YAAA,OAAO,CAAC,GAAG,SAAS,CAAuB,CAAC;SAC7C;AAED,QAAA,OAAO,EAAE,CAAC;KACX;IAEO,mBAAmB,GAAA;QACzB,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC9F;AACO,IAAA,YAAY,CAAC,cAAsB,EAAA;AACzC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;AACzC,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;;AAG/B,QAAA,MAAM,GAAG,GAAG,CAAC,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC;AAC5E,QAAA,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC;AACrE,QAAA,IAAI,CAAC,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC;AACnD,QAAA,IAAI,CAAC,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC;AAElE,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;YACnB,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAsB,CAAC;AAC1F,YAAA,YAAY,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,KAAK,UAAU,GAAG,GAAG,GAAG,IAAI,CAAC,CAAC;YACxE,IAAI,IAAI,KAAK,UAAU;gBAAE,YAAY,CAAC,KAAK,EAAE,CAAC;AAChD,SAAC,CAAC,CAAC;KACJ;;AAhJM,mBAAA,CAAA,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC;AAI/B,UAAA,CAAA;IADP,KAAK,CAAC,kBAAkB,CAAC;AACK,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI/B,UAAA,CAAA;AADC,IAAA,KAAK,EAAE;AACe,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIvB,UAAA,CAAA;AADC,IAAA,KAAK,EAAE;AACgB,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGxB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/base/nav-element.d.ts

@@ -0,0 +1,64 @@
+import { nothing, PropertyValueMap, TemplateResult } from "lit";
+import SgdsElement from "./sgds-element";
+import SgdsIconButton from "../components/IconButton/sgds-icon-button";
+export type NavExpandSize = "sm" | "md" | "lg" | "xl" | "xxl" | "always" | "never";
+export type NavTone = "default" | "brand" | "gradient-1" | "gradient-2" | "gradient-3" | "gradient-4";
+/**
+ * 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.
+ */
+export default abstract class NavElement extends SgdsElement {
+    /** @internal */
+    static dependencies: {
+        "sgds-icon-button": typeof SgdsIconButton;
+    };
+    /** Indicates if mobile menu is open or closed */
+    protected expanded: boolean;
+    /** Denotes the transition state of mobile mainnav menu opening */
+    protected expanding: boolean;
+    protected nav: HTMLElement;
+    protected navbar: HTMLElement;
+    protected header: HTMLElement;
+    protected body: HTMLElement;
+    protected navScroll: HTMLElement;
+    protected navbarEnd: HTMLElement;
+    /** The href link for brand logo */
+    brandHref: string;
+    /** @internal */
+    protected collapseId: string;
+    /** 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 */
+    expand: NavExpandSize;
+    protected breakpointReached: boolean;
+    /** @internal Whether sgds-*-profile is slotted in the profile slot */
+    protected _hasProfileComponent: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(changedProperties: PropertyValueMap<this>): void;
+    private _handleClickOutsideBound;
+    private _handleResizeBound;
+    private _handleClickOutOfElement;
+    protected _handleSummaryClick(): void;
+    protected _handleResize(): void;
+    /** Hook for subclasses to update context providers when breakpoint state changes */
+    protected abstract _onBreakpointReached(reached: boolean): void;
+    /** Hook for subclasses to check current breakpoint context state */
+    protected abstract _isBreakpointReached(): boolean;
+    private _handleMobileNavBound;
+    protected _handleMobileNav(): Promise<void>;
+    protected _handleDesktopNav(): void;
+    private _animateToShow;
+    /** Hook for subclasses to perform actions after the mobile menu opens (e.g., focus management) */
+    protected _onMenuShown(): void;
+    private _animateToHide;
+    /** @internal */
+    handleOpenChange(): Promise<void>;
+    /** Shows the menu. For when nav is in the collapsed form */
+    show(): Promise<void>;
+    /** Hide the menu. For when nav is in the collapsed form */
+    hide(): Promise<void>;
+    /** Helper to get the expand CSS class */
+    protected _expandClass(): string;
+    /** Helper: renders the hamburger toggler icon-button. Subclasses should call this in their render(). */
+    protected _renderToggler(tone?: NavTone): TemplateResult | typeof nothing;
+}

package/base/nav-element.js

@@ -0,0 +1,263 @@
+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/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/base/nav-profile-element.d.ts

@@ -0,0 +1,47 @@
+import SgdsElement from "./sgds-element";
+import SgdsDropdown from "../components/Dropdown/sgds-dropdown";
+import SgdsIcon from "../components/Icon/sgds-icon";
+/**
+ * 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.
+ */
+export default abstract class NavProfileElement extends SgdsElement {
+    static styles: import("lit").CSSResult[];
+    /** @internal */
+    static dependencies: {
+        "sgds-dropdown": typeof SgdsDropdown;
+        "sgds-icon": typeof SgdsIcon;
+    };
+    /** @internal Whether the breakpoint is reached (mobile mode). Subclasses set this via context consumption. */
+    protected _breakpointReached: boolean;
+    /** @internal Whether the mobile menu is open */
+    private _mobileMenuOpen;
+    /** @internal Whether dropdown items are slotted */
+    private _hasDropdownItems;
+    private _defaultSlotElements;
+    /** Primary text displayed next to the avatar in desktop (e.g. user name) */
+    label: string;
+    /** Secondary text displayed below the label in desktop (e.g. agency or role) */
+    secondaryText: string;
+    /** When true, disables the profile dropdown */
+    disabled: boolean;
+    /** Accessible label for the profile toggle button */
+    ariaLabel: string;
+    /** Controls dropdown close behavior. "default" auto-closes on item/outside click, "outside" closes only on outside click, "inside" prevents auto-close. */
+    close: "default" | "outside" | "inside";
+    /** @internal */
+    private togglerId;
+    private _handleMobileToggle;
+    private _handleClickOutside;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleSlotChange;
+    private _handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}