@govtechsg/sgds-web-component 3.29.0 → 3.29.1-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.29.0",
+  "version": "3.29.1-rc.0",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-list-element.cjs.js","names":["DropdownElement","query","state","property"],"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"],"mappings":"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"}
+{"version":3,"file":"dropdown-list-element.cjs.js","names":["DropdownElement","query","state","property"],"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  protected _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  protected _getActiveMenuItems(): SgdsDropdownItem[] {\n    return this._getMenuItems().filter(item => !item.disabled && !item.hidden && !item.readonly);\n  }\n  protected _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"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-list-element.js","names":[],"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"],"mappings":"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"}
+{"version":3,"file":"dropdown-list-element.js","names":[],"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  protected _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  protected _getActiveMenuItems(): SgdsDropdownItem[] {\n    return this._getMenuItems().filter(item => !item.disabled && !item.hidden && !item.readonly);\n  }\n  protected _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"],"mappings":"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"}

package/react/combo-box/index.cjs.js

@@ -20,6 +20,7 @@ var combo_box_default = (0, _lit_react.createComponent)({
 		onSgdsInvalid: "sgds-invalid",
 		onSgdsValid: "sgds-valid",
 		onSgdsScrollEnd: "sgds-scroll-end",
+		onSgdsCreateOption: "sgds-create-option",
 		onSgdsShow: "sgds-show",
 		onSgdsAfterShow: "sgds-after-show",
 		onSgdsHide: "sgds-hide",

package/react/combo-box/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","names":["register","Component","createComponent","React"],"sources":["../../../src/react/combo-box/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/ComboBox/sgds-combo-box\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-combo-box\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-combo-box\",\n  elementClass: Component,\n  events: {\n    onSgdsSelect: \"sgds-select\",\n    onSgdsChange: \"sgds-change\",\n    onSgdsInput: \"sgds-input\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsBlur: \"sgds-blur\",\n    onSgdsInvalid: \"sgds-invalid\",\n    onSgdsValid: \"sgds-valid\",\n    onSgdsScrollEnd: \"sgds-scroll-end\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"mappings":";;;;;;;;AAKAA,oBAAAA,SAAS,kBAAkBC,uBAAAA,YAAS;AAEpC,IAAA,qBAAA,GAAeC,WAAAA,gBAAAA,CAAgB;CACtBC;CACP,SAAS;CACT,cAAcF,uBAAAA;CACd,QAAQ;EACN,cAAc;EACd,cAAc;EACd,aAAa;EACb,aAAa;EACb,YAAY;EACZ,eAAe;EACf,aAAa;EACb,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;CACnB;AACF,CAAC"}
+{"version":3,"file":"index.cjs.js","names":["register","Component","createComponent","React"],"sources":["../../../src/react/combo-box/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/ComboBox/sgds-combo-box\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-combo-box\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-combo-box\",\n  elementClass: Component,\n  events: {\n    onSgdsSelect: \"sgds-select\",\n    onSgdsChange: \"sgds-change\",\n    onSgdsInput: \"sgds-input\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsBlur: \"sgds-blur\",\n    onSgdsInvalid: \"sgds-invalid\",\n    onSgdsValid: \"sgds-valid\",\n    onSgdsScrollEnd: \"sgds-scroll-end\",\n    onSgdsCreateOption: \"sgds-create-option\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"mappings":";;;;;;;;AAKAA,oBAAAA,SAAS,kBAAkBC,uBAAAA,YAAS;AAEpC,IAAA,qBAAA,GAAeC,WAAAA,gBAAAA,CAAgB;CACtBC;CACP,SAAS;CACT,cAAcF,uBAAAA;CACd,QAAQ;EACN,cAAc;EACd,cAAc;EACd,aAAa;EACb,aAAa;EACb,YAAY;EACZ,eAAe;EACf,aAAa;EACb,iBAAiB;EACjB,oBAAoB;EACpB,YAAY;EACZ,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;CACnB;AACF,CAAC"}

package/react/combo-box/index.js

@@ -18,6 +18,7 @@ var combo_box_default = createComponent({
 		onSgdsInvalid: "sgds-invalid",
 		onSgdsValid: "sgds-valid",
 		onSgdsScrollEnd: "sgds-scroll-end",
+		onSgdsCreateOption: "sgds-create-option",
 		onSgdsShow: "sgds-show",
 		onSgdsAfterShow: "sgds-after-show",
 		onSgdsHide: "sgds-hide",

package/react/combo-box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Component"],"sources":["../../../src/react/combo-box/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/ComboBox/sgds-combo-box\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-combo-box\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-combo-box\",\n  elementClass: Component,\n  events: {\n    onSgdsSelect: \"sgds-select\",\n    onSgdsChange: \"sgds-change\",\n    onSgdsInput: \"sgds-input\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsBlur: \"sgds-blur\",\n    onSgdsInvalid: \"sgds-invalid\",\n    onSgdsValid: \"sgds-valid\",\n    onSgdsScrollEnd: \"sgds-scroll-end\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"mappings":";;;;;;AAKA,SAAS,kBAAkBA,YAAS;AAEpC,IAAA,oBAAe,gBAAgB;CAC7B,OAAO;CACP,SAAS;CACT,cAAcA;CACd,QAAQ;EACN,cAAc;EACd,cAAc;EACd,aAAa;EACb,aAAa;EACb,YAAY;EACZ,eAAe;EACf,aAAa;EACb,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;CACnB;AACF,CAAC"}
+{"version":3,"file":"index.js","names":["Component"],"sources":["../../../src/react/combo-box/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/ComboBox/sgds-combo-box\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-combo-box\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-combo-box\",\n  elementClass: Component,\n  events: {\n    onSgdsSelect: \"sgds-select\",\n    onSgdsChange: \"sgds-change\",\n    onSgdsInput: \"sgds-input\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsBlur: \"sgds-blur\",\n    onSgdsInvalid: \"sgds-invalid\",\n    onSgdsValid: \"sgds-valid\",\n    onSgdsScrollEnd: \"sgds-scroll-end\",\n    onSgdsCreateOption: \"sgds-create-option\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"mappings":";;;;;;AAKA,SAAS,kBAAkBA,YAAS;AAEpC,IAAA,oBAAe,gBAAgB;CAC7B,OAAO;CACP,SAAS;CACT,cAAcA;CACd,QAAQ;EACN,cAAc;EACd,cAAc;EACd,aAAa;EACb,aAAa;EACb,YAAY;EACZ,eAAe;EACf,aAAa;EACb,iBAAiB;EACjB,oBAAoB;EACpB,YAAY;EACZ,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;CACnB;AACF,CAAC"}

package/react/components/ComboBox/combo-box.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/ComboBox/combo-box.css
-var css_248z = require("lit").css`:host{display:block;position:relative}.dropdown{display:flex;height:100%}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.combobox .form-control-group{height:unset;min-height:var(--sgds-dimension-48)}.combobox-input-container{align-items:center;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);padding:calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;width:calc(100% - var(--sgds-icon-size-md, 1.25rem))}.combobox-input-container .form-control{flex:1 1 0;min-width:10ch}slot[id=default].d-none,slot[id=default].d-none::slotted(*){display:none}.form-clearable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
+var css_248z = require("lit").css`:host{display:block;position:relative}.dropdown{display:flex;height:100%}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.combobox .form-control-group{height:unset;min-height:var(--sgds-dimension-48)}.combobox-input-container{align-items:center;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);padding:calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;width:calc(100% - var(--sgds-icon-size-md, 1.25rem))}.combobox-input-container .form-control{flex:1 1 0;min-width:10ch}slot[id=default].d-none,slot[id=default].d-none::slotted(*){display:none}slot[name=create].d-none,slot[name=create].d-none::slotted(*){display:none}.create-option{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);overflow-wrap:anywhere;padding:var(--sgds-padding-sm) var(--sgds-padding-md);white-space:normal}.create-option:not(.slotted){cursor:pointer}.create-option:hover{background:var(--sgds-bg-translucent-subtle)}.create-option:focus-visible{background:var(--sgds-bg-translucent-subtle);outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-clearable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/ComboBox/combo-box.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"combo-box.cjs.js","names":[],"sources":["../../../../src/components/ComboBox/combo-box.css"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n}\n\n.dropdown {\n  display: flex;\n  height: 100%;\n}\n\n.dropdown-menu {\n  max-height: 10rem;\n  overflow-y: auto;\n  overflow-x: hidden;\n  box-sizing: border-box;\n}\n\n.visually-hidden {\n  clip: rect(0, 0, 0, 0) !important;\n  border: 0 !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  white-space: nowrap !important;\n  width: 1px !important;\n}\n\n.combobox .form-control-group {\n  min-height: var(--sgds-dimension-48);\n  height: unset;\n}\n\n.combobox-input-container {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  flex-wrap: wrap;\n  align-items: center;\n  width: calc(100% - var(--sgds-icon-size-md, 1.25rem));\n  /* deduct 1px from top and bottom padding due to border */\n  padding: calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;\n}\n\n.combobox-input-container .form-control {\n  flex: 1 1 0;\n  min-width: 10ch;\n}\n\nslot[id='default'].d-none::slotted(*),\nslot[id='default'].d-none{\n  display: none;\n}\n\n.form-clearable:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}"],"mappings":""}
+{"version":3,"file":"combo-box.cjs.js","names":[],"sources":["../../../../src/components/ComboBox/combo-box.css"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n}\n\n.dropdown {\n  display: flex;\n  height: 100%;\n}\n\n.dropdown-menu {\n  max-height: 10rem;\n  overflow-y: auto;\n  overflow-x: hidden;\n  box-sizing: border-box;\n}\n\n.visually-hidden {\n  clip: rect(0, 0, 0, 0) !important;\n  border: 0 !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  white-space: nowrap !important;\n  width: 1px !important;\n}\n\n.combobox .form-control-group {\n  min-height: var(--sgds-dimension-48);\n  height: unset;\n}\n\n.combobox-input-container {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  flex-wrap: wrap;\n  align-items: center;\n  width: calc(100% - var(--sgds-icon-size-md, 1.25rem));\n  /* deduct 1px from top and bottom padding due to border */\n  padding: calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;\n}\n\n.combobox-input-container .form-control {\n  flex: 1 1 0;\n  min-width: 10ch;\n}\n\nslot[id='default'].d-none::slotted(*),\nslot[id='default'].d-none{\n  display: none;\n}\n\nslot[name='create'].d-none::slotted(*),\nslot[name='create'].d-none {\n  display: none;\n}\n\n.create-option {\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n  color: var(--sgds-form-color-default);\n  font-size: var(--sgds-font-size-label-md);\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.create-option:not(.slotted) {\n  cursor: pointer;\n}\n\n.create-option:hover {\n  background: var(--sgds-bg-translucent-subtle);\n}\n\n.create-option:focus-visible {\n  background: var(--sgds-bg-translucent-subtle);\n  outline: var(--sgds-form-outline-focus);\n  outline-offset: var(--sgds-form-outline-offset-focus);\n}\n\n.form-clearable:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}"],"mappings":""}

package/react/components/ComboBox/combo-box.js

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/ComboBox/combo-box.css
-var css_248z = css`:host{display:block;position:relative}.dropdown{display:flex;height:100%}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.combobox .form-control-group{height:unset;min-height:var(--sgds-dimension-48)}.combobox-input-container{align-items:center;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);padding:calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;width:calc(100% - var(--sgds-icon-size-md, 1.25rem))}.combobox-input-container .form-control{flex:1 1 0;min-width:10ch}slot[id=default].d-none,slot[id=default].d-none::slotted(*){display:none}.form-clearable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
+var css_248z = css`:host{display:block;position:relative}.dropdown{display:flex;height:100%}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.combobox .form-control-group{height:unset;min-height:var(--sgds-dimension-48)}.combobox-input-container{align-items:center;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);padding:calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;width:calc(100% - var(--sgds-icon-size-md, 1.25rem))}.combobox-input-container .form-control{flex:1 1 0;min-width:10ch}slot[id=default].d-none,slot[id=default].d-none::slotted(*){display:none}slot[name=create].d-none,slot[name=create].d-none::slotted(*){display:none}.create-option{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);overflow-wrap:anywhere;padding:var(--sgds-padding-sm) var(--sgds-padding-md);white-space:normal}.create-option:not(.slotted){cursor:pointer}.create-option:hover{background:var(--sgds-bg-translucent-subtle)}.create-option:focus-visible{background:var(--sgds-bg-translucent-subtle);outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-clearable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
 //#endregion
 export { css_248z as default };
 

package/react/components/ComboBox/combo-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"combo-box.js","names":[],"sources":["../../../../src/components/ComboBox/combo-box.css"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n}\n\n.dropdown {\n  display: flex;\n  height: 100%;\n}\n\n.dropdown-menu {\n  max-height: 10rem;\n  overflow-y: auto;\n  overflow-x: hidden;\n  box-sizing: border-box;\n}\n\n.visually-hidden {\n  clip: rect(0, 0, 0, 0) !important;\n  border: 0 !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  white-space: nowrap !important;\n  width: 1px !important;\n}\n\n.combobox .form-control-group {\n  min-height: var(--sgds-dimension-48);\n  height: unset;\n}\n\n.combobox-input-container {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  flex-wrap: wrap;\n  align-items: center;\n  width: calc(100% - var(--sgds-icon-size-md, 1.25rem));\n  /* deduct 1px from top and bottom padding due to border */\n  padding: calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;\n}\n\n.combobox-input-container .form-control {\n  flex: 1 1 0;\n  min-width: 10ch;\n}\n\nslot[id='default'].d-none::slotted(*),\nslot[id='default'].d-none{\n  display: none;\n}\n\n.form-clearable:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}"],"mappings":""}
+{"version":3,"file":"combo-box.js","names":[],"sources":["../../../../src/components/ComboBox/combo-box.css"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n}\n\n.dropdown {\n  display: flex;\n  height: 100%;\n}\n\n.dropdown-menu {\n  max-height: 10rem;\n  overflow-y: auto;\n  overflow-x: hidden;\n  box-sizing: border-box;\n}\n\n.visually-hidden {\n  clip: rect(0, 0, 0, 0) !important;\n  border: 0 !important;\n  height: 1px !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  padding: 0 !important;\n  position: absolute !important;\n  white-space: nowrap !important;\n  width: 1px !important;\n}\n\n.combobox .form-control-group {\n  min-height: var(--sgds-dimension-48);\n  height: unset;\n}\n\n.combobox-input-container {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  flex-wrap: wrap;\n  align-items: center;\n  width: calc(100% - var(--sgds-icon-size-md, 1.25rem));\n  /* deduct 1px from top and bottom padding due to border */\n  padding: calc(var(--sgds-form-padding-y) - var(--sgds-form-border-width-default)) 0;\n}\n\n.combobox-input-container .form-control {\n  flex: 1 1 0;\n  min-width: 10ch;\n}\n\nslot[id='default'].d-none::slotted(*),\nslot[id='default'].d-none{\n  display: none;\n}\n\nslot[name='create'].d-none::slotted(*),\nslot[name='create'].d-none {\n  display: none;\n}\n\n.create-option {\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n  color: var(--sgds-form-color-default);\n  font-size: var(--sgds-font-size-label-md);\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.create-option:not(.slotted) {\n  cursor: pointer;\n}\n\n.create-option:hover {\n  background: var(--sgds-bg-translucent-subtle);\n}\n\n.create-option:focus-visible {\n  background: var(--sgds-bg-translucent-subtle);\n  outline: var(--sgds-form-outline-focus);\n  outline-offset: var(--sgds-form-outline-offset-focus);\n}\n\n.form-clearable:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}"],"mappings":""}

package/react/components/ComboBox/sgds-combo-box.cjs.js

@@ -20,6 +20,7 @@ let lit_directives_repeat_js = require("lit/directives/repeat.js");
 * @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions
 *
 * @slot default - default slot to pass in sgds-combo-box-option
+* @slot create - Custom content for the "Create" option shown when `creatable` is true and no match is found. Use `sgds-input` event to dynamically update the slotted content with the current input value.
 *
 * @event sgds-select - Emitted when the combo box's selected value changes.
 * @event sgds-change - Emitted when the combo box's value changes.
@@ -30,6 +31,8 @@ let lit_directives_repeat_js = require("lit/directives/repeat.js");
 * @event sgds-invalid - Emitted when the combo box's invalid state is set to true.
 * @event sgds-valid - Emitted when the combo box's invalid state is set to false.
 * @event sgds-scroll-end - Emitted once when the menu is scrolled to within `scrollBottomOffset` pixels of the bottom. Resets when the user scrolls back up.
+* @event sgds-create-option - Emitted when the user selects the "Create xxx" option. `event.detail = { value }`
+* @eventDetail {ISgdsComboBoxCreateOptionEventDetail} sgds-create-option
 */
 var SgdsComboBox = class SgdsComboBox extends require_select_element.SelectElement {
 	constructor(..._args) {
@@ -40,6 +43,7 @@ var SgdsComboBox = class SgdsComboBox extends require_select_element.SelectEleme
 		this.noValidate = false;
 		this.async = false;
 		this.emptyMenuAsync = false;
+		this.creatable = false;
 		this.scrollBottomOffset = 0;
 		this.filterFunction = (inputValue, item) => {
 			return item.label.toLowerCase().startsWith(inputValue.toLowerCase());
@@ -53,6 +57,9 @@ var SgdsComboBox = class SgdsComboBox extends require_select_element.SelectEleme
     size="md"
   ></sgds-icon>`;
 		this.prefixIconTemplate = lit.html`${lit.nothing}`;
+		this._createOptionSlotContent = [];
+		this._createOptionValue = "";
+		this._showCreateOption = false;
 	}
 	static {
 		this.styles = [
@@ -85,7 +92,9 @@ var SgdsComboBox = class SgdsComboBox extends require_select_element.SelectEleme
 		});
 		this.addEventListener("sgds-hide", async (e) => {
 			if (!e.detail.isOutside) (await this._input).focus();
-			this.options.forEach((o) => o.removeAttribute("hidden"));
+			this.options.forEach((o) => {
+				o.removeAttribute("hidden");
+			});
 			this.emptyMenuAfterFiltering = false;
 		});
 	}
@@ -125,7 +134,8 @@ var SgdsComboBox = class SgdsComboBox extends require_select_element.SelectEleme
 		});
 		/** this will trigger _updateValueAndDisplayValue */
 		await this.updateComplete;
-		this.optionList = await this._getMenuListFromOptions(assignedElements);
+		const realOptions = assignedElements;
+		this.optionList = await this._getMenuListFromOptions(realOptions);
 		this._setupValidation(this.optionList);
 	}
 	async _setupValidation(list) {
@@ -140,7 +150,9 @@ var SgdsComboBox = class SgdsComboBox extends require_select_element.SelectEleme
 		this._mixinValidate(this.input);
 	}
 	async _handleValueChange() {
-		this.options.forEach((o) => o.removeAttribute("hidden"));
+		this.options.forEach((o) => {
+			o.removeAttribute("hidden");
+		});
 		const sgdsInput = await this._input;
 		this._mixinSetFormValue();
 		if (this.multiSelect) this._mixinValidate(this.input);
@@ -202,6 +214,7 @@ var SgdsComboBox = class SgdsComboBox extends require_select_element.SelectEleme
 			if (!filteredValues.includes(o.value)) o.hidden = true;
 			else o.hidden = false;
 		});
+		this._syncCreateOption();
 	}
 	/**
 	* Called whenever an <sgds-combo-box-option> dispatches sgds-select"
@@ -219,6 +232,7 @@ var SgdsComboBox = class SgdsComboBox extends require_select_element.SelectEleme
 			if (!this.selectedItems.some((i) => i.value === foundItem.value)) this.selectedItems = [...this.selectedItems, foundItem];
 			this.value = this.selectedItems.map((i) => i.value).join(";");
 			itemEl.active = true;
+			this.displayValue = "";
 		} else if (this.selectedItems.length === 0 || this.selectedItems[0].value !== foundItem.value) {
 			this.options.forEach((o) => o.active = false);
 			itemEl.active = true;
@@ -269,6 +283,8 @@ var SgdsComboBox = class SgdsComboBox extends require_select_element.SelectEleme
 	async _handleInputBlur(e) {
 		e.preventDefault();
 		this.emit("sgds-blur");
+		const relatedTarget = e.relatedTarget;
+		if ((this.creatable || this.multiSelect) && relatedTarget && (this.contains(relatedTarget) || this.shadowRoot?.contains(relatedTarget))) return;
 		if (this.multiSelect) {
 			if (this.selectedItems.filter(({ label }) => this.displayValue === label).length <= 0) this.displayValue = "";
 		} else if (this.selectedItems.length > 0) this.displayValue = this.selectedItems[0].label;
@@ -393,10 +409,68 @@ var SgdsComboBox = class SgdsComboBox extends require_select_element.SelectEleme
       </div>
     `;
 	}
+	/** Updates visibility of the create-option container based on creatable + filter state. */
+	_syncCreateOption() {
+		this._showCreateOption = this.creatable && this.emptyMenuAfterFiltering && this.displayValue !== "";
+		if (this._showCreateOption) this._createOptionValue = this.displayValue;
+	}
+	/** Handles slotchange for the create-option named slot. */
+	_handleCreateOptionSlotChange(e) {
+		this._createOptionSlotContent = e.target.assignedElements({ flatten: true });
+	}
+	/** Click handler for the create-option container. Lets interactive slotted elements (links, buttons) pass through. */
+	_handleCreateOptionClick(evt) {
+		if (evt.composedPath()[0].closest?.("a, button")) return;
+		this.emit("sgds-create-option", { detail: { value: this._createOptionValue } });
+		this.emptyMenuAfterFiltering = false;
+		this._syncCreateOption();
+		this.hideMenu();
+	}
+	/** Keydown handler for the create-option container. */
+	_handleCreateOptionKeydown(evt) {
+		if (evt.key === "Enter") {
+			this._handleCreateOptionClick(evt);
+			return;
+		}
+		if (evt.key === "ArrowUp") {
+			evt.preventDefault();
+			const items = this._getActiveMenuItems();
+			if (items.length > 0) this._setMenuItem(items.length - 1);
+			return;
+		}
+		if (evt.key === "ArrowDown") {
+			evt.preventDefault();
+			if (this._getActiveMenuItems().length > 0) this._setMenuItem(0);
+		}
+	}
+	/** Override base keyboard handler to include create-option in ArrowDown/Tab navigation. */
+	_handleKeyboardMenuItemsEvent(e) {
+		const createDiv = this.shadowRoot?.querySelector(".create-option");
+		if (createDiv?.matches(":focus") && e.key === "Tab") return;
+		if (this._showCreateOption && (e.key === "ArrowDown" || e.key === "Tab" && !e.shiftKey)) {
+			const items = this._getActiveMenuItems();
+			if (items.length > 0) {
+				if (items[items.length - 1].shadowRoot?.querySelector(".dropdown-item")?.matches(":focus")) {
+					e.preventDefault();
+					createDiv?.focus();
+					return;
+				}
+			}
+			if (items.length === 0) {
+				e.preventDefault();
+				createDiv?.focus();
+				return;
+			}
+		}
+		super._handleKeyboardMenuItemsEvent(e);
+	}
 	_renderFeedbackMenu() {
 		if (this.loading) return this._renderLoadingMenu();
 		if (this.async) return this.emptyMenuAsync || this.optionList.length === 0 ? this._renderEmptyMenu() : lit.nothing;
-		else return this.optionList.length === 0 || this.emptyMenuAfterFiltering && this.optionList.length > 0 ? this._renderEmptyMenu() : lit.nothing;
+		else {
+			if (this.creatable && this.emptyMenuAfterFiltering && this.optionList.length > 0) return lit.nothing;
+			return this.optionList.length === 0 || this.emptyMenuAfterFiltering && this.optionList.length > 0 ? this._renderEmptyMenu() : lit.nothing;
+		}
 	}
 	render() {
 		const showClearButton = (this.isFocused || this.menuIsOpen) && this.value !== "" && this.clearable && !this.readonly;
@@ -428,6 +502,18 @@ var SgdsComboBox = class SgdsComboBox extends require_select_element.SelectEleme
             class=${(0, lit_directives_class_map_js.classMap)({ "d-none": this.loading || this.emptyMenuAsync || this.optionList.length === 0 })}
             @slotchange=${this._handleDefaultSlotChange}
           ></slot>
+          ${this._showCreateOption ? lit.html`<div
+                class=${(0, lit_directives_class_map_js.classMap)({
+			"create-option": true,
+			slotted: this._createOptionSlotContent.length > 0
+		})}
+                tabindex="0"
+                role="option"
+                @click=${this._handleCreateOptionClick}
+                @keydown=${this._handleCreateOptionKeydown}
+              >
+                ${this._createOptionSlotContent.length > 0 ? lit.html`<slot name="create" @slotchange=${this._handleCreateOptionSlotChange}></slot>` : `Create "${this.displayValue}"`}
+              </div>` : lit.html`<slot name="create" class="d-none" @slotchange=${this._handleCreateOptionSlotChange}></slot>`}
           ${this._renderFeedbackMenu()}
         </div>
       </div>
@@ -469,6 +555,10 @@ require_decorate.default([(0, lit_decorators_js.property)({
 	type: Boolean,
 	reflect: true
 })], SgdsComboBox.prototype, "emptyMenuAsync", void 0);
+require_decorate.default([(0, lit_decorators_js.property)({
+	type: Boolean,
+	reflect: true
+})], SgdsComboBox.prototype, "creatable", void 0);
 require_decorate.default([(0, lit_decorators_js.property)({
 	type: Number,
 	reflect: true
@@ -486,6 +576,7 @@ require_decorate.default([(0, lit_decorators_js.state)()], SgdsComboBox.prototyp
 require_decorate.default([require_watch.watch("value", { waitUntilFirstUpdate: true })], SgdsComboBox.prototype, "_handleValueChange", null);
 require_decorate.default([require_watch.watch("optionList", { waitUntilFirstUpdate: true })], SgdsComboBox.prototype, "_handleOptionListChange", null);
 require_decorate.default([require_watch.watch("menuList", { waitUntilFirstUpdate: true })], SgdsComboBox.prototype, "_handleMenuListChange", null);
+require_decorate.default([(0, lit_decorators_js.state)()], SgdsComboBox.prototype, "_showCreateOption", void 0);
 //#endregion
 exports.SgdsComboBox = SgdsComboBox;
 exports.default = SgdsComboBox;

package/react/components/ComboBox/sgds-combo-box.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-combo-box.cjs.js","names":["SelectElement","nothing","formTextControlStyle","comboBoxStyle","SgdsComboBoxOption","SgdsIcon","SgdsBadge","SgdsSpinner","ref","classMap","repeat","ifDefined","live","property","queryAsync","queryAssignedElements","state","watch"],"sources":["../../../../src/components/ComboBox/sgds-combo-box.ts"],"sourcesContent":["import { live } from \"lit/directives/live.js\";\nimport { html, nothing, PropertyValueMap, TemplateResult } from \"lit\";\nimport { property, queryAssignedElements, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement, SgdsOptionData } from \"../../base/select-element\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsBadge } from \"../Badge/sgds-badge\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport comboBoxStyle from \"./combo-box.css\";\nimport formTextControlStyle from \"../../styles/form-text-control.css\";\nimport { SgdsComboBoxOption } from \"./sgds-combo-box-option\";\n\nimport { repeat } from \"lit/directives/repeat.js\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\nimport { ISgdsComboBoxInputEventDetail } from \"./types\";\n\n/**\n * Each item in the ComboBox has a label to display\n * and a value (the actual data / ID).\n */\ntype SgdsComboBoxOptionData = SgdsOptionData;\n\nexport type { ISgdsComboBoxInputEventDetail };\n\n/**\n * @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions\n *\n * @slot default - default slot to pass in sgds-combo-box-option\n *\n * @event sgds-select - Emitted when the combo box's selected value changes.\n * @event sgds-change - Emitted when the combo box's value changes.\n * @event sgds-input -  Emitted when user input is received and its value changes. `event.detail = { displayValue }`\n * @eventDetail {ISgdsComboBoxInputEventDetail} sgds-input\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n * @event sgds-invalid - Emitted when the combo box's invalid state is set to true.\n * @event sgds-valid - Emitted when the combo box's invalid state is set to false.\n * @event sgds-scroll-end - Emitted once when the menu is scrolled to within `scrollBottomOffset` pixels of the bottom. Resets when the user scrolls back up.\n */\nexport class SgdsComboBox extends SelectElement {\n  static styles = [...SelectElement.styles, formTextControlStyle, comboBoxStyle];\n  static childName = \"sgds-combo-box-option\";\n  /** @internal */\n  static dependencies = {\n    [SgdsComboBox.childName]: SgdsComboBoxOption,\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-badge\": SgdsBadge,\n    \"sgds-spinner\": SgdsSpinner\n  };\n\n  /** If true, renders multiple checkbox selection items. If false, single-select. */\n  @property({ type: Boolean, reflect: true }) multiSelect = false;\n\n  /** If true, renders badge that fills width of combobox */\n  @property({ type: Boolean, reflect: true }) badgeFullWidth = false;\n\n  /** If true, a clear button will be enabled on focus */\n  @property({ type: Boolean, reflect: true }) clearable = false;\n\n  /** Disables native and sgds validation for the combo box. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** Enables the asynchronous behaviour of a combo box. When true, filterFunction is ignored and filtering is done remotely. */\n  @property({ type: Boolean, reflect: true }) async = false;\n\n  /** When filtering remotely and there are no results, set this to true to enable no options feedback on the menu. Applicable for async combo box only. */\n  @property({ type: Boolean, reflect: true }) emptyMenuAsync = false;\n\n  /** Number of pixels from the bottom of the menu at which the sgds-scroll-end event fires. */\n  @property({ type: Number, reflect: true }) scrollBottomOffset = 0;\n\n  /** The function used to filter the menu list, given the user's input value. */\n  @property()\n  filterFunction: (inputValue: string, item: SgdsComboBoxOptionData) => boolean = (inputValue, item) => {\n    return item.label.toLowerCase().startsWith(inputValue.toLowerCase());\n  };\n\n  @queryAsync(\"input#multi-select-input-tracker\") private _multiSelectInput: Promise<HTMLInputElement>;\n\n  @queryAssignedElements({ flatten: true, selector: \"sgds-combo-box-option\" })\n  protected options: SgdsComboBoxOption[];\n\n  @state() private optionList: SgdsComboBoxOptionData[] = [];\n  @state() private emptyMenuAfterFiltering = false;\n\n  // Used to show and hide the clear button\n  @state() protected isFocused = false;\n\n  // Used to determine if the scroll reached the end with offset\n  @state() protected isScrollEnd = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.addEventListener(\"focus\", async () => {\n      this.isFocused = true;\n    });\n\n    this.addEventListener(\"blur\", async () => {\n      this.isFocused = false;\n    });\n\n    this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n      if (\n        e.key === \"Enter\" &&\n        (e.target as HTMLElement).shadowRoot?.querySelector(\".form-clearable\")?.matches(\":focus\")\n      ) {\n        this._handleClear();\n      }\n    });\n\n    this.addEventListener(\"sgds-hide\", async (e: CustomEvent) => {\n      if (!e.detail.isOutside) {\n        const sgdsInput = await this._input;\n        sgdsInput.focus();\n      }\n\n      this.options.forEach(o => o.removeAttribute(\"hidden\"));\n      // reset emptyMenu state\n      this.emptyMenuAfterFiltering = false;\n    });\n  }\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.async) this.filterFunction = () => true;\n    this.menuList.forEach(o => {\n      const comboBoxOption = document.createElement(\"sgds-combo-box-option\") as SgdsComboBoxOption;\n      comboBoxOption.innerText = o.label;\n      comboBoxOption.value = o.value;\n      comboBoxOption.checkbox = this.multiSelect;\n      comboBoxOption.active = this.value.includes(o.value);\n      this.appendChild(comboBoxOption);\n    });\n    this._setupValidation(this.menuList);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n  }\n\n  protected async _handleDefaultSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({\n      flatten: true\n    }) as ComboBoxOptionWithFlag[];\n\n    assignedElements.forEach(option => {\n      // Handling of click events\n      if (option.hasAttribute(\"disabled\")) return false;\n      if (option.clickEventAdded) return false;\n      option.addEventListener(\"click\", (evt: PointerEvent) => {\n        evt.preventDefault();\n        const optionTarget = evt.target as SgdsComboBoxOption;\n\n        if (this.multiSelect) {\n          optionTarget.active ? this._handleItemUnselect(evt) : this._handleItemSelected(evt);\n        } else {\n          this._handleItemSelected(evt);\n        }\n\n        return false;\n      });\n      option.clickEventAdded = true;\n      option.addEventListener(\"keydown\", (evt: KeyboardEvent) => {\n        if (evt.key === \"Enter\") {\n          this.close = \"outside\";\n          const optionTarget = evt.target as SgdsComboBoxOption;\n          optionTarget.click();\n        }\n      });\n    });\n\n    /** this will trigger _updateValueAndDisplayValue */\n    await this.updateComplete;\n    this.optionList = await this._getMenuListFromOptions(assignedElements);\n    this._setupValidation(this.optionList);\n  }\n\n  private async _setupValidation(list: SgdsComboBoxOptionData[]) {\n    if (this.value && list.length > 0) {\n      const valueArray = this.value.split(\";\");\n      const initialSelectedItem = list.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = [...initialSelectedItem, ...this.selectedItems];\n\n      if (!this.multiSelect) {\n        this.displayValue = initialSelectedItem[0]?.label;\n      }\n    }\n    /** We want to run validation regardless of value or list present */\n    this.multiSelect ? (this.input = await this._multiSelectInput) : (this.input = await this._input);\n    this._mixinValidate(this.input);\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this.options.forEach(o => o.removeAttribute(\"hidden\"));\n\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n\n    if (this.multiSelect) {\n      this._mixinValidate(this.input);\n    } else {\n      this._mixinValidate(sgdsInput);\n    }\n\n    // When value is updated by user and it doesn't map to selectedItems, we should re-map selectedItems\n    const selectedItemVal = this.selectedItems.map(val => val.value).join(\";\");\n    if (selectedItemVal !== this.value) {\n      this._updateValueAndDisplayValue(this.optionList);\n    }\n\n    if (!this._isTouched && this.value === \"\") return;\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  /** Emits sgds-change and sgds-select events. Call after setting this.value from user interaction. */\n  private _emitChangeEvents() {\n    this._mixinSetFormValue();\n    this.emit(\"sgds-change\");\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n  }\n\n  @watch(\"optionList\", { waitUntilFirstUpdate: true })\n  _handleOptionListChange() {\n    this._updateValueAndDisplayValue(this.optionList);\n  }\n\n  @watch(\"menuList\", { waitUntilFirstUpdate: true })\n  _handleMenuListChange() {\n    const newMenu = this.menuList.map(o => {\n      const comboBoxOption = document.createElement(\"sgds-combo-box-option\") as SgdsComboBoxOption;\n      comboBoxOption.innerText = o.label;\n      comboBoxOption.value = o.value;\n      comboBoxOption.checkbox = this.multiSelect;\n      comboBoxOption.active = this.value.includes(o.value);\n      return comboBoxOption;\n    });\n\n    this.replaceChildren(...newMenu);\n  }\n\n  private _updateValueAndDisplayValue(list: SgdsComboBoxOptionData[]) {\n    const valueArray = this.value.split(\";\");\n    const initialSelectedItem = list.filter(({ value }) => valueArray.includes(value));\n    this.selectedItems = [...initialSelectedItem];\n    // When the new filtered items don't match value we update it\n    const updatedValue = initialSelectedItem.map(item => item.value).join(\";\");\n    if (updatedValue !== this.value) {\n      this.value = updatedValue;\n    }\n    // Disabling this condition for async combobox so that the display value in the input will not clear when menu options changes\n    if (!this.multiSelect && !this.async) {\n      this.displayValue = initialSelectedItem[0]?.label || \"\";\n    }\n\n    this.options.forEach(o => (o.active = valueArray.includes(o.value)));\n  }\n\n  // Called each time the user types in the <sgds-input>, we set .value and show the menu\n  protected async _handleInputChange(e: CustomEvent) {\n    const input = e.target as HTMLInputElement;\n    this.displayValue = input.value;\n    this.emit<ISgdsComboBoxInputEventDetail>(\"sgds-input\", { detail: { displayValue: this.displayValue } });\n    this.invalid = false;\n    this.showMenu();\n    // reset menu list when displayValue is cleared\n    if (this.displayValue === \"\" && !this.multiSelect) {\n      this.selectedItems = [];\n      this.value = this.selectedItems.join(\";\");\n      this.options.forEach(o => (o.active = false));\n      this._emitChangeEvents();\n    }\n    // There is a race condition in certain situations where this.optionList is not fully updated during slotchange\n    // Hence instead of using this.optionList, we have to perform a query on the <sgds-combo-box-option> elements\n    const optionList = this.options.map(o => ({ value: o.value, label: o.textContent.trim() }));\n    this.filteredList = optionList.filter(item => this.filterFunction(this.displayValue, item));\n\n    // Filtering for slots\n    this.emptyMenuAfterFiltering = this.filteredList.length === 0;\n    const filteredValues = this.filteredList.map(l => l.value);\n\n    this.options.forEach(o => {\n      if (!filteredValues.includes(o.value)) {\n        o.hidden = true;\n      } else {\n        o.hidden = false;\n      }\n    });\n  }\n\n  /**\n   * Called whenever an <sgds-combo-box-option> dispatches sgds-select\"\n   */\n  protected async _handleItemSelected(e: Event) {\n    const itemEl = e.target as SgdsComboBoxOption;\n    if (itemEl.disabled) return;\n\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    if (this.multiSelect) {\n      if (!this.selectedItems.some(i => i.value === foundItem.value)) {\n        this.selectedItems = [...this.selectedItems, foundItem];\n      }\n\n      this.value = this.selectedItems.map(i => i.value).join(\";\");\n      itemEl.active = true;\n    } else {\n      // Single-select\n      // Only update active states if a new item is selected\n      if (this.selectedItems.length === 0 || this.selectedItems[0].value !== foundItem.value) {\n        // Remove active from all options\n        this.options.forEach(o => (o.active = false));\n        itemEl.active = true;\n\n        this.selectedItems = [foundItem];\n        this.value = foundItem.value.toString();\n        this.displayValue = foundItem.label;\n        this.hideMenu();\n      }\n    }\n    this._emitChangeEvents();\n  }\n\n  private _handleItemUnselect(e: Event) {\n    const itemEl = e.target as SgdsComboBoxOption;\n    if (itemEl.disabled) return;\n\n    itemEl.removeAttribute(\"active\");\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    this.selectedItems = this.selectedItems.filter(i => i.value !== foundItem.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n    this._emitChangeEvents();\n  }\n\n  private async _handleBadgeDismissed(e: CustomEvent, item: SgdsComboBoxOptionData) {\n    e.preventDefault();\n    const removedValue = item.value;\n    this.options?.forEach(o => (o.value === removedValue ? (o.active = false) : null));\n    this.selectedItems = this.selectedItems.filter(i => i.value !== item.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n    this._emitChangeEvents();\n  }\n\n  private async _handleMultiSelectKeyDown(e: KeyboardEvent) {\n    // Only do this in multi-select mode\n    if (!this.multiSelect) {\n      return;\n    }\n\n    if (e.key === \"Backspace\" && this.multiSelect) {\n      if (this.displayValue.trim() === \"\" && this.selectedItems.length > 0) {\n        const removedValue = this.selectedItems[this.selectedItems.length - 1].value;\n        this.options?.forEach(o => (o.value === removedValue ? (o.active = false) : null));\n        this.selectedItems = this.selectedItems.slice(0, -1);\n        this.value = this.selectedItems.map(i => i.value).join(\";\");\n        this._emitChangeEvents();\n      }\n    }\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n\n    this.emit(\"sgds-blur\");\n\n    if (this.multiSelect) {\n      const displayValueMatchedSelectedItems = this.selectedItems.filter(({ label }) => this.displayValue === label);\n      if (displayValueMatchedSelectedItems.length <= 0) {\n        this.displayValue = \"\";\n      }\n    } else {\n      // Single select\n      if (this.selectedItems.length > 0) {\n        this.displayValue = this.selectedItems[0].label;\n      } else {\n        this.displayValue = \"\";\n      }\n    }\n  }\n\n  // For clearing the value\n  protected async _handleClear() {\n    this.value = this.displayValue = \"\";\n    this.options?.forEach(o => (o.active = false));\n    this._emitChangeEvents();\n\n    const sgdsInput = await this._input;\n    sgdsInput.focus();\n    this.showMenu();\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    if (!this.multiSelect) {\n      //reset menu\n      this.options.forEach(o => {\n        o.active = o.value === this.value;\n      });\n      const initialOption = this.options.filter(o => o.value === this.value);\n      if (initialOption.length <= 0) {\n        this.displayValue = \"\";\n      } else {\n        this.displayValue = initialOption[0].textContent.trim();\n      }\n      this._mixinResetValidity(await this._input);\n    } else {\n      const valueArray = this.value.split(\";\");\n      // reset menu\n      this.options.forEach(o => {\n        o.active = valueArray.includes(o.value);\n      });\n      const initialOption = this.options.filter(o => valueArray.includes(o.value));\n      this.selectedItems = initialOption.map(o => ({ value: o.value, label: o.textContent.trim() }));\n      this._mixinResetValidity(await this._multiSelectInput);\n    }\n  }\n\n  /**\n   * Handles scroll events on the menu. Emits `sgds-scroll-end` once when the\n   * scroll position reaches within `scrollBottomOffset` pixels of the bottom.\n   * The event is suppressed until the user scrolls back up, preventing repeated\n   * emissions while the menu stays at the bottom.\n   */\n  private async _handleScroll(e: MouseEvent) {\n    const ele = e.target as HTMLElement;\n    if (ele) {\n      const endOfScroll = ele.scrollHeight - ele.clientHeight;\n      const offset = Math.max(0, this.scrollBottomOffset);\n\n      if (ele.scrollTop >= endOfScroll - offset) {\n        if (!this.isScrollEnd) {\n          this.emit(\"sgds-scroll-end\");\n        }\n        this.isScrollEnd = true;\n      } else {\n        this.isScrollEnd = false;\n      }\n    }\n  }\n\n  /** Template for the suffix icon */\n  protected suffixIconTemplate: TemplateResult = html`<sgds-icon\n    name=${this.menuIsOpen ? \"chevron-up\" : \"chevron-down\"}\n    size=\"md\"\n  ></sgds-icon>`;\n\n  protected prefixIconTemplate: TemplateResult = html`${nothing}`;\n  /**\n   * Used `repeat` helper from Lit to render instead of .map:\n   * The reassigning of value is affecting the truncation on badge as it is not triggering the slot change event.\n   *\n   * To compare this to lit-html's default handling for lists, consider reversing a large list of names:\n   * For a list created using Array.map, lit-html maintains the DOM nodes for the list items, but reassigns the values\n   * For a list created using repeat, the repeat directive reorders the existing DOM nodes, so the nodes representing the first list item move to the last position.\n   */\n  protected _renderInput(showClearButton: boolean): TemplateResult {\n    const wantFeedbackStyle = this.hasFeedback;\n    const showButton = showClearButton;\n\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        ${this.prefixIconTemplate}\n        <div class=\"combobox-input-container\">\n          ${this.multiSelect\n            ? html`\n                ${repeat(\n                  this.selectedItems,\n                  item => item.value,\n                  item =>\n                    html`<sgds-badge\n                      outlined\n                      variant=\"neutral\"\n                      show\n                      ?dismissible=${!(this.readonly || this.disabled)}\n                      ?fullwidth=${this.badgeFullWidth}\n                      @sgds-hide=${e => this._handleBadgeDismissed(e, item)}\n                      >${item.label}</sgds-badge\n                    >`\n                )}\n              `\n            : nothing}\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            id=${this._controlId}\n            name=${ifDefined(this.name)}\n            placeholder=${ifDefined(this.placeholder)}\n            aria-invalid=${this.invalid ? \"true\" : \"false\"}\n            ?autofocus=${this.autofocus}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            .value=${this.displayValue ? this.displayValue.trim() : \"\"}\n            @input=${this._handleInputChange}\n            @blur=${this._handleInputBlur}\n            @focus=${this._handleFocus}\n            aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n            aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n              ? `${this._controlId}-invalid`\n              : \"\"}\"\n            .autocomplete=${this.autocomplete}\n          />\n        </div>\n\n        ${showButton\n          ? html`\n              <sgds-icon\n                id=${`${this._controlId}-combobox-clear-button`}\n                tabindex=\"0\"\n                class=\"form-clearable\"\n                name=\"xcircle-fill\"\n                size=\"md\"\n                @click=${this._handleClear}\n                aria-label=\"Clear selections\"\n                role=\"button\"\n              ></sgds-icon>\n            `\n          : nothing}\n        ${this.suffixIconTemplate}\n      </div>\n    `;\n  }\n\n  protected _renderFeedbackMenu() {\n    if (this.loading) {\n      return this._renderLoadingMenu();\n    }\n    // When async, the filtering is done by remote server, so we do not check for emptyMenu of combobox filterFunction\n    if (this.async) {\n      return this.emptyMenuAsync || this.optionList.length === 0 ? this._renderEmptyMenu() : nothing;\n    } else {\n      return this.optionList.length === 0 || // no options at all\n        (this.emptyMenuAfterFiltering && this.optionList.length > 0) // check if filtering results in empty menu\n        ? this._renderEmptyMenu()\n        : nothing;\n    }\n  }\n\n  render() {\n    const showClearButton =\n      (this.isFocused || this.menuIsOpen) && this.value !== \"\" && this.clearable && !this.readonly;\n    return html`\n      <div\n        class=${classMap({\n          \"form-control-container\": true,\n          \"m-width-256\": true,\n          disabled: this.disabled,\n          combobox: true\n        })}\n        @keydown=${this._handleMultiSelectKeyDown}\n      >\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput(showClearButton)} ${this._renderFeedback()}\n\n        <div\n          id=${this.dropdownMenuId}\n          class=\"dropdown-menu\"\n          tabindex=\"-1\"\n          role=\"menu\"\n          aria-label=${this.label || \"Options\"}\n          ${ref(this.menuRef)}\n          @scroll=${this._handleScroll}\n        >\n          <slot\n            id=\"default\"\n            class=${classMap({ \"d-none\": this.loading || this.emptyMenuAsync || this.optionList.length === 0 })}\n            @slotchange=${this._handleDefaultSlotChange}\n          ></slot>\n          ${this._renderFeedbackMenu()}\n        </div>\n      </div>\n\n      <!-- Required an input element for constraint validation -->\n      ${this.multiSelect\n        ? html`<input\n            .value=${live(this.value)}\n            id=\"multi-select-input-tracker\"\n            class=\"visually-hidden\"\n            ?required=${this.required}\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            .autocomplete=${this.autocomplete}\n          />`\n        : nothing}\n    `;\n  }\n}\n\ninterface ComboBoxOptionWithFlag extends SgdsComboBoxOption {\n  clickEventAdded?: boolean;\n}\n\nexport default SgdsComboBox;\n\n//TODO:\n// Replace this.optionList ?\n// During slotchange event _handleDefaultSlotChange, we try to populate this.optionList to obtain value attribute and textContent as label from <sgds-combo-box-option>\n// However, it has race conditions in certain situation like nextjs, where the last option's label (essentially the slot of <sgds-combo-box-option>) may not be available immediately.\n// To circumvent this, I avoid relying on this.optionList to perform filterFunction onInput handler and query this.options directly at the point of user typing.\n// To prevent confusion, this.optionList should ideally be removed in future iterations\n"],"mappings":"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"}
+{"version":3,"file":"sgds-combo-box.cjs.js","names":["SelectElement","nothing","formTextControlStyle","comboBoxStyle","SgdsComboBoxOption","SgdsIcon","SgdsBadge","SgdsSpinner","ref","classMap","repeat","ifDefined","live","property","queryAsync","queryAssignedElements","state","watch"],"sources":["../../../../src/components/ComboBox/sgds-combo-box.ts"],"sourcesContent":["import { live } from \"lit/directives/live.js\";\nimport { html, nothing, PropertyValueMap, TemplateResult } from \"lit\";\nimport { property, queryAssignedElements, queryAsync, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement, SgdsOptionData } from \"../../base/select-element\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsBadge } from \"../Badge/sgds-badge\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport comboBoxStyle from \"./combo-box.css\";\nimport formTextControlStyle from \"../../styles/form-text-control.css\";\nimport { SgdsComboBoxOption } from \"./sgds-combo-box-option\";\n\nimport { repeat } from \"lit/directives/repeat.js\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\nimport { ISgdsComboBoxInputEventDetail, ISgdsComboBoxCreateOptionEventDetail } from \"./types\";\n\n/**\n * Each item in the ComboBox has a label to display\n * and a value (the actual data / ID).\n */\ntype SgdsComboBoxOptionData = SgdsOptionData;\n\nexport type { ISgdsComboBoxCreateOptionEventDetail, ISgdsComboBoxInputEventDetail };\n\n/**\n * @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions\n *\n * @slot default - default slot to pass in sgds-combo-box-option\n * @slot create - Custom content for the \"Create\" option shown when `creatable` is true and no match is found. Use `sgds-input` event to dynamically update the slotted content with the current input value.\n *\n * @event sgds-select - Emitted when the combo box's selected value changes.\n * @event sgds-change - Emitted when the combo box's value changes.\n * @event sgds-input -  Emitted when user input is received and its value changes. `event.detail = { displayValue }`\n * @eventDetail {ISgdsComboBoxInputEventDetail} sgds-input\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n * @event sgds-invalid - Emitted when the combo box's invalid state is set to true.\n * @event sgds-valid - Emitted when the combo box's invalid state is set to false.\n * @event sgds-scroll-end - Emitted once when the menu is scrolled to within `scrollBottomOffset` pixels of the bottom. Resets when the user scrolls back up.\n * @event sgds-create-option - Emitted when the user selects the \"Create xxx\" option. `event.detail = { value }`\n * @eventDetail {ISgdsComboBoxCreateOptionEventDetail} sgds-create-option\n */\nexport class SgdsComboBox extends SelectElement {\n  static styles = [...SelectElement.styles, formTextControlStyle, comboBoxStyle];\n  static childName = \"sgds-combo-box-option\";\n  /** @internal */\n  static dependencies = {\n    [SgdsComboBox.childName]: SgdsComboBoxOption,\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-badge\": SgdsBadge,\n    \"sgds-spinner\": SgdsSpinner\n  };\n\n  /** If true, renders multiple checkbox selection items. If false, single-select. */\n  @property({ type: Boolean, reflect: true }) multiSelect = false;\n\n  /** If true, renders badge that fills width of combobox */\n  @property({ type: Boolean, reflect: true }) badgeFullWidth = false;\n\n  /** If true, a clear button will be enabled on focus */\n  @property({ type: Boolean, reflect: true }) clearable = false;\n\n  /** Disables native and sgds validation for the combo box. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** Enables the asynchronous behaviour of a combo box. When true, filterFunction is ignored and filtering is done remotely. */\n  @property({ type: Boolean, reflect: true }) async = false;\n\n  /** When filtering remotely and there are no results, set this to true to enable no options feedback on the menu. Applicable for async combo box only. */\n  @property({ type: Boolean, reflect: true }) emptyMenuAsync = false;\n\n  /** When true, shows a \"Create xxx\" option when the typed value does not match any existing option. Selecting it emits the `sgds-create-option` event. */\n  @property({ type: Boolean, reflect: true }) creatable = false;\n\n  /** Number of pixels from the bottom of the menu at which the sgds-scroll-end event fires. */\n  @property({ type: Number, reflect: true }) scrollBottomOffset = 0;\n\n  /** The function used to filter the menu list, given the user's input value. */\n  @property()\n  filterFunction: (inputValue: string, item: SgdsComboBoxOptionData) => boolean = (inputValue, item) => {\n    return item.label.toLowerCase().startsWith(inputValue.toLowerCase());\n  };\n\n  @queryAsync(\"input#multi-select-input-tracker\") private _multiSelectInput: Promise<HTMLInputElement>;\n\n  @queryAssignedElements({ flatten: true, selector: \"sgds-combo-box-option\" })\n  protected options: SgdsComboBoxOption[];\n\n  @state() private optionList: SgdsComboBoxOptionData[] = [];\n  @state() private emptyMenuAfterFiltering = false;\n\n  // Used to show and hide the clear button\n  @state() protected isFocused = false;\n\n  // Used to determine if the scroll reached the end with offset\n  @state() protected isScrollEnd = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.addEventListener(\"focus\", async () => {\n      this.isFocused = true;\n    });\n\n    this.addEventListener(\"blur\", async () => {\n      this.isFocused = false;\n    });\n\n    this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n      if (\n        e.key === \"Enter\" &&\n        (e.target as HTMLElement).shadowRoot?.querySelector(\".form-clearable\")?.matches(\":focus\")\n      ) {\n        this._handleClear();\n      }\n    });\n\n    this.addEventListener(\"sgds-hide\", async (e: CustomEvent) => {\n      if (!e.detail.isOutside) {\n        const sgdsInput = await this._input;\n        sgdsInput.focus();\n      }\n\n      this.options.forEach(o => {\n        o.removeAttribute(\"hidden\");\n      });\n      // reset emptyMenu state\n      this.emptyMenuAfterFiltering = false;\n    });\n  }\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.async) this.filterFunction = () => true;\n    this.menuList.forEach(o => {\n      const comboBoxOption = document.createElement(\"sgds-combo-box-option\") as SgdsComboBoxOption;\n      comboBoxOption.innerText = o.label;\n      comboBoxOption.value = o.value;\n      comboBoxOption.checkbox = this.multiSelect;\n      comboBoxOption.active = this.value.includes(o.value);\n      this.appendChild(comboBoxOption);\n    });\n    this._setupValidation(this.menuList);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n  }\n\n  protected async _handleDefaultSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({\n      flatten: true\n    }) as ComboBoxOptionWithFlag[];\n\n    assignedElements.forEach(option => {\n      // Handling of click events\n      if (option.hasAttribute(\"disabled\")) return false;\n      if (option.clickEventAdded) return false;\n\n      option.addEventListener(\"click\", (evt: PointerEvent) => {\n        evt.preventDefault();\n        const optionTarget = evt.target as SgdsComboBoxOption;\n\n        if (this.multiSelect) {\n          optionTarget.active ? this._handleItemUnselect(evt) : this._handleItemSelected(evt);\n        } else {\n          this._handleItemSelected(evt);\n        }\n\n        return false;\n      });\n      option.clickEventAdded = true;\n      option.addEventListener(\"keydown\", (evt: KeyboardEvent) => {\n        if (evt.key === \"Enter\") {\n          this.close = \"outside\";\n          const optionTarget = evt.target as SgdsComboBoxOption;\n          optionTarget.click();\n        }\n      });\n    });\n\n    /** this will trigger _updateValueAndDisplayValue */\n    await this.updateComplete;\n    const realOptions = assignedElements;\n    this.optionList = await this._getMenuListFromOptions(realOptions);\n    this._setupValidation(this.optionList);\n  }\n\n  private async _setupValidation(list: SgdsComboBoxOptionData[]) {\n    if (this.value && list.length > 0) {\n      const valueArray = this.value.split(\";\");\n      const initialSelectedItem = list.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = [...initialSelectedItem, ...this.selectedItems];\n\n      if (!this.multiSelect) {\n        this.displayValue = initialSelectedItem[0]?.label;\n      }\n    }\n    /** We want to run validation regardless of value or list present */\n    this.multiSelect ? (this.input = await this._multiSelectInput) : (this.input = await this._input);\n    this._mixinValidate(this.input);\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this.options.forEach(o => {\n      o.removeAttribute(\"hidden\");\n    });\n\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n\n    if (this.multiSelect) {\n      this._mixinValidate(this.input);\n    } else {\n      this._mixinValidate(sgdsInput);\n    }\n\n    // When value is updated by user and it doesn't map to selectedItems, we should re-map selectedItems\n    const selectedItemVal = this.selectedItems.map(val => val.value).join(\";\");\n    if (selectedItemVal !== this.value) {\n      this._updateValueAndDisplayValue(this.optionList);\n    }\n\n    if (!this._isTouched && this.value === \"\") return;\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  /** Emits sgds-change and sgds-select events. Call after setting this.value from user interaction. */\n  private _emitChangeEvents() {\n    this._mixinSetFormValue();\n    this.emit(\"sgds-change\");\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n  }\n\n  @watch(\"optionList\", { waitUntilFirstUpdate: true })\n  _handleOptionListChange() {\n    this._updateValueAndDisplayValue(this.optionList);\n  }\n\n  @watch(\"menuList\", { waitUntilFirstUpdate: true })\n  _handleMenuListChange() {\n    const newMenu = this.menuList.map(o => {\n      const comboBoxOption = document.createElement(\"sgds-combo-box-option\") as SgdsComboBoxOption;\n      comboBoxOption.innerText = o.label;\n      comboBoxOption.value = o.value;\n      comboBoxOption.checkbox = this.multiSelect;\n      comboBoxOption.active = this.value.includes(o.value);\n      return comboBoxOption;\n    });\n\n    this.replaceChildren(...newMenu);\n  }\n\n  private _updateValueAndDisplayValue(list: SgdsComboBoxOptionData[]) {\n    const valueArray = this.value.split(\";\");\n    const initialSelectedItem = list.filter(({ value }) => valueArray.includes(value));\n    this.selectedItems = [...initialSelectedItem];\n    // When the new filtered items don't match value we update it\n    const updatedValue = initialSelectedItem.map(item => item.value).join(\";\");\n    if (updatedValue !== this.value) {\n      this.value = updatedValue;\n    }\n    // Disabling this condition for async combobox so that the display value in the input will not clear when menu options changes\n    if (!this.multiSelect && !this.async) {\n      this.displayValue = initialSelectedItem[0]?.label || \"\";\n    }\n\n    this.options.forEach(o => (o.active = valueArray.includes(o.value)));\n  }\n\n  // Called each time the user types in the <sgds-input>, we set .value and show the menu\n  protected async _handleInputChange(e: CustomEvent) {\n    const input = e.target as HTMLInputElement;\n    this.displayValue = input.value;\n    this.emit<ISgdsComboBoxInputEventDetail>(\"sgds-input\", { detail: { displayValue: this.displayValue } });\n    this.invalid = false;\n    this.showMenu();\n    // reset menu list when displayValue is cleared\n    if (this.displayValue === \"\" && !this.multiSelect) {\n      this.selectedItems = [];\n      this.value = this.selectedItems.join(\";\");\n      this.options.forEach(o => (o.active = false));\n      this._emitChangeEvents();\n    }\n    // There is a race condition in certain situations where this.optionList is not fully updated during slotchange\n    // Hence instead of using this.optionList, we have to perform a query on the <sgds-combo-box-option> elements\n    const realOptions = this.options;\n    const optionList = realOptions.map(o => ({ value: o.value, label: o.textContent.trim() }));\n    this.filteredList = optionList.filter(item => this.filterFunction(this.displayValue, item));\n\n    // Filtering for slots\n    this.emptyMenuAfterFiltering = this.filteredList.length === 0;\n    const filteredValues = this.filteredList.map(l => l.value);\n\n    this.options.forEach(o => {\n      if (!filteredValues.includes(o.value)) {\n        o.hidden = true;\n      } else {\n        o.hidden = false;\n      }\n    });\n    this._syncCreateOption();\n  }\n\n  /**\n   * Called whenever an <sgds-combo-box-option> dispatches sgds-select\"\n   */\n  protected async _handleItemSelected(e: Event) {\n    const itemEl = e.target as SgdsComboBoxOption;\n    if (itemEl.disabled) return;\n\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    if (this.multiSelect) {\n      if (!this.selectedItems.some(i => i.value === foundItem.value)) {\n        this.selectedItems = [...this.selectedItems, foundItem];\n      }\n\n      this.value = this.selectedItems.map(i => i.value).join(\";\");\n      itemEl.active = true;\n      this.displayValue = \"\";\n    } else {\n      // Single-select\n      // Only update active states if a new item is selected\n      if (this.selectedItems.length === 0 || this.selectedItems[0].value !== foundItem.value) {\n        // Remove active from all options\n        this.options.forEach(o => (o.active = false));\n        itemEl.active = true;\n\n        this.selectedItems = [foundItem];\n        this.value = foundItem.value.toString();\n        this.displayValue = foundItem.label;\n        this.hideMenu();\n      }\n    }\n    this._emitChangeEvents();\n  }\n\n  private _handleItemUnselect(e: Event) {\n    const itemEl = e.target as SgdsComboBoxOption;\n    if (itemEl.disabled) return;\n\n    itemEl.removeAttribute(\"active\");\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n\n    this.selectedItems = this.selectedItems.filter(i => i.value !== foundItem.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n    this._emitChangeEvents();\n  }\n\n  private async _handleBadgeDismissed(e: CustomEvent, item: SgdsComboBoxOptionData) {\n    e.preventDefault();\n    const removedValue = item.value;\n    this.options?.forEach(o => (o.value === removedValue ? (o.active = false) : null));\n    this.selectedItems = this.selectedItems.filter(i => i.value !== item.value);\n    this.value = this.selectedItems.map(i => i.value).join(\";\");\n    this._emitChangeEvents();\n  }\n\n  private async _handleMultiSelectKeyDown(e: KeyboardEvent) {\n    // Only do this in multi-select mode\n    if (!this.multiSelect) {\n      return;\n    }\n\n    if (e.key === \"Backspace\" && this.multiSelect) {\n      if (this.displayValue.trim() === \"\" && this.selectedItems.length > 0) {\n        const removedValue = this.selectedItems[this.selectedItems.length - 1].value;\n        this.options?.forEach(o => (o.value === removedValue ? (o.active = false) : null));\n        this.selectedItems = this.selectedItems.slice(0, -1);\n        this.value = this.selectedItems.map(i => i.value).join(\";\");\n        this._emitChangeEvents();\n      }\n    }\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n\n    this.emit(\"sgds-blur\");\n\n    // When focus is moving to an element inside this component (e.g. keyboard nav to an option),\n    // preserve the typed input. If focus moves outside, clear as usual.\n    const relatedTarget = (e as FocusEvent).relatedTarget as Node | null;\n    if (\n      (this.creatable || this.multiSelect) &&\n      relatedTarget &&\n      (this.contains(relatedTarget) || this.shadowRoot?.contains(relatedTarget))\n    )\n      return;\n\n    if (this.multiSelect) {\n      const displayValueMatchedSelectedItems = this.selectedItems.filter(({ label }) => this.displayValue === label);\n      if (displayValueMatchedSelectedItems.length <= 0) {\n        this.displayValue = \"\";\n      }\n    } else {\n      // Single select\n      if (this.selectedItems.length > 0) {\n        this.displayValue = this.selectedItems[0].label;\n      } else {\n        this.displayValue = \"\";\n      }\n    }\n  }\n\n  // For clearing the value\n  protected async _handleClear() {\n    this.value = this.displayValue = \"\";\n    this.options?.forEach(o => (o.active = false));\n    this._emitChangeEvents();\n\n    const sgdsInput = await this._input;\n    sgdsInput.focus();\n    this.showMenu();\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    if (!this.multiSelect) {\n      //reset menu\n      this.options.forEach(o => {\n        o.active = o.value === this.value;\n      });\n      const initialOption = this.options.filter(o => o.value === this.value);\n      if (initialOption.length <= 0) {\n        this.displayValue = \"\";\n      } else {\n        this.displayValue = initialOption[0].textContent.trim();\n      }\n      this._mixinResetValidity(await this._input);\n    } else {\n      const valueArray = this.value.split(\";\");\n      // reset menu\n      this.options.forEach(o => {\n        o.active = valueArray.includes(o.value);\n      });\n      const initialOption = this.options.filter(o => valueArray.includes(o.value));\n      this.selectedItems = initialOption.map(o => ({ value: o.value, label: o.textContent.trim() }));\n      this._mixinResetValidity(await this._multiSelectInput);\n    }\n  }\n\n  /**\n   * Handles scroll events on the menu. Emits `sgds-scroll-end` once when the\n   * scroll position reaches within `scrollBottomOffset` pixels of the bottom.\n   * The event is suppressed until the user scrolls back up, preventing repeated\n   * emissions while the menu stays at the bottom.\n   */\n  private async _handleScroll(e: MouseEvent) {\n    const ele = e.target as HTMLElement;\n    if (ele) {\n      const endOfScroll = ele.scrollHeight - ele.clientHeight;\n      const offset = Math.max(0, this.scrollBottomOffset);\n\n      if (ele.scrollTop >= endOfScroll - offset) {\n        if (!this.isScrollEnd) {\n          this.emit(\"sgds-scroll-end\");\n        }\n        this.isScrollEnd = true;\n      } else {\n        this.isScrollEnd = false;\n      }\n    }\n  }\n\n  /** Template for the suffix icon */\n  protected suffixIconTemplate: TemplateResult = html`<sgds-icon\n    name=${this.menuIsOpen ? \"chevron-up\" : \"chevron-down\"}\n    size=\"md\"\n  ></sgds-icon>`;\n\n  protected prefixIconTemplate: TemplateResult = html`${nothing}`;\n  /**\n   * Used `repeat` helper from Lit to render instead of .map:\n   * The reassigning of value is affecting the truncation on badge as it is not triggering the slot change event.\n   *\n   * To compare this to lit-html's default handling for lists, consider reversing a large list of names:\n   * For a list created using Array.map, lit-html maintains the DOM nodes for the list items, but reassigns the values\n   * For a list created using repeat, the repeat directive reorders the existing DOM nodes, so the nodes representing the first list item move to the last position.\n   */\n  protected _renderInput(showClearButton: boolean): TemplateResult {\n    const wantFeedbackStyle = this.hasFeedback;\n    const showButton = showClearButton;\n\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        ${this.prefixIconTemplate}\n        <div class=\"combobox-input-container\">\n          ${this.multiSelect\n            ? html`\n                ${repeat(\n                  this.selectedItems,\n                  item => item.value,\n                  item =>\n                    html`<sgds-badge\n                      outlined\n                      variant=\"neutral\"\n                      show\n                      ?dismissible=${!(this.readonly || this.disabled)}\n                      ?fullwidth=${this.badgeFullWidth}\n                      @sgds-hide=${e => this._handleBadgeDismissed(e, item)}\n                      >${item.label}</sgds-badge\n                    >`\n                )}\n              `\n            : nothing}\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            id=${this._controlId}\n            name=${ifDefined(this.name)}\n            placeholder=${ifDefined(this.placeholder)}\n            aria-invalid=${this.invalid ? \"true\" : \"false\"}\n            ?autofocus=${this.autofocus}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            .value=${this.displayValue ? this.displayValue.trim() : \"\"}\n            @input=${this._handleInputChange}\n            @blur=${this._handleInputBlur}\n            @focus=${this._handleFocus}\n            aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n            aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n              ? `${this._controlId}-invalid`\n              : \"\"}\"\n            .autocomplete=${this.autocomplete}\n          />\n        </div>\n\n        ${showButton\n          ? html`\n              <sgds-icon\n                id=${`${this._controlId}-combobox-clear-button`}\n                tabindex=\"0\"\n                class=\"form-clearable\"\n                name=\"xcircle-fill\"\n                size=\"md\"\n                @click=${this._handleClear}\n                aria-label=\"Clear selections\"\n                role=\"button\"\n              ></sgds-icon>\n            `\n          : nothing}\n        ${this.suffixIconTemplate}\n      </div>\n    `;\n  }\n\n  /** Slotted elements from the `create-option` named slot. */\n  private _createOptionSlotContent: Element[] = [];\n\n  /** The typed value captured when the create option was last synced. */\n  private _createOptionValue = \"\";\n\n  /** Whether the shadow-DOM create-option container is visible. */\n  @state() private _showCreateOption = false;\n\n  /** Updates visibility of the create-option container based on creatable + filter state. */\n  private _syncCreateOption() {\n    this._showCreateOption = this.creatable && this.emptyMenuAfterFiltering && this.displayValue !== \"\";\n    if (this._showCreateOption) {\n      this._createOptionValue = this.displayValue;\n    }\n  }\n\n  /** Handles slotchange for the create-option named slot. */\n  private _handleCreateOptionSlotChange(e: Event) {\n    this._createOptionSlotContent = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n  }\n\n  /** Click handler for the create-option container. Lets interactive slotted elements (links, buttons) pass through. */\n  private _handleCreateOptionClick(evt: Event) {\n    const target = evt.composedPath()[0] as HTMLElement;\n    if (target.closest?.(\"a, button\")) return;\n\n    this.emit<ISgdsComboBoxCreateOptionEventDetail>(\"sgds-create-option\", {\n      detail: { value: this._createOptionValue }\n    });\n    this.emptyMenuAfterFiltering = false;\n    this._syncCreateOption();\n    this.hideMenu();\n  }\n\n  /** Keydown handler for the create-option container. */\n  private _handleCreateOptionKeydown(evt: KeyboardEvent) {\n    if (evt.key === \"Enter\") {\n      this._handleCreateOptionClick(evt);\n      return;\n    }\n    // ArrowUp from create option → focus last menu item\n    if (evt.key === \"ArrowUp\") {\n      evt.preventDefault();\n      const items = this._getActiveMenuItems();\n      if (items.length > 0) {\n        this._setMenuItem(items.length - 1);\n      }\n      return;\n    }\n    // ArrowDown from create option → wrap to first menu item\n    if (evt.key === \"ArrowDown\") {\n      evt.preventDefault();\n      const items = this._getActiveMenuItems();\n      if (items.length > 0) {\n        this._setMenuItem(0);\n      }\n    }\n  }\n\n  /** Override base keyboard handler to include create-option in ArrowDown/Tab navigation. */\n  protected override _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n    // When create-option div is focused, let Tab pass through naturally so it can reach\n    // interactive elements inside slotted content (e.g. links)\n    const createDiv = this.shadowRoot?.querySelector(\".create-option\") as HTMLElement;\n    if (createDiv?.matches(\":focus\") && e.key === \"Tab\") {\n      return;\n    }\n\n    if (this._showCreateOption && (e.key === \"ArrowDown\" || (e.key === \"Tab\" && !e.shiftKey))) {\n      const items = this._getActiveMenuItems();\n      if (items.length > 0) {\n        const lastItem = items[items.length - 1];\n        const lastItemFocused = lastItem.shadowRoot?.querySelector(\".dropdown-item\")?.matches(\":focus\");\n        if (lastItemFocused) {\n          e.preventDefault();\n          createDiv?.focus();\n          return;\n        }\n      }\n      // When no items exist but create option is visible (empty filter), focus it\n      if (items.length === 0) {\n        e.preventDefault();\n        createDiv?.focus();\n        return;\n      }\n    }\n    super._handleKeyboardMenuItemsEvent(e);\n  }\n\n  protected _renderFeedbackMenu() {\n    if (this.loading) {\n      return this._renderLoadingMenu();\n    }\n    // When async, the filtering is done by remote server, so we do not check for emptyMenu of combobox filterFunction\n    if (this.async) {\n      return this.emptyMenuAsync || this.optionList.length === 0 ? this._renderEmptyMenu() : nothing;\n    } else {\n      // When creatable, the create option is a slotted element — skip \"No options\"\n      if (this.creatable && this.emptyMenuAfterFiltering && this.optionList.length > 0) {\n        return nothing;\n      }\n      return this.optionList.length === 0 || (this.emptyMenuAfterFiltering && this.optionList.length > 0)\n        ? this._renderEmptyMenu()\n        : nothing;\n    }\n  }\n\n  render() {\n    const showClearButton =\n      (this.isFocused || this.menuIsOpen) && this.value !== \"\" && this.clearable && !this.readonly;\n    return html`\n      <div\n        class=${classMap({\n          \"form-control-container\": true,\n          \"m-width-256\": true,\n          disabled: this.disabled,\n          combobox: true\n        })}\n        @keydown=${this._handleMultiSelectKeyDown}\n      >\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput(showClearButton)} ${this._renderFeedback()}\n\n        <div\n          id=${this.dropdownMenuId}\n          class=\"dropdown-menu\"\n          tabindex=\"-1\"\n          role=\"menu\"\n          aria-label=${this.label || \"Options\"}\n          ${ref(this.menuRef)}\n          @scroll=${this._handleScroll}\n        >\n          <slot\n            id=\"default\"\n            class=${classMap({ \"d-none\": this.loading || this.emptyMenuAsync || this.optionList.length === 0 })}\n            @slotchange=${this._handleDefaultSlotChange}\n          ></slot>\n          ${this._showCreateOption\n            ? html`<div\n                class=${classMap({ \"create-option\": true, slotted: this._createOptionSlotContent.length > 0 })}\n                tabindex=\"0\"\n                role=\"option\"\n                @click=${this._handleCreateOptionClick}\n                @keydown=${this._handleCreateOptionKeydown}\n              >\n                ${this._createOptionSlotContent.length > 0\n                  ? html`<slot name=\"create\" @slotchange=${this._handleCreateOptionSlotChange}></slot>`\n                  : `Create \"${this.displayValue}\"`}\n              </div>`\n            : html`<slot name=\"create\" class=\"d-none\" @slotchange=${this._handleCreateOptionSlotChange}></slot>`}\n          ${this._renderFeedbackMenu()}\n        </div>\n      </div>\n\n      <!-- Required an input element for constraint validation -->\n      ${this.multiSelect\n        ? html`<input\n            .value=${live(this.value)}\n            id=\"multi-select-input-tracker\"\n            class=\"visually-hidden\"\n            ?required=${this.required}\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            .autocomplete=${this.autocomplete}\n          />`\n        : nothing}\n    `;\n  }\n}\n\ninterface ComboBoxOptionWithFlag extends SgdsComboBoxOption {\n  clickEventAdded?: boolean;\n}\n\nexport default SgdsComboBox;\n\n//TODO:\n// Replace this.optionList ?\n// During slotchange event _handleDefaultSlotChange, we try to populate this.optionList to obtain value attribute and textContent as label from <sgds-combo-box-option>\n// However, it has race conditions in certain situation like nextjs, where the last option's label (essentially the slot of <sgds-combo-box-option>) may not be available immediately.\n// To circumvent this, I avoid relying on this.optionList to perform filterFunction onInput handler and query this.options directly at the point of user typing.\n// To prevent confusion, this.optionList should ideally be removed in future iterations\n"],"mappings":"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"}