@kyndryl-design-system/shidoka-applications 2.36.0 → 2.36.2

package/components/reusable/dropdown/dropdown.js

@@ -708,7 +708,8 @@ kyn-tag-group {
   align-items: center;
   gap: 8px;
   width: 100%;
-  padding: 16px;
+  padding: 8px 16px;
+  height: 48px;
   background-color: var(--kd-color-background-forms-secondary);
   box-sizing: border-box;
 }

package/components/reusable/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport DropdownScss from './dropdown.scss';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport { deepmerge } from 'deepmerge-ts';\n\nimport './dropdownOption';\nimport '../tag';\nimport '../button';\n\nimport downIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/close-simple.svg';\n\nconst _defaultTextStrings = {\n  title: 'Dropdown',\n  selectedOptions: 'List of selected options',\n  requiredText: 'Required',\n  errorText: 'Error',\n  clearAll: 'Clear all',\n  clear: 'Clear',\n  addItem: 'Add item...',\n  add: 'Add',\n};\n\nconst KEY = {\n  Enter: 'Enter',\n  Escape: 'Escape',\n  ArrowDown: 'ArrowDown',\n  ArrowUp: 'ArrowUp',\n} as const;\n\n/**\n * Dropdown, single select.\n * @fires on-change - Captures the input event and emits the selected value and original event details.\n * @fires on-search - Capture the search input event and emits the search text.\n * @fires on-clear-all - Captures the the multi-select clear all button click event and emits the value.\n * @fires on-add-option - Captures the add button click and emits the newly added option.\n * @fires on-clear-all - Captures the the multi-select clear all button click event and emits the value.\n * @slot unnamed - Slot for dropdown options.\n * @slot tooltip - Slot for tooltip.\n */\n@customElement('kyn-dropdown')\nexport class Dropdown extends FormMixin(LitElement) {\n  static override styles = DropdownScss;\n\n  /** Label text. */\n  @property({ type: String })\n  label = '';\n\n  /** Dropdown size/height. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Dropdown inline style type. */\n  @property({ type: Boolean })\n  inline = false;\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Dropdown placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Listbox/drawer open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Makes the dropdown searchable. */\n  @property({ type: Boolean })\n  searchable = false;\n\n  /** Searchable variant filters results. */\n  @property({ type: Boolean })\n  filterSearch = false;\n\n  /** Enabled multi-select functionality. */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /** Makes the dropdown required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Visually hide the label. */\n  @property({ type: Boolean })\n  hideLabel = false;\n\n  /** Dropdown disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Hide the tags below multi-select. */\n  @property({ type: Boolean })\n  hideTags = false;\n\n  /** Adds a \"Select all\" option to the top of a multi-select dropdown. */\n  @property({ type: Boolean })\n  selectAll = false;\n\n  /** \"Select all\" text customization. */\n  @property({ type: String })\n  selectAllText = 'Select all';\n\n  /** Menu CSS min-width value. */\n  @property({ type: String })\n  menuMinWidth = 'initial';\n\n  /** Controls direction that dropdown opens. */\n  @property({ type: String })\n  openDirection: 'auto' | 'up' | 'down' = 'auto';\n\n  /** Is \"Select All\" box checked.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllChecked = false;\n\n  /** Is \"Select All\" indeterminate.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllIndeterminate = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Enables the \"Add New Option\" feature. */\n  @property({ type: Boolean })\n  allowAddOption = false;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  /**\n   * New dropdown option value.\n   * @ignore\n   */\n  @state()\n  newOptionValue = '';\n\n  /**\n   * Selected option text, automatically derived.\n   * @ignore\n   */\n  @state()\n  text = '';\n\n  /**\n   * Search input value.\n   */\n  @property({ type: String })\n  searchText = '';\n\n  /**\n   * Assistive text for screen readers.\n   * @ignore\n   */\n  @state()\n  assistiveText = 'Dropdown menu options.';\n\n  /**\n   * Queries any slotted options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option' })\n  options!: Array<any>;\n\n  /**\n   * Queries any slotted selected options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option[selected]' })\n  selectedOptions!: Array<any>;\n\n  /**\n   * Queries the .search DOM element.\n   * @ignore\n   */\n  @query('.search')\n  searchEl!: HTMLInputElement;\n\n  /**\n   * Queries the .select DOM element.\n   * @ignore\n   */\n  @query('.select')\n  buttonEl!: HTMLElement;\n\n  /**\n   * Queries the .options DOM element.\n   * @ignore\n   */\n  @query('.options')\n  listboxEl!: HTMLElement;\n\n  /**\n   * Queries the .clear-multiple DOM element.\n   * @ignore\n   */\n  @query('.clear-multiple')\n  clearMultipleEl!: HTMLElement;\n\n  /**\n   * Queries the .add-option-input DOM element.\n   * @ignore\n   */\n  @query('.add-option-input')\n  addOptionInputEl!: HTMLInputElement;\n\n  /**\n   * Open drawer upwards.\n   * @ignore\n   */\n  @state()\n  _openUpwards = false;\n\n  /**\n   * Tags value/text reference.\n   * @ignore\n   */\n  @state()\n  _tags: Array<object> = [];\n\n  /** Toggles on clicking enter key in the search input.\n   * @internal\n   */\n  searchTextEntered: any = false;\n\n  /** Toggles on clicking enter key in the search input.\n   * @internal\n   */\n  prevSearchKeydownIndex = -1;\n\n  override render() {\n    return html`\n      <div\n        class=\"dropdown\"\n        ?disabled=${this.disabled}\n        ?open=${this.open}\n        ?inline=${this.inline}\n        ?searchable=${this.searchable}\n      >\n        <label\n          id=\"label-${this.name}\"\n          class=\"label-text ${this.hideLabel || this.inline ? 'sr-only' : ''}\"\n          for=${this.name}\n          aria-disabled=${this.disabled}\n          @click=${() => this._handleLabelClick()}\n        >\n          ${this.required\n            ? html`<abbr\n                class=\"required\"\n                title=${this._textStrings.requiredText}\n                role=\"img\"\n                aria-label=${this._textStrings?.requiredText || 'Required'}\n                >*</abbr\n              >`\n            : null}\n          ${this.label}\n          <slot name=\"tooltip\"></slot>\n        </label>\n\n        <div\n          class=${classMap({\n            wrapper: true,\n            open: this.open,\n          })}\n        >\n          <div class=\"custom\">\n            <div\n              class=\"${classMap({\n                select: true,\n                'input-custom': true,\n                'size--sm': this.size === 'sm',\n                'size--lg': this.size === 'lg',\n                inline: this.inline,\n              })}\"\n              aria-labelledby=\"label-${this.name}\"\n              aria-expanded=${this.open}\n              aria-controls=\"options\"\n              role=\"combobox\"\n              id=${this.name}\n              name=${this.name}\n              title=${this._textStrings.title}\n              ?required=${this.required}\n              ?disabled=${this.disabled}\n              ?invalid=${this._isInvalid}\n              tabindex=${this.disabled ? '' : '0'}\n              @click=${() => this.handleClick()}\n              @keydown=${(e: any) => this.handleButtonKeydown(e)}\n              @mousedown=${(e: any) => {\n                if (!this.searchable) {\n                  e.preventDefault();\n                }\n              }}\n              @blur=${(e: any) => this.handleButtonBlur(e)}\n            >\n              ${this.multiple && this.value.length\n                ? html`\n                    <button\n                      class=\"clear-multiple\"\n                      aria-label=\"${this.value\n                        .length} items selected. Clear selections\"\n                      ?disabled=${this.disabled}\n                      title=${this._textStrings.clear}\n                      @click=${(e: Event) => this.handleClearMultiple(e)}\n                    >\n                      ${this.value.length}\n                      <span style=\"display:flex;\" slot=\"icon\"\n                        >${unsafeSVG(clearIcon)}</span\n                      >\n                    </button>\n                  `\n                : null}\n              ${this.searchable\n                ? html`\n                    <input\n                      class=\"search\"\n                      type=\"text\"\n                      placeholder=${this.placeholder}\n                      value=${this.searchText}\n                      ?disabled=${this.disabled}\n                      aria-disabled=${this.disabled}\n                      @keydown=${(e: any) => this.handleSearchKeydown(e)}\n                      @input=${(e: any) => this.handleSearchInput(e)}\n                      @blur=${(e: any) => this.handleSearchBlur(e)}\n                      @click=${(e: any) => this.handleSearchClick(e)}\n                    />\n                  `\n                : html`\n                    <span aria-disabled=${this.disabled}>\n                      ${this.multiple\n                        ? this.placeholder\n                        : this.value === ''\n                        ? this.placeholder\n                        : this.text}\n                    </span>\n                  `}\n\n              <span class=\"arrow-icon\">${unsafeSVG(downIcon)}</span>\n            </div>\n\n            <div\n              id=\"options\"\n              class=${classMap({\n                options: true,\n                open: this.open,\n                upwards: this._openUpwards,\n              })}\n              aria-hidden=${!this.open}\n              @keydown=${this.handleListKeydown}\n              @blur=${this.handleListBlur}\n            >\n              ${this.allowAddOption\n                ? html`\n                    <div class=\"add-option\">\n                      <input\n                        class=\"add-option-input\"\n                        type=\"text\"\n                        placeholder=${this._textStrings.addItem}\n                        .value=${this.newOptionValue}\n                        aria-label=\"Add new option\"\n                        @input=${this._handleInputNewOption}\n                        @keydown=${this._onAddOptionInputKeydown}\n                        @focus=${this._onAddOptionInputFocus}\n                      />\n                      <kyn-button\n                        type=\"button\"\n                        size=\"small\"\n                        kind=\"secondary\"\n                        @on-click=${this._handleAddOption}\n                      >\n                        ${this._textStrings.add}\n                      </kyn-button>\n                    </div>\n                  `\n                : null}\n\n              <div role=\"listbox\" aria-labelledby=\"label-${this.name}\">\n                ${this.multiple && this.selectAll\n                  ? html`\n                      <kyn-dropdown-option\n                        class=\"select-all\"\n                        value=\"selectAll\"\n                        multiple\n                        ?selected=${this.selectAllChecked}\n                        ?indeterminate=${this.selectAllIndeterminate}\n                        ?disabled=${this.disabled}\n                      >\n                        ${this.selectAllText}\n                      </kyn-dropdown-option>\n                    `\n                  : null}\n\n                <slot\n                  id=\"children\"\n                  @slotchange=${() => this.handleSlotChange()}\n                ></slot>\n              </div>\n            </div>\n          </div>\n          ${this.searchText !== ''\n            ? html`\n                <kyn-button\n                  ?disabled=${this.disabled}\n                  class=\"clear-button dropdown-clear\"\n                  kind=\"ghost\"\n                  size=\"small\"\n                  description=${this._textStrings.clearAll}\n                  @click=${(e: Event) => this.handleClear(e)}\n                >\n                  <span style=\"display:flex;\" slot=\"icon\"\n                    >${unsafeSVG(clearIcon)}</span\n                  >\n                </kyn-button>\n              `\n            : null}\n        </div>\n        ${this.renderHelperContent()}\n      </div>\n    `;\n  }\n\n  private _onAddOptionInputKeydown(e: KeyboardEvent) {\n    e.stopPropagation();\n    switch (e.key) {\n      case KEY.Enter:\n        this._handleAddOption();\n        break;\n      case KEY.Escape:\n        this.newOptionValue = '';\n        this.open = false;\n        this.buttonEl.focus();\n        break;\n      case KEY.ArrowDown:\n        this.handleKeyboard(e, 40, 'addOption');\n        break;\n      case KEY.ArrowUp:\n        this.handleKeyboard(e, 38, 'addOption');\n        break;\n    }\n  }\n\n  private _onAddOptionInputFocus() {\n    this.assistiveText = 'Add new option input';\n  }\n\n  private _handleAddOption() {\n    const v = this.newOptionValue.trim();\n    if (!v) return;\n    this.dispatchEvent(\n      new CustomEvent('on-add-option', { detail: { value: v } })\n    );\n    this.newOptionValue = '';\n  }\n\n  private renderHelperContent() {\n    return html`\n        ${\n          this.multiple && !this.hideTags && this._tags.length\n            ? html`\n                <kyn-tag-group\n                  filter\n                  role=\"list\"\n                  aria-label=${this._textStrings.selectedOptions}\n                >\n                  ${this._tags.map((tag: any) => {\n                    return html`\n                      <kyn-tag\n                        role=\"listitem\"\n                        label=${tag.text}\n                        ?disabled=${this.disabled || tag.disabled}\n                        @on-close=${() => this.handleTagClear(tag)}\n                      ></kyn-tag>\n                    `;\n                  })}\n                </kyn-tag-group>\n              `\n            : null\n        }\n        ${\n          this.caption !== ''\n            ? html`\n                <div class=\"caption\" aria-disabled=${this.disabled}>\n                  ${this.caption}\n                </div>\n              `\n            : null\n        }\n        ${\n          this._isInvalid\n            ? html`\n                <div class=\"error\">\n                  <span\n                    class=\"error-icon\"\n                    role=\"img\"\n                    title=${this._textStrings.errorText}\n                    aria-label=${this._textStrings.errorText}\n                    >${unsafeSVG(errorIcon)}</span\n                  >\n                  ${this.invalidText || this._internalValidationMsg}\n                </div>\n              `\n            : null\n        }\n\n        <div\n          class=\"assistive-text\"\n          role=\"status\"\n          aria-live=\"assertive\"\n          aria-relevant=\"additions text\"\n        >\n          ${this.assistiveText}\n        </div>\n      </div>\n    `;\n  }\n\n  override firstUpdated() {\n    // set a default placeholder if none provided\n    if (this.placeholder === '') {\n      if (this.searchable) {\n        this.placeholder = 'Search';\n      } else {\n        if (this.multiple) {\n          this.placeholder = 'Select items';\n        } else {\n          this.placeholder = 'Select an option';\n        }\n      }\n    }\n  }\n\n  private handleSlotChange() {\n    this.updateChildOptions();\n    this._updateOptions();\n    this._updateSelectedText();\n  }\n\n  private updateChildOptions() {\n    // Get all slotted kyn-dropdown-option elements\n    const slot = this.shadowRoot?.querySelector('#children') as HTMLSlotElement;\n    const options = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n    // Pass allowAddOption to each kyn-dropdown-option\n    options.forEach((option) => {\n      if (option.tagName === 'KYN-DROPDOWN-OPTION') {\n        (option as any).allowAddOption = this.allowAddOption;\n      }\n    });\n  }\n\n  private handleClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      // focus search input if searchable\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private _handleLabelClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private handleButtonKeydown(e: any) {\n    this.handleKeyboard(e, e.keyCode, 'button');\n  }\n\n  private handleListKeydown(e: any) {\n    const TAB_KEY_CODE = 9;\n\n    if (e.keyCode !== TAB_KEY_CODE) {\n      e.preventDefault();\n    }\n\n    this.handleKeyboard(e, e.keyCode, 'list');\n  }\n\n  private handleListBlur(e: FocusEvent): void {\n    this.options.forEach((o) => (o.highlighted = false));\n    const target = e.relatedTarget as HTMLElement | null;\n\n    if (\n      target &&\n      (target.closest('kyn-dropdown-option') ||\n        target.classList.contains('search') ||\n        target.closest('.add-option'))\n    ) {\n      return;\n    }\n\n    this.open = false;\n    this.assistiveText = 'Dropdown menu options.';\n  }\n\n  private handleKeyboard(e: any, keyCode: number, target: string) {\n    const SPACEBAR_KEY_CODE = [0, 32];\n    const ENTER_KEY_CODE = 13;\n    const DOWN_ARROW_KEY_CODE = 40;\n    const UP_ARROW_KEY_CODE = 38;\n    const ESCAPE_KEY_CODE = 27;\n\n    // get highlighted element + index and selected element\n    const visibleOptions = [\n      ...Array.from(this.shadowRoot?.querySelectorAll('.select-all') || []),\n      ...this.options.filter((option: any) => option.style.display !== 'none'),\n    ];\n    // visibleOptions.forEach((e) => (e.tabIndex = 0));\n\n    const highlightedEl = visibleOptions.find(\n      (option: any) => option.highlighted\n    );\n    const selectedEl = visibleOptions.find((option: any) => option.selected);\n    let highlightedIndex = highlightedEl\n      ? visibleOptions.indexOf(highlightedEl)\n      : visibleOptions.find((option: any) => option.selected)\n      ? visibleOptions.indexOf(selectedEl)\n      : 0;\n\n    // prevent page scroll on spacebar press\n    if (SPACEBAR_KEY_CODE.includes(keyCode)) {\n      e.preventDefault();\n    }\n\n    const isListboxElOpened = this.open;\n    // open the listbox\n    if (target === 'button' || target === 'addOption') {\n      let openDropdown =\n        SPACEBAR_KEY_CODE.includes(keyCode) ||\n        keyCode === ENTER_KEY_CODE ||\n        keyCode == DOWN_ARROW_KEY_CODE ||\n        keyCode == UP_ARROW_KEY_CODE;\n\n      if (e.target === this.clearMultipleEl && keyCode === ENTER_KEY_CODE) {\n        openDropdown = false;\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[highlightedIndex].selected =\n          !visibleOptions[highlightedIndex].selected;\n        highlightedIndex = 0;\n        if (keyCode !== ENTER_KEY_CODE) return;\n      }\n\n      if (openDropdown) {\n        this.open = true;\n\n        if (\n          this.allowAddOption &&\n          target === 'button' &&\n          keyCode === ENTER_KEY_CODE\n        ) {\n          setTimeout(() => {\n            this.addOptionInputEl?.focus();\n          }, 100);\n        } else {\n          // scroll to highlighted option\n          if (!this.multiple && this.value !== '') {\n            visibleOptions[highlightedIndex].scrollIntoView({\n              block: 'nearest',\n            });\n          }\n        }\n      }\n    }\n    switch (keyCode) {\n      case 0:\n      case 32:\n      case ENTER_KEY_CODE: {\n        // select highlighted option\n        visibleOptions[highlightedIndex].highlighted = true;\n        if (isListboxElOpened) {\n          if (this.multiple) {\n            visibleOptions[highlightedIndex].selected =\n              !visibleOptions[highlightedIndex].selected;\n            this._handleClick({\n              detail: {\n                value: visibleOptions[highlightedIndex].value,\n                selected: visibleOptions[highlightedIndex].selected,\n              },\n            });\n          } else {\n            visibleOptions.forEach((e) => (e.selected = false));\n            visibleOptions[highlightedIndex].selected = true;\n            this.open = false;\n            this.assistiveText = `Selected ${visibleOptions[highlightedIndex].value}`;\n          }\n        }\n        return;\n      }\n      case DOWN_ARROW_KEY_CODE: {\n        // go to next option\n        let nextIndex =\n          !highlightedEl && !selectedEl\n            ? 0\n            : highlightedIndex === visibleOptions.length - 1\n            ? 0\n            : highlightedIndex + 1;\n\n        // skip disabled options\n        if (visibleOptions[nextIndex].disabled) {\n          nextIndex =\n            nextIndex === visibleOptions.length - 1 ? 0 : nextIndex + 1;\n        }\n\n        visibleOptions[nextIndex].focus();\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[nextIndex].highlighted = true;\n\n        // scroll to option\n        visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = visibleOptions[nextIndex].text;\n        return;\n      }\n      case UP_ARROW_KEY_CODE: {\n        // go to previous option\n        let nextIndex =\n          highlightedIndex === 0\n            ? visibleOptions.length - 1\n            : highlightedIndex - 1;\n\n        // skip disabled options\n        if (visibleOptions[nextIndex].disabled) {\n          nextIndex =\n            nextIndex === 0 ? visibleOptions.length - 1 : nextIndex - 1;\n        }\n\n        visibleOptions[nextIndex].focus();\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[nextIndex].highlighted = true;\n\n        // scroll to option\n        visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = visibleOptions[nextIndex].text;\n        return;\n      }\n      case ESCAPE_KEY_CODE: {\n        // close listbox\n        this.open = false;\n\n        // restore focus\n        if (this.searchable) {\n          this.searchEl.focus();\n        } else {\n          this.buttonEl.focus();\n        }\n\n        this.assistiveText = 'Dropdown menu options.';\n        return;\n      }\n      default: {\n        return;\n      }\n    }\n  }\n\n  private handleClearMultiple(e: any) {\n    e.stopPropagation();\n\n    // clear values\n    if (this.multiple) {\n      const Slot: any = this.shadowRoot?.querySelector('slot#children');\n      const Options: Array<any> = Slot.assignedElements();\n      const DisabledSelectedOptions: Array<any> = Options.filter(\n        (option: any) => option.selected && option.disabled\n      ).map((option: any) => option.value);\n\n      this.value = DisabledSelectedOptions.length\n        ? DisabledSelectedOptions\n        : [];\n    } else {\n      this.value = '';\n    }\n\n    this._validate(true, false);\n    this._updateSelectedOptions();\n    this.emitValue();\n\n    const event = new CustomEvent('on-clear-all', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleTagClear(tag: any) {\n    // remove value\n    this.updateValue(tag.value, false);\n    this._updateSelectedOptions();\n    this.emitValue();\n  }\n\n  private handleClear(e: any) {\n    e.stopPropagation();\n\n    // reset search input text\n    this.text = '';\n    this.searchText = '';\n    this.searchEl.value = '';\n\n    this._emitSearch();\n\n    if (this.filterSearch) {\n      // reveal all options\n      this.options.map((option: any) => {\n        option.style.display = 'block';\n      });\n    }\n\n    // clear selection for single select\n    if (!this.multiple) {\n      this.value = '';\n      this._validate(true, false);\n      this._updateSelectedOptions();\n      this.emitValue();\n    }\n  }\n\n  private handleSearchClick(e: any) {\n    e.stopPropagation();\n    this.open = true;\n  }\n\n  private handleButtonBlur(e: any) {\n    // don't blur if entering listbox or search input\n    if (\n      e.relatedTarget?.localName !== 'kyn-dropdown-option' &&\n      !e.relatedTarget?.classList.contains('options') &&\n      !e.relatedTarget?.classList.contains('search') &&\n      !e.relatedTarget?.closest('.add-option')\n    ) {\n      this.open = false;\n    }\n    this._validate(true, false);\n  }\n\n  private handleSearchBlur(e: any) {\n    // don't blur if entering listbox of button\n    if (\n      !e.relatedTarget ||\n      (e.relatedTarget?.localName !== 'kyn-dropdown-option' &&\n        !e.relatedTarget?.classList.contains('options') &&\n        !e.relatedTarget?.classList.contains('select') &&\n        !e.relatedTarget?.closest('.add-option'))\n    ) {\n      this.open = false;\n    }\n    this._validate(true, false);\n  }\n\n  private handleSearchKeydown(e: any) {\n    e.stopPropagation();\n\n    const ENTER_KEY_CODE = 13;\n    const ESCAPE_KEY_CODE = 27;\n    const option = this.options.find((option) => option.highlighted);\n    const highlightedIndex = this.options.findIndex(\n      (option) => option.highlighted\n    );\n    this.searchTextEntered = false;\n    // select option\n    if (e.keyCode === ENTER_KEY_CODE) {\n      this.searchTextEntered = true;\n      if (option) {\n        if (this.prevSearchKeydownIndex !== highlightedIndex) {\n          if (this.multiple) {\n            option.selected = !option.selected;\n          } else {\n            this.options.forEach((e) => (e.selected = false));\n            option.selected = true;\n            this.open = false;\n          }\n          this.updateValue(option.value, option.selected);\n        }\n\n        if (option.selected) {\n          this.assistiveText = `Selected ${option.innerHTML}`;\n          this.prevSearchKeydownIndex = highlightedIndex;\n        } else {\n          this.assistiveText = `Deselected ${option.innerHTML}`;\n        }\n      } else {\n        this.assistiveText = 'No item matched.';\n      }\n    }\n\n    // close listbox\n    if (e.keyCode === ESCAPE_KEY_CODE) {\n      this.open = false;\n      this.buttonEl.focus();\n    }\n  }\n\n  private handleSearchInput(e: any) {\n    const value = e.target.value;\n    this.searchText = value;\n    this.open = true;\n\n    this._emitSearch();\n\n    if (this.filterSearch) {\n      // hide items that don't match\n      this.options.map((option: any) => {\n        const text = option.text;\n        if (text.toLowerCase().includes(value.toLowerCase())) {\n          option.style.display = 'block';\n        } else {\n          option.style.display = 'none';\n        }\n      });\n    } else {\n      // find matches\n      const options = this.options.filter((option: any) => {\n        const text = option.text;\n        return text.toLowerCase().startsWith(value.toLowerCase());\n      });\n\n      // reset options highlighted state\n      this.options.forEach((option) => (option.highlighted = false));\n\n      // option highlight and scroll\n      if (value !== '' && options.length) {\n        options[0].highlighted = true;\n        options[0].scrollIntoView({ block: 'nearest' });\n        if (this.searchTextEntered) this.assistiveText = 'Option Matched';\n      }\n    }\n  }\n\n  private _updateSelectedOptions() {\n    // set selected state for each option\n    this.options.forEach((option: any) => {\n      if (this.multiple) {\n        option.selected = this.value.includes(option.value);\n      } else {\n        option.selected = this.value === option.value;\n      }\n    });\n  }\n\n  private _handleClick(e: any) {\n    if (e.detail.value === 'selectAll') {\n      this.selectAllChecked = e.detail.selected;\n\n      const Slot: any = this.shadowRoot?.querySelector('slot#children');\n      const Options: Array<any> = Slot.assignedElements();\n      const DisabledSelectedOptions: Array<any> = Options.filter(\n        (option: any) => option.selected && option.disabled\n      ).map((option: any) => option.value);\n\n      if (e.detail.selected) {\n        this.value = this.options\n          .filter(\n            (option) => !option.disabled || (option.disabled && option.selected)\n          )\n          .map((option) => {\n            return option.value;\n          });\n        this.assistiveText = 'Selected all items.';\n      } else {\n        this.value = DisabledSelectedOptions.length\n          ? DisabledSelectedOptions\n          : [];\n        this.assistiveText = 'Deselected all items.';\n      }\n\n      this._validate(true, false);\n    } else {\n      this.updateValue(e.detail.value, e.detail.selected);\n      this.assistiveText = e.detail.selected\n        ? `Selected ${e.detail.value}`\n        : `Deselected ${e.detail.value}`;\n    }\n\n    this._updateSelectedOptions();\n\n    // close listbox\n    if (!this.multiple) {\n      this.open = false;\n    }\n\n    // emit selected value\n    this.emitValue();\n  }\n\n  private _handleBlur(e: any) {\n    const relatedTarget = e.detail.origEvent.relatedTarget;\n\n    if (\n      !relatedTarget ||\n      (relatedTarget?.localName !== 'kyn-dropdown-option' &&\n        relatedTarget.localName !== 'kyn-dropdown')\n    ) {\n      this.open = false;\n    }\n  }\n\n  private _handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // preserve FormMixin connectedCallback function\n    this._onConnected();\n\n    document.addEventListener('click', (e) => this._handleClickOut(e));\n\n    // capture child options click event\n    this.addEventListener('on-click', (e: any) => this._handleClick(e));\n    this.addEventListener('on-remove-option', () => this._handleRemoveOption());\n\n    // capture child options blur event\n    this.addEventListener('on-blur', (e: any) => this._handleBlur(e));\n  }\n\n  override disconnectedCallback() {\n    // preserve FormMixin disconnectedCallback function\n    this._onDisconnected();\n\n    document.removeEventListener('click', (e) => this._handleClickOut(e));\n    this.removeEventListener('on-click', (e: any) => this._handleClick(e));\n    this.removeEventListener('on-remove-option', () =>\n      this._handleRemoveOption()\n    );\n    this.removeEventListener('on-blur', (e: any) => this._handleBlur(e));\n\n    super.disconnectedCallback();\n  }\n\n  private updateValue(value: string, selected = false) {\n    // set value\n    if (this.multiple) {\n      const values =\n        this.value === '' ? [] : JSON.parse(JSON.stringify(this.value));\n\n      // update array\n      if (selected) {\n        values.push(value);\n      } else {\n        const index = values.indexOf(value);\n        values.splice(index, 1);\n      }\n\n      this.value = values;\n    } else {\n      this.value = value;\n    }\n\n    this._validate(true, false);\n\n    // reset focus\n    if (!this.multiple) {\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing:\n        this.required &&\n        (!this.value ||\n          (this.multiple && !this.value.length) ||\n          (!this.multiple && this.value === '')),\n    };\n\n    // set validationMessage\n    const InternalMsg =\n      this.required && !this.value.length ? 'Please fill out this field.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    // set validity on custom element, anchor to buttonEl\n    this._internals.setValidity(Validity, ValidationMessage, this.buttonEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg = InternalMsg;\n    }\n\n    // focus the buttonEl to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  private emitValue() {\n    const event = new CustomEvent('on-change', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _emitSearch() {\n    const event = new CustomEvent('on-search', {\n      detail: {\n        searchText: this.searchText,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n\n  override updated(changedProps: any) {\n    // preserve FormMixin updated function\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('value')) {\n      this._updateOptions();\n\n      const Slot: any = this.shadowRoot?.querySelector('slot#children');\n      const Options: Array<any> = Slot.assignedElements().filter(\n        (option: any) => !option.disabled\n      );\n      const SelectedOptions: Array<any> = Options.filter(\n        (option: any) => option.selected\n      );\n\n      // sync \"Select All\" checkbox state\n      this.selectAllChecked = SelectedOptions.length === Options.length;\n\n      // sync \"Select All\" indeterminate state\n      this.selectAllIndeterminate =\n        SelectedOptions.length < Options.length && SelectedOptions.length > 0;\n\n      this._updateTags();\n      this._updateSelectedText();\n    }\n\n    if (changedProps.has('open') || changedProps.has('openDirection')) {\n      if (this.open && !this.searchable) {\n        // focus listbox if not searchable\n        this.listboxEl.focus({ preventScroll: true });\n        this.assistiveText =\n          'Selecting items. Use up and down arrow keys to navigate.';\n      }\n\n      if (this.openDirection === 'up') {\n        this._openUpwards = true;\n      } else if (this.openDirection === 'down') {\n        this._openUpwards = false;\n      } else if (this.open) {\n        const openThreshold = 0.6;\n        this._openUpwards =\n          this.buttonEl.getBoundingClientRect().top >\n          window.innerHeight * openThreshold;\n      }\n\n      if (this.open && !this.multiple) {\n        this.options\n          .find((option) => option.selected)\n          ?.scrollIntoView({ block: 'nearest' });\n      }\n    }\n\n    if (changedProps.has('multiple')) {\n      // set multiple for each option\n      this.options.forEach((option: any) => {\n        option.multiple = this.multiple;\n      });\n    }\n\n    if (changedProps.has('searchText') && this.searchEl) {\n      this.searchEl.value = this.searchText;\n    }\n\n    if (changedProps.has('allowAddOption')) {\n      this.updateChildOptions();\n    }\n  }\n\n  // add selected options to Tags array\n  private _updateTags() {\n    if (this.multiple) {\n      const Options: any = Array.from(\n        this.querySelectorAll('kyn-dropdown-option')\n      );\n      const Tags: Array<object> = [];\n\n      if (Options) {\n        Options.forEach((option: any) => {\n          if (option.selected) {\n            Tags.push({\n              value: option.value,\n              text: option.textContent,\n              disabled: option.disabled,\n            });\n          }\n        });\n\n        this._tags = Tags;\n      }\n    }\n  }\n\n  private _updateOptions() {\n    const Options: any = Array.from(\n      this.querySelectorAll('kyn-dropdown-option')\n    );\n\n    Options.forEach((option: any) => {\n      // set option multiple state\n      option.multiple = this.multiple;\n\n      if (this.multiple) {\n        const Selected = this.value.includes(option.value);\n        // set option selected state\n        option.selected = Selected;\n      } else {\n        option.selected = this.value === option.value;\n      }\n    });\n  }\n\n  private _handleInputNewOption(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.newOptionValue = target.value;\n  }\n\n  private _handleRemoveOption() {\n    this.assistiveText = 'MY option removed ';\n    setTimeout(() => {\n      this.open = false;\n      this.buttonEl.focus();\n    }, 100);\n  }\n\n  private _updateSelectedText() {\n    // update selected option text\n    const AllOptions: any = Array.from(\n      this.querySelectorAll('kyn-dropdown-option')\n    );\n\n    if (!this.multiple) {\n      if (AllOptions.length && this.value !== '') {\n        const option = AllOptions.find(\n          (option: any) => option.value === this.value\n        );\n        if (option) {\n          this.text = option.textContent.trim();\n        } else {\n          this.text = '';\n          console.warn(`No dropdown option found with value: ${this.value}`);\n        }\n      }\n\n      // set search input value\n      if (this.searchable && this.text) {\n        this.searchText = this.text === this.placeholder ? '' : this.text;\n        this.searchEl.value = this.searchText;\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-dropdown': Dropdown;\n  }\n}\n"],"names":["_defaultTextStrings","title","selectedOptions","requiredText","errorText","clearAll","clear","addItem","add","KEY","Dropdown","FormMixin","LitElement","constructor","this","label","size","inline","caption","placeholder","open","searchable","filterSearch","multiple","required","hideLabel","disabled","hideTags","selectAll","selectAllText","menuMinWidth","openDirection","selectAllChecked","selectAllIndeterminate","textStrings","allowAddOption","_textStrings","newOptionValue","text","searchText","assistiveText","_openUpwards","_tags","searchTextEntered","prevSearchKeydownIndex","render","html","name","_handleLabelClick","_a","classMap","wrapper","select","_isInvalid","handleClick","e","handleButtonKeydown","preventDefault","handleButtonBlur","value","length","handleClearMultiple","unsafeSVG","clearIcon","handleSearchKeydown","handleSearchInput","handleSearchBlur","handleSearchClick","downIcon","options","upwards","handleListKeydown","handleListBlur","_handleInputNewOption","_onAddOptionInputKeydown","_onAddOptionInputFocus","_handleAddOption","handleSlotChange","handleClear","renderHelperContent","stopPropagation","key","buttonEl","focus","handleKeyboard","v","trim","dispatchEvent","CustomEvent","detail","map","tag","handleTagClear","errorIcon","invalidText","_internalValidationMsg","firstUpdated","updateChildOptions","_updateOptions","_updateSelectedText","shadowRoot","querySelector","assignedElements","flatten","forEach","option","tagName","searchEl","keyCode","o","highlighted","target","relatedTarget","closest","classList","contains","SPACEBAR_KEY_CODE","visibleOptions","Array","from","querySelectorAll","filter","style","display","highlightedEl","find","selectedEl","selected","highlightedIndex","indexOf","includes","isListboxElOpened","openDropdown","clearMultipleEl","setTimeout","addOptionInputEl","scrollIntoView","block","_handleClick","nextIndex","DisabledSelectedOptions","_validate","_updateSelectedOptions","emitValue","event","updateValue","_emitSearch","localName","_b","_c","_d","findIndex","innerHTML","toLowerCase","startsWith","_handleBlur","origEvent","_handleClickOut","composedPath","connectedCallback","super","_onConnected","document","addEventListener","_handleRemoveOption","disconnectedCallback","_onDisconnected","removeEventListener","values","JSON","parse","stringify","push","index","splice","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","_internals","setValidity","reportValidity","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","Options","SelectedOptions","_updateTags","listboxEl","preventScroll","openThreshold","getBoundingClientRect","top","window","innerHeight","Tags","textContent","Selected","AllOptions","console","warn","styles","DropdownScss","__decorate","property","type","String","prototype","Boolean","Object","state","queryAssignedElements","selector","query","customElement"],"mappings":"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"}
+{"version":3,"file":"dropdown.js","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport DropdownScss from './dropdown.scss';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport { deepmerge } from 'deepmerge-ts';\n\nimport './dropdownOption';\nimport '../tag';\nimport '../button';\n\nimport downIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/close-simple.svg';\n\nconst _defaultTextStrings = {\n  title: 'Dropdown',\n  selectedOptions: 'List of selected options',\n  requiredText: 'Required',\n  errorText: 'Error',\n  clearAll: 'Clear all',\n  clear: 'Clear',\n  addItem: 'Add item...',\n  add: 'Add',\n};\n\nconst KEY = {\n  Enter: 'Enter',\n  Escape: 'Escape',\n  ArrowDown: 'ArrowDown',\n  ArrowUp: 'ArrowUp',\n} as const;\n\n/**\n * Dropdown, single select.\n * @fires on-change - Captures the input event and emits the selected value and original event details.\n * @fires on-search - Capture the search input event and emits the search text.\n * @fires on-clear-all - Captures the the multi-select clear all button click event and emits the value.\n * @fires on-add-option - Captures the add button click and emits the newly added option.\n * @fires on-clear-all - Captures the the multi-select clear all button click event and emits the value.\n * @slot unnamed - Slot for dropdown options.\n * @slot tooltip - Slot for tooltip.\n */\n@customElement('kyn-dropdown')\nexport class Dropdown extends FormMixin(LitElement) {\n  static override styles = DropdownScss;\n\n  /** Label text. */\n  @property({ type: String })\n  label = '';\n\n  /** Dropdown size/height. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Dropdown inline style type. */\n  @property({ type: Boolean })\n  inline = false;\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Dropdown placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Listbox/drawer open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Makes the dropdown searchable. */\n  @property({ type: Boolean })\n  searchable = false;\n\n  /** Searchable variant filters results. */\n  @property({ type: Boolean })\n  filterSearch = false;\n\n  /** Enabled multi-select functionality. */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /** Makes the dropdown required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Visually hide the label. */\n  @property({ type: Boolean })\n  hideLabel = false;\n\n  /** Dropdown disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Hide the tags below multi-select. */\n  @property({ type: Boolean })\n  hideTags = false;\n\n  /** Adds a \"Select all\" option to the top of a multi-select dropdown. */\n  @property({ type: Boolean })\n  selectAll = false;\n\n  /** \"Select all\" text customization. */\n  @property({ type: String })\n  selectAllText = 'Select all';\n\n  /** Menu CSS min-width value. */\n  @property({ type: String })\n  menuMinWidth = 'initial';\n\n  /** Controls direction that dropdown opens. */\n  @property({ type: String })\n  openDirection: 'auto' | 'up' | 'down' = 'auto';\n\n  /** Is \"Select All\" box checked.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllChecked = false;\n\n  /** Is \"Select All\" indeterminate.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllIndeterminate = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Enables the \"Add New Option\" feature. */\n  @property({ type: Boolean })\n  allowAddOption = false;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  /**\n   * New dropdown option value.\n   * @ignore\n   */\n  @state()\n  newOptionValue = '';\n\n  /**\n   * Selected option text, automatically derived.\n   * @ignore\n   */\n  @state()\n  text = '';\n\n  /**\n   * Search input value.\n   */\n  @property({ type: String })\n  searchText = '';\n\n  /**\n   * Assistive text for screen readers.\n   * @ignore\n   */\n  @state()\n  assistiveText = 'Dropdown menu options.';\n\n  /**\n   * Queries any slotted options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option' })\n  options!: Array<any>;\n\n  /**\n   * Queries any slotted selected options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option[selected]' })\n  selectedOptions!: Array<any>;\n\n  /**\n   * Queries the .search DOM element.\n   * @ignore\n   */\n  @query('.search')\n  searchEl!: HTMLInputElement;\n\n  /**\n   * Queries the .select DOM element.\n   * @ignore\n   */\n  @query('.select')\n  buttonEl!: HTMLElement;\n\n  /**\n   * Queries the .options DOM element.\n   * @ignore\n   */\n  @query('.options')\n  listboxEl!: HTMLElement;\n\n  /**\n   * Queries the .clear-multiple DOM element.\n   * @ignore\n   */\n  @query('.clear-multiple')\n  clearMultipleEl!: HTMLElement;\n\n  /**\n   * Queries the .add-option-input DOM element.\n   * @ignore\n   */\n  @query('.add-option-input')\n  addOptionInputEl!: HTMLInputElement;\n\n  /**\n   * Open drawer upwards.\n   * @ignore\n   */\n  @state()\n  _openUpwards = false;\n\n  /**\n   * Tags value/text reference.\n   * @ignore\n   */\n  @state()\n  _tags: Array<object> = [];\n\n  /** Toggles on clicking enter key in the search input.\n   * @internal\n   */\n  searchTextEntered: any = false;\n\n  /** Toggles on clicking enter key in the search input.\n   * @internal\n   */\n  prevSearchKeydownIndex = -1;\n\n  override render() {\n    return html`\n      <div\n        class=\"dropdown\"\n        ?disabled=${this.disabled}\n        ?open=${this.open}\n        ?inline=${this.inline}\n        ?searchable=${this.searchable}\n      >\n        <label\n          id=\"label-${this.name}\"\n          class=\"label-text ${this.hideLabel || this.inline ? 'sr-only' : ''}\"\n          for=${this.name}\n          aria-disabled=${this.disabled}\n          @click=${() => this._handleLabelClick()}\n        >\n          ${this.required\n            ? html`<abbr\n                class=\"required\"\n                title=${this._textStrings.requiredText}\n                role=\"img\"\n                aria-label=${this._textStrings?.requiredText || 'Required'}\n                >*</abbr\n              >`\n            : null}\n          ${this.label}\n          <slot name=\"tooltip\"></slot>\n        </label>\n\n        <div\n          class=${classMap({\n            wrapper: true,\n            open: this.open,\n          })}\n        >\n          <div class=\"custom\">\n            <div\n              class=\"${classMap({\n                select: true,\n                'input-custom': true,\n                'size--sm': this.size === 'sm',\n                'size--lg': this.size === 'lg',\n                inline: this.inline,\n              })}\"\n              aria-labelledby=\"label-${this.name}\"\n              aria-expanded=${this.open}\n              aria-controls=\"options\"\n              role=\"combobox\"\n              id=${this.name}\n              name=${this.name}\n              title=${this._textStrings.title}\n              ?required=${this.required}\n              ?disabled=${this.disabled}\n              ?invalid=${this._isInvalid}\n              tabindex=${this.disabled ? '' : '0'}\n              @click=${() => this.handleClick()}\n              @keydown=${(e: any) => this.handleButtonKeydown(e)}\n              @mousedown=${(e: any) => {\n                if (!this.searchable) {\n                  e.preventDefault();\n                }\n              }}\n              @blur=${(e: any) => this.handleButtonBlur(e)}\n            >\n              ${this.multiple && this.value.length\n                ? html`\n                    <button\n                      class=\"clear-multiple\"\n                      aria-label=\"${this.value\n                        .length} items selected. Clear selections\"\n                      ?disabled=${this.disabled}\n                      title=${this._textStrings.clear}\n                      @click=${(e: Event) => this.handleClearMultiple(e)}\n                    >\n                      ${this.value.length}\n                      <span style=\"display:flex;\" slot=\"icon\"\n                        >${unsafeSVG(clearIcon)}</span\n                      >\n                    </button>\n                  `\n                : null}\n              ${this.searchable\n                ? html`\n                    <input\n                      class=\"search\"\n                      type=\"text\"\n                      placeholder=${this.placeholder}\n                      value=${this.searchText}\n                      ?disabled=${this.disabled}\n                      aria-disabled=${this.disabled}\n                      @keydown=${(e: any) => this.handleSearchKeydown(e)}\n                      @input=${(e: any) => this.handleSearchInput(e)}\n                      @blur=${(e: any) => this.handleSearchBlur(e)}\n                      @click=${(e: any) => this.handleSearchClick(e)}\n                    />\n                  `\n                : html`\n                    <span aria-disabled=${this.disabled}>\n                      ${this.multiple\n                        ? this.placeholder\n                        : this.value === ''\n                        ? this.placeholder\n                        : this.text}\n                    </span>\n                  `}\n\n              <span class=\"arrow-icon\">${unsafeSVG(downIcon)}</span>\n            </div>\n\n            <div\n              id=\"options\"\n              class=${classMap({\n                options: true,\n                open: this.open,\n                upwards: this._openUpwards,\n              })}\n              aria-hidden=${!this.open}\n              @keydown=${this.handleListKeydown}\n              @blur=${this.handleListBlur}\n            >\n              ${this.allowAddOption\n                ? html`\n                    <div class=\"add-option\">\n                      <input\n                        class=\"add-option-input\"\n                        type=\"text\"\n                        placeholder=${this._textStrings.addItem}\n                        .value=${this.newOptionValue}\n                        aria-label=\"Add new option\"\n                        @input=${this._handleInputNewOption}\n                        @keydown=${this._onAddOptionInputKeydown}\n                        @focus=${this._onAddOptionInputFocus}\n                      />\n                      <kyn-button\n                        type=\"button\"\n                        size=\"small\"\n                        kind=\"secondary\"\n                        @on-click=${this._handleAddOption}\n                      >\n                        ${this._textStrings.add}\n                      </kyn-button>\n                    </div>\n                  `\n                : null}\n\n              <div role=\"listbox\" aria-labelledby=\"label-${this.name}\">\n                ${this.multiple && this.selectAll\n                  ? html`\n                      <kyn-dropdown-option\n                        class=\"select-all\"\n                        value=\"selectAll\"\n                        multiple\n                        ?selected=${this.selectAllChecked}\n                        ?indeterminate=${this.selectAllIndeterminate}\n                        ?disabled=${this.disabled}\n                      >\n                        ${this.selectAllText}\n                      </kyn-dropdown-option>\n                    `\n                  : null}\n\n                <slot\n                  id=\"children\"\n                  @slotchange=${() => this.handleSlotChange()}\n                ></slot>\n              </div>\n            </div>\n          </div>\n          ${this.searchText !== ''\n            ? html`\n                <kyn-button\n                  ?disabled=${this.disabled}\n                  class=\"clear-button dropdown-clear\"\n                  kind=\"ghost\"\n                  size=\"small\"\n                  description=${this._textStrings.clearAll}\n                  @click=${(e: Event) => this.handleClear(e)}\n                >\n                  <span style=\"display:flex;\" slot=\"icon\"\n                    >${unsafeSVG(clearIcon)}</span\n                  >\n                </kyn-button>\n              `\n            : null}\n        </div>\n        ${this.renderHelperContent()}\n      </div>\n    `;\n  }\n\n  private _onAddOptionInputKeydown(e: KeyboardEvent) {\n    e.stopPropagation();\n    switch (e.key) {\n      case KEY.Enter:\n        this._handleAddOption();\n        break;\n      case KEY.Escape:\n        this.newOptionValue = '';\n        this.open = false;\n        this.buttonEl.focus();\n        break;\n      case KEY.ArrowDown:\n        this.handleKeyboard(e, 40, 'addOption');\n        break;\n      case KEY.ArrowUp:\n        this.handleKeyboard(e, 38, 'addOption');\n        break;\n    }\n  }\n\n  private _onAddOptionInputFocus() {\n    this.assistiveText = 'Add new option input';\n  }\n\n  private _handleAddOption() {\n    const v = this.newOptionValue.trim();\n    if (!v) return;\n    this.dispatchEvent(\n      new CustomEvent('on-add-option', { detail: { value: v } })\n    );\n    this.newOptionValue = '';\n  }\n\n  private renderHelperContent() {\n    return html`\n        ${\n          this.multiple && !this.hideTags && this._tags.length\n            ? html`\n                <kyn-tag-group\n                  filter\n                  role=\"list\"\n                  aria-label=${this._textStrings.selectedOptions}\n                >\n                  ${this._tags.map((tag: any) => {\n                    return html`\n                      <kyn-tag\n                        role=\"listitem\"\n                        label=${tag.text}\n                        ?disabled=${this.disabled || tag.disabled}\n                        @on-close=${() => this.handleTagClear(tag)}\n                      ></kyn-tag>\n                    `;\n                  })}\n                </kyn-tag-group>\n              `\n            : null\n        }\n        ${\n          this.caption !== ''\n            ? html`\n                <div class=\"caption\" aria-disabled=${this.disabled}>\n                  ${this.caption}\n                </div>\n              `\n            : null\n        }\n        ${\n          this._isInvalid\n            ? html`\n                <div class=\"error\">\n                  <span\n                    class=\"error-icon\"\n                    role=\"img\"\n                    title=${this._textStrings.errorText}\n                    aria-label=${this._textStrings.errorText}\n                    >${unsafeSVG(errorIcon)}</span\n                  >\n                  ${this.invalidText || this._internalValidationMsg}\n                </div>\n              `\n            : null\n        }\n\n        <div\n          class=\"assistive-text\"\n          role=\"status\"\n          aria-live=\"assertive\"\n          aria-relevant=\"additions text\"\n        >\n          ${this.assistiveText}\n        </div>\n      </div>\n    `;\n  }\n\n  override firstUpdated() {\n    // set a default placeholder if none provided\n    if (this.placeholder === '') {\n      if (this.searchable) {\n        this.placeholder = 'Search';\n      } else {\n        if (this.multiple) {\n          this.placeholder = 'Select items';\n        } else {\n          this.placeholder = 'Select an option';\n        }\n      }\n    }\n  }\n\n  private handleSlotChange() {\n    this.updateChildOptions();\n    this._updateOptions();\n    this._updateSelectedText();\n  }\n\n  private updateChildOptions() {\n    // Get all slotted kyn-dropdown-option elements\n    const slot = this.shadowRoot?.querySelector('#children') as HTMLSlotElement;\n    const options = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n    // Pass allowAddOption to each kyn-dropdown-option\n    options.forEach((option) => {\n      if (option.tagName === 'KYN-DROPDOWN-OPTION') {\n        (option as any).allowAddOption = this.allowAddOption;\n      }\n    });\n  }\n\n  private handleClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      // focus search input if searchable\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private _handleLabelClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private handleButtonKeydown(e: any) {\n    this.handleKeyboard(e, e.keyCode, 'button');\n  }\n\n  private handleListKeydown(e: any) {\n    const TAB_KEY_CODE = 9;\n\n    if (e.keyCode !== TAB_KEY_CODE) {\n      e.preventDefault();\n    }\n\n    this.handleKeyboard(e, e.keyCode, 'list');\n  }\n\n  private handleListBlur(e: FocusEvent): void {\n    this.options.forEach((o) => (o.highlighted = false));\n    const target = e.relatedTarget as HTMLElement | null;\n\n    if (\n      target &&\n      (target.closest('kyn-dropdown-option') ||\n        target.classList.contains('search') ||\n        target.closest('.add-option'))\n    ) {\n      return;\n    }\n\n    this.open = false;\n    this.assistiveText = 'Dropdown menu options.';\n  }\n\n  private handleKeyboard(e: any, keyCode: number, target: string) {\n    const SPACEBAR_KEY_CODE = [0, 32];\n    const ENTER_KEY_CODE = 13;\n    const DOWN_ARROW_KEY_CODE = 40;\n    const UP_ARROW_KEY_CODE = 38;\n    const ESCAPE_KEY_CODE = 27;\n\n    // get highlighted element + index and selected element\n    const visibleOptions = [\n      ...Array.from(this.shadowRoot?.querySelectorAll('.select-all') || []),\n      ...this.options.filter((option: any) => option.style.display !== 'none'),\n    ];\n    // visibleOptions.forEach((e) => (e.tabIndex = 0));\n\n    const highlightedEl = visibleOptions.find(\n      (option: any) => option.highlighted\n    );\n    const selectedEl = visibleOptions.find((option: any) => option.selected);\n    let highlightedIndex = highlightedEl\n      ? visibleOptions.indexOf(highlightedEl)\n      : visibleOptions.find((option: any) => option.selected)\n      ? visibleOptions.indexOf(selectedEl)\n      : 0;\n\n    // prevent page scroll on spacebar press\n    if (SPACEBAR_KEY_CODE.includes(keyCode)) {\n      e.preventDefault();\n    }\n\n    const isListboxElOpened = this.open;\n    // open the listbox\n    if (target === 'button' || target === 'addOption') {\n      let openDropdown =\n        SPACEBAR_KEY_CODE.includes(keyCode) ||\n        keyCode === ENTER_KEY_CODE ||\n        keyCode == DOWN_ARROW_KEY_CODE ||\n        keyCode == UP_ARROW_KEY_CODE;\n\n      if (e.target === this.clearMultipleEl && keyCode === ENTER_KEY_CODE) {\n        openDropdown = false;\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[highlightedIndex].selected =\n          !visibleOptions[highlightedIndex].selected;\n        highlightedIndex = 0;\n        if (keyCode !== ENTER_KEY_CODE) return;\n      }\n\n      if (openDropdown) {\n        this.open = true;\n\n        if (\n          this.allowAddOption &&\n          target === 'button' &&\n          keyCode === ENTER_KEY_CODE\n        ) {\n          setTimeout(() => {\n            this.addOptionInputEl?.focus();\n          }, 100);\n        } else {\n          // scroll to highlighted option\n          if (!this.multiple && this.value !== '') {\n            visibleOptions[highlightedIndex].scrollIntoView({\n              block: 'nearest',\n            });\n          }\n        }\n      }\n    }\n    switch (keyCode) {\n      case 0:\n      case 32:\n      case ENTER_KEY_CODE: {\n        // select highlighted option\n        visibleOptions[highlightedIndex].highlighted = true;\n        if (isListboxElOpened) {\n          if (this.multiple) {\n            visibleOptions[highlightedIndex].selected =\n              !visibleOptions[highlightedIndex].selected;\n            this._handleClick({\n              detail: {\n                value: visibleOptions[highlightedIndex].value,\n                selected: visibleOptions[highlightedIndex].selected,\n              },\n            });\n          } else {\n            visibleOptions.forEach((e) => (e.selected = false));\n            visibleOptions[highlightedIndex].selected = true;\n            this.open = false;\n            this.assistiveText = `Selected ${visibleOptions[highlightedIndex].value}`;\n          }\n        }\n        return;\n      }\n      case DOWN_ARROW_KEY_CODE: {\n        // go to next option\n        let nextIndex =\n          !highlightedEl && !selectedEl\n            ? 0\n            : highlightedIndex === visibleOptions.length - 1\n            ? 0\n            : highlightedIndex + 1;\n\n        // skip disabled options\n        if (visibleOptions[nextIndex].disabled) {\n          nextIndex =\n            nextIndex === visibleOptions.length - 1 ? 0 : nextIndex + 1;\n        }\n\n        visibleOptions[nextIndex].focus();\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[nextIndex].highlighted = true;\n\n        // scroll to option\n        visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = visibleOptions[nextIndex].text;\n        return;\n      }\n      case UP_ARROW_KEY_CODE: {\n        // go to previous option\n        let nextIndex =\n          highlightedIndex === 0\n            ? visibleOptions.length - 1\n            : highlightedIndex - 1;\n\n        // skip disabled options\n        if (visibleOptions[nextIndex].disabled) {\n          nextIndex =\n            nextIndex === 0 ? visibleOptions.length - 1 : nextIndex - 1;\n        }\n\n        visibleOptions[nextIndex].focus();\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[nextIndex].highlighted = true;\n\n        // scroll to option\n        visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = visibleOptions[nextIndex].text;\n        return;\n      }\n      case ESCAPE_KEY_CODE: {\n        // close listbox\n        this.open = false;\n\n        // restore focus\n        if (this.searchable) {\n          this.searchEl.focus();\n        } else {\n          this.buttonEl.focus();\n        }\n\n        this.assistiveText = 'Dropdown menu options.';\n        return;\n      }\n      default: {\n        return;\n      }\n    }\n  }\n\n  private handleClearMultiple(e: any) {\n    e.stopPropagation();\n\n    // clear values\n    if (this.multiple) {\n      const Slot: any = this.shadowRoot?.querySelector('slot#children');\n      const Options: Array<any> = Slot.assignedElements();\n      const DisabledSelectedOptions: Array<any> = Options.filter(\n        (option: any) => option.selected && option.disabled\n      ).map((option: any) => option.value);\n\n      this.value = DisabledSelectedOptions.length\n        ? DisabledSelectedOptions\n        : [];\n    } else {\n      this.value = '';\n    }\n\n    this._validate(true, false);\n    this._updateSelectedOptions();\n    this.emitValue();\n\n    const event = new CustomEvent('on-clear-all', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleTagClear(tag: any) {\n    // remove value\n    this.updateValue(tag.value, false);\n    this._updateSelectedOptions();\n    this.emitValue();\n  }\n\n  private handleClear(e: any) {\n    e.stopPropagation();\n\n    // reset search input text\n    this.text = '';\n    this.searchText = '';\n    this.searchEl.value = '';\n\n    this._emitSearch();\n\n    if (this.filterSearch) {\n      // reveal all options\n      this.options.map((option: any) => {\n        option.style.display = 'block';\n      });\n    }\n\n    // clear selection for single select\n    if (!this.multiple) {\n      this.value = '';\n      this._validate(true, false);\n      this._updateSelectedOptions();\n      this.emitValue();\n    }\n  }\n\n  private handleSearchClick(e: any) {\n    e.stopPropagation();\n    this.open = true;\n  }\n\n  private handleButtonBlur(e: any) {\n    // don't blur if entering listbox or search input\n    if (\n      e.relatedTarget?.localName !== 'kyn-dropdown-option' &&\n      !e.relatedTarget?.classList.contains('options') &&\n      !e.relatedTarget?.classList.contains('search') &&\n      !e.relatedTarget?.closest('.add-option')\n    ) {\n      this.open = false;\n    }\n    this._validate(true, false);\n  }\n\n  private handleSearchBlur(e: any) {\n    // don't blur if entering listbox of button\n    if (\n      !e.relatedTarget ||\n      (e.relatedTarget?.localName !== 'kyn-dropdown-option' &&\n        !e.relatedTarget?.classList.contains('options') &&\n        !e.relatedTarget?.classList.contains('select') &&\n        !e.relatedTarget?.closest('.add-option'))\n    ) {\n      this.open = false;\n    }\n    this._validate(true, false);\n  }\n\n  private handleSearchKeydown(e: any) {\n    e.stopPropagation();\n\n    const ENTER_KEY_CODE = 13;\n    const ESCAPE_KEY_CODE = 27;\n    const option = this.options.find((option) => option.highlighted);\n    const highlightedIndex = this.options.findIndex(\n      (option) => option.highlighted\n    );\n    this.searchTextEntered = false;\n    // select option\n    if (e.keyCode === ENTER_KEY_CODE) {\n      this.searchTextEntered = true;\n      if (option) {\n        if (this.prevSearchKeydownIndex !== highlightedIndex) {\n          if (this.multiple) {\n            option.selected = !option.selected;\n          } else {\n            this.options.forEach((e) => (e.selected = false));\n            option.selected = true;\n            this.open = false;\n          }\n          this.updateValue(option.value, option.selected);\n        }\n\n        if (option.selected) {\n          this.assistiveText = `Selected ${option.innerHTML}`;\n          this.prevSearchKeydownIndex = highlightedIndex;\n        } else {\n          this.assistiveText = `Deselected ${option.innerHTML}`;\n        }\n      } else {\n        this.assistiveText = 'No item matched.';\n      }\n    }\n\n    // close listbox\n    if (e.keyCode === ESCAPE_KEY_CODE) {\n      this.open = false;\n      this.buttonEl.focus();\n    }\n  }\n\n  private handleSearchInput(e: any) {\n    const value = e.target.value;\n    this.searchText = value;\n    this.open = true;\n\n    this._emitSearch();\n\n    if (this.filterSearch) {\n      // hide items that don't match\n      this.options.map((option: any) => {\n        const text = option.text;\n        if (text.toLowerCase().includes(value.toLowerCase())) {\n          option.style.display = 'block';\n        } else {\n          option.style.display = 'none';\n        }\n      });\n    } else {\n      // find matches\n      const options = this.options.filter((option: any) => {\n        const text = option.text;\n        return text.toLowerCase().startsWith(value.toLowerCase());\n      });\n\n      // reset options highlighted state\n      this.options.forEach((option) => (option.highlighted = false));\n\n      // option highlight and scroll\n      if (value !== '' && options.length) {\n        options[0].highlighted = true;\n        options[0].scrollIntoView({ block: 'nearest' });\n        if (this.searchTextEntered) this.assistiveText = 'Option Matched';\n      }\n    }\n  }\n\n  private _updateSelectedOptions() {\n    // set selected state for each option\n    this.options.forEach((option: any) => {\n      if (this.multiple) {\n        option.selected = this.value.includes(option.value);\n      } else {\n        option.selected = this.value === option.value;\n      }\n    });\n  }\n\n  private _handleClick(e: any) {\n    if (e.detail.value === 'selectAll') {\n      this.selectAllChecked = e.detail.selected;\n\n      const Slot: any = this.shadowRoot?.querySelector('slot#children');\n      const Options: Array<any> = Slot.assignedElements();\n      const DisabledSelectedOptions: Array<any> = Options.filter(\n        (option: any) => option.selected && option.disabled\n      ).map((option: any) => option.value);\n\n      if (e.detail.selected) {\n        this.value = this.options\n          .filter(\n            (option) => !option.disabled || (option.disabled && option.selected)\n          )\n          .map((option) => {\n            return option.value;\n          });\n        this.assistiveText = 'Selected all items.';\n      } else {\n        this.value = DisabledSelectedOptions.length\n          ? DisabledSelectedOptions\n          : [];\n        this.assistiveText = 'Deselected all items.';\n      }\n\n      this._validate(true, false);\n    } else {\n      this.updateValue(e.detail.value, e.detail.selected);\n      this.assistiveText = e.detail.selected\n        ? `Selected ${e.detail.value}`\n        : `Deselected ${e.detail.value}`;\n    }\n\n    this._updateSelectedOptions();\n\n    // close listbox\n    if (!this.multiple) {\n      this.open = false;\n    }\n\n    // emit selected value\n    this.emitValue();\n  }\n\n  private _handleBlur(e: any) {\n    const relatedTarget = e.detail.origEvent.relatedTarget;\n\n    if (\n      !relatedTarget ||\n      (relatedTarget?.localName !== 'kyn-dropdown-option' &&\n        relatedTarget.localName !== 'kyn-dropdown')\n    ) {\n      this.open = false;\n    }\n  }\n\n  private _handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // preserve FormMixin connectedCallback function\n    this._onConnected();\n\n    document.addEventListener('click', (e) => this._handleClickOut(e));\n\n    // capture child options click event\n    this.addEventListener('on-click', (e: any) => this._handleClick(e));\n    this.addEventListener('on-remove-option', () => this._handleRemoveOption());\n\n    // capture child options blur event\n    this.addEventListener('on-blur', (e: any) => this._handleBlur(e));\n  }\n\n  override disconnectedCallback() {\n    // preserve FormMixin disconnectedCallback function\n    this._onDisconnected();\n\n    document.removeEventListener('click', (e) => this._handleClickOut(e));\n    this.removeEventListener('on-click', (e: any) => this._handleClick(e));\n    this.removeEventListener('on-remove-option', () =>\n      this._handleRemoveOption()\n    );\n    this.removeEventListener('on-blur', (e: any) => this._handleBlur(e));\n\n    super.disconnectedCallback();\n  }\n\n  private updateValue(value: string, selected = false) {\n    // set value\n    if (this.multiple) {\n      const values =\n        this.value === '' ? [] : JSON.parse(JSON.stringify(this.value));\n\n      // update array\n      if (selected) {\n        values.push(value);\n      } else {\n        const index = values.indexOf(value);\n        values.splice(index, 1);\n      }\n\n      this.value = values;\n    } else {\n      this.value = value;\n    }\n\n    this._validate(true, false);\n\n    // reset focus\n    if (!this.multiple) {\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing:\n        this.required &&\n        (!this.value ||\n          (this.multiple && !this.value.length) ||\n          (!this.multiple && this.value === '')),\n    };\n\n    // set validationMessage\n    const InternalMsg =\n      this.required && !this.value.length ? 'Please fill out this field.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    // set validity on custom element, anchor to buttonEl\n    this._internals.setValidity(Validity, ValidationMessage, this.buttonEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg = InternalMsg;\n    }\n\n    // focus the buttonEl to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  private emitValue() {\n    const event = new CustomEvent('on-change', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _emitSearch() {\n    const event = new CustomEvent('on-search', {\n      detail: {\n        searchText: this.searchText,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n\n  override updated(changedProps: any) {\n    // preserve FormMixin updated function\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('value')) {\n      this._updateOptions();\n\n      const Slot: any = this.shadowRoot?.querySelector('slot#children');\n      const Options: Array<any> = Slot.assignedElements().filter(\n        (option: any) => !option.disabled\n      );\n      const SelectedOptions: Array<any> = Options.filter(\n        (option: any) => option.selected\n      );\n\n      // sync \"Select All\" checkbox state\n      this.selectAllChecked = SelectedOptions.length === Options.length;\n\n      // sync \"Select All\" indeterminate state\n      this.selectAllIndeterminate =\n        SelectedOptions.length < Options.length && SelectedOptions.length > 0;\n\n      this._updateTags();\n      this._updateSelectedText();\n    }\n\n    if (changedProps.has('open') || changedProps.has('openDirection')) {\n      if (this.open && !this.searchable) {\n        // focus listbox if not searchable\n        this.listboxEl.focus({ preventScroll: true });\n        this.assistiveText =\n          'Selecting items. Use up and down arrow keys to navigate.';\n      }\n\n      if (this.openDirection === 'up') {\n        this._openUpwards = true;\n      } else if (this.openDirection === 'down') {\n        this._openUpwards = false;\n      } else if (this.open) {\n        const openThreshold = 0.6;\n        this._openUpwards =\n          this.buttonEl.getBoundingClientRect().top >\n          window.innerHeight * openThreshold;\n      }\n\n      if (this.open && !this.multiple) {\n        this.options\n          .find((option) => option.selected)\n          ?.scrollIntoView({ block: 'nearest' });\n      }\n    }\n\n    if (changedProps.has('multiple')) {\n      // set multiple for each option\n      this.options.forEach((option: any) => {\n        option.multiple = this.multiple;\n      });\n    }\n\n    if (changedProps.has('searchText') && this.searchEl) {\n      this.searchEl.value = this.searchText;\n    }\n\n    if (changedProps.has('allowAddOption')) {\n      this.updateChildOptions();\n    }\n  }\n\n  // add selected options to Tags array\n  private _updateTags() {\n    if (this.multiple) {\n      const Options: any = Array.from(\n        this.querySelectorAll('kyn-dropdown-option')\n      );\n      const Tags: Array<object> = [];\n\n      if (Options) {\n        Options.forEach((option: any) => {\n          if (option.selected) {\n            Tags.push({\n              value: option.value,\n              text: option.textContent,\n              disabled: option.disabled,\n            });\n          }\n        });\n\n        this._tags = Tags;\n      }\n    }\n  }\n\n  private _updateOptions() {\n    const Options: any = Array.from(\n      this.querySelectorAll('kyn-dropdown-option')\n    );\n\n    Options.forEach((option: any) => {\n      // set option multiple state\n      option.multiple = this.multiple;\n\n      if (this.multiple) {\n        const Selected = this.value.includes(option.value);\n        // set option selected state\n        option.selected = Selected;\n      } else {\n        option.selected = this.value === option.value;\n      }\n    });\n  }\n\n  private _handleInputNewOption(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.newOptionValue = target.value;\n  }\n\n  private _handleRemoveOption() {\n    this.assistiveText = 'MY option removed ';\n    setTimeout(() => {\n      this.open = false;\n      this.buttonEl.focus();\n    }, 100);\n  }\n\n  private _updateSelectedText() {\n    // update selected option text\n    const AllOptions: any = Array.from(\n      this.querySelectorAll('kyn-dropdown-option')\n    );\n\n    if (!this.multiple) {\n      if (AllOptions.length && this.value !== '') {\n        const option = AllOptions.find(\n          (option: any) => option.value === this.value\n        );\n        if (option) {\n          this.text = option.textContent.trim();\n        } else {\n          this.text = '';\n          console.warn(`No dropdown option found with value: ${this.value}`);\n        }\n      }\n\n      // set search input value\n      if (this.searchable && this.text) {\n        this.searchText = this.text === this.placeholder ? '' : this.text;\n        this.searchEl.value = this.searchText;\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-dropdown': Dropdown;\n  }\n}\n"],"names":["_defaultTextStrings","title","selectedOptions","requiredText","errorText","clearAll","clear","addItem","add","KEY","Dropdown","FormMixin","LitElement","constructor","this","label","size","inline","caption","placeholder","open","searchable","filterSearch","multiple","required","hideLabel","disabled","hideTags","selectAll","selectAllText","menuMinWidth","openDirection","selectAllChecked","selectAllIndeterminate","textStrings","allowAddOption","_textStrings","newOptionValue","text","searchText","assistiveText","_openUpwards","_tags","searchTextEntered","prevSearchKeydownIndex","render","html","name","_handleLabelClick","_a","classMap","wrapper","select","_isInvalid","handleClick","e","handleButtonKeydown","preventDefault","handleButtonBlur","value","length","handleClearMultiple","unsafeSVG","clearIcon","handleSearchKeydown","handleSearchInput","handleSearchBlur","handleSearchClick","downIcon","options","upwards","handleListKeydown","handleListBlur","_handleInputNewOption","_onAddOptionInputKeydown","_onAddOptionInputFocus","_handleAddOption","handleSlotChange","handleClear","renderHelperContent","stopPropagation","key","buttonEl","focus","handleKeyboard","v","trim","dispatchEvent","CustomEvent","detail","map","tag","handleTagClear","errorIcon","invalidText","_internalValidationMsg","firstUpdated","updateChildOptions","_updateOptions","_updateSelectedText","shadowRoot","querySelector","assignedElements","flatten","forEach","option","tagName","searchEl","keyCode","o","highlighted","target","relatedTarget","closest","classList","contains","SPACEBAR_KEY_CODE","visibleOptions","Array","from","querySelectorAll","filter","style","display","highlightedEl","find","selectedEl","selected","highlightedIndex","indexOf","includes","isListboxElOpened","openDropdown","clearMultipleEl","setTimeout","addOptionInputEl","scrollIntoView","block","_handleClick","nextIndex","DisabledSelectedOptions","_validate","_updateSelectedOptions","emitValue","event","updateValue","_emitSearch","localName","_b","_c","_d","findIndex","innerHTML","toLowerCase","startsWith","_handleBlur","origEvent","_handleClickOut","composedPath","connectedCallback","super","_onConnected","document","addEventListener","_handleRemoveOption","disconnectedCallback","_onDisconnected","removeEventListener","values","JSON","parse","stringify","push","index","splice","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","_internals","setValidity","reportValidity","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","Options","SelectedOptions","_updateTags","listboxEl","preventScroll","openThreshold","getBoundingClientRect","top","window","innerHeight","Tags","textContent","Selected","AllOptions","console","warn","styles","DropdownScss","__decorate","property","type","String","prototype","Boolean","Object","state","queryAssignedElements","selector","query","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsBA,MAAMA,EAAsB,CAC1BC,MAAO,WACPC,gBAAiB,2BACjBC,aAAc,WACdC,UAAW,QACXC,SAAU,YACVC,MAAO,QACPC,QAAS,cACTC,IAAK,OAGDC,EACG,QADHA,EAEI,SAFJA,EAGO,YAHPA,EAIK,UAcE,IAAAC,EAAN,cAAuBC,EAAUC,IAAjC,WAAAC,uBAKLC,KAAKC,MAAG,GAIRD,KAAIE,KAAG,KAIPF,KAAMG,QAAG,EAITH,KAAOI,QAAG,GAIVJ,KAAWK,YAAG,GAIdL,KAAIM,MAAG,EAIPN,KAAUO,YAAG,EAIbP,KAAYQ,cAAG,EAIfR,KAAQS,UAAG,EAIXT,KAAQU,UAAG,EAIXV,KAASW,WAAG,EAIZX,KAAQY,UAAG,EAIXZ,KAAQa,UAAG,EAIXb,KAASc,WAAG,EAIZd,KAAae,cAAG,aAIhBf,KAAYgB,aAAG,UAIfhB,KAAaiB,cAA2B,OAMxCjB,KAAgBkB,kBAAG,EAMnBlB,KAAsBmB,wBAAG,EAIzBnB,KAAWoB,YAAGlC,EAIdc,KAAcqB,gBAAG,EAMjBrB,KAAYsB,aAAGpC,EAOfc,KAAcuB,eAAG,GAOjBvB,KAAIwB,KAAG,GAMPxB,KAAUyB,WAAG,GAObzB,KAAa0B,cAAG,yBAwDhB1B,KAAY2B,cAAG,EAOf3B,KAAK4B,MAAkB,GAKvB5B,KAAiB6B,mBAAQ,EAKzB7B,KAAsB8B,wBAAI,CA4hC3B,CA1hCU,MAAAC,SACP,OAAOC,CAAI;;;oBAGKhC,KAAKY;gBACTZ,KAAKM;kBACHN,KAAKG;sBACDH,KAAKO;;;sBAGLP,KAAKiC;8BACGjC,KAAKW,WAAaX,KAAKG,OAAS,UAAY;gBAC1DH,KAAKiC;0BACKjC,KAAKY;mBACZ,IAAMZ,KAAKkC;;YAElBlC,KAAKU,SACHsB,CAAI;;wBAEMhC,KAAKsB,aAAajC;;8BAEM,UAAnBW,KAAKsB,oBAAc,IAAAa,OAAA,EAAAA,EAAA9C,eAAgB;;iBAGlD;YACFW,KAAKC;;;;;kBAKCmC,EAAS,CACfC,SAAS,EACT/B,KAAMN,KAAKM;;;;uBAKA8B,EAAS,CAChBE,QAAQ,EACR,gBAAgB,EAChB,WAA0B,OAAdtC,KAAKE,KACjB,WAA0B,OAAdF,KAAKE,KACjBC,OAAQH,KAAKG;uCAEUH,KAAKiC;8BACdjC,KAAKM;;;mBAGhBN,KAAKiC;qBACHjC,KAAKiC;sBACJjC,KAAKsB,aAAanC;0BACda,KAAKU;0BACLV,KAAKY;yBACNZ,KAAKuC;yBACLvC,KAAKY,SAAW,GAAK;uBACvB,IAAMZ,KAAKwC;yBACRC,GAAWzC,KAAK0C,oBAAoBD;2BAClCA,IACPzC,KAAKO,YACRkC,EAAEE,gBACH;sBAEMF,GAAWzC,KAAK4C,iBAAiBH;;gBAExCzC,KAAKS,UAAYT,KAAK6C,MAAMC,OAC1Bd,CAAI;;;oCAGchC,KAAK6C,MAChBC;kCACS9C,KAAKY;8BACTZ,KAAKsB,aAAa9B;+BAChBiD,GAAazC,KAAK+C,oBAAoBN;;wBAE9CzC,KAAK6C,MAAMC;;2BAERE,EAAUC;;;oBAInB;gBACFjD,KAAKO,WACHyB,CAAI;;;;oCAIchC,KAAKK;8BACXL,KAAKyB;kCACDzB,KAAKY;sCACDZ,KAAKY;iCACT6B,GAAWzC,KAAKkD,oBAAoBT;+BACtCA,GAAWzC,KAAKmD,kBAAkBV;8BACnCA,GAAWzC,KAAKoD,iBAAiBX;+BAChCA,GAAWzC,KAAKqD,kBAAkBZ;;oBAGhDT,CAAI;0CACoBhC,KAAKY;wBACvBZ,KAAKS,UAEY,KAAfT,KAAK6C,MADL7C,KAAKK,YAGLL,KAAKwB;;;;yCAIUwB,EAAUM;;;;;sBAK7BlB,EAAS,CACfmB,SAAS,EACTjD,KAAMN,KAAKM,KACXkD,QAASxD,KAAK2B;6BAED3B,KAAKM;yBACTN,KAAKyD;sBACRzD,KAAK0D;;gBAEX1D,KAAKqB,eACHW,CAAI;;;;;sCAKgBhC,KAAKsB,aAAa7B;iCACvBO,KAAKuB;;iCAELvB,KAAK2D;mCACH3D,KAAK4D;iCACP5D,KAAK6D;;;;;;oCAMF7D,KAAK8D;;0BAEf9D,KAAKsB,aAAa5B;;;oBAI1B;;2DAEyCM,KAAKiC;kBAC9CjC,KAAKS,UAAYT,KAAKc,UACpBkB,CAAI;;;;;oCAKYhC,KAAKkB;yCACAlB,KAAKmB;oCACVnB,KAAKY;;0BAEfZ,KAAKe;;sBAGX;;;;gCAIY,IAAMf,KAAK+D;;;;;YAKX,KAApB/D,KAAKyB,WACHO,CAAI;;8BAEYhC,KAAKY;;;;gCAIHZ,KAAKsB,aAAa/B;2BACtBkD,GAAazC,KAAKgE,YAAYvB;;;uBAGnCO,EAAUC;;;gBAInB;;UAEJjD,KAAKiE;;KAGZ,CAEO,wBAAAL,CAAyBnB,GAE/B,OADAA,EAAEyB,kBACMzB,EAAE0B,KACR,KAAKxE,EACHK,KAAK8D,mBACL,MACF,KAAKnE,EACHK,KAAKuB,eAAiB,GACtBvB,KAAKM,MAAO,EACZN,KAAKoE,SAASC,QACd,MACF,KAAK1E,EACHK,KAAKsE,eAAe7B,EAAG,GAAI,aAC3B,MACF,KAAK9C,EACHK,KAAKsE,eAAe7B,EAAG,GAAI,aAGhC,CAEO,sBAAAoB,GACN7D,KAAK0B,cAAgB,sBACtB,CAEO,gBAAAoC,GACN,MAAMS,EAAIvE,KAAKuB,eAAeiD,OACzBD,IACLvE,KAAKyE,cACH,IAAIC,YAAY,gBAAiB,CAAEC,OAAQ,CAAE9B,MAAO0B,MAEtDvE,KAAKuB,eAAiB,GACvB,CAEO,mBAAA0C,GACN,OAAOjC,CAAI;UAELhC,KAAKS,WAAaT,KAAKa,UAAYb,KAAK4B,MAAMkB,OAC1Cd,CAAI;;;;+BAIahC,KAAKsB,aAAalC;;oBAE7BY,KAAK4B,MAAMgD,KAAKC,GACT7C,CAAI;;;gCAGC6C,EAAIrD;oCACAxB,KAAKY,UAAYiE,EAAIjE;oCACrB,IAAMZ,KAAK8E,eAAeD;;;;gBAMhD;UAGa,KAAjB7E,KAAKI,QACD4B,CAAI;qDACmChC,KAAKY;oBACtCZ,KAAKI;;gBAGX;UAGJJ,KAAKuC,WACDP,CAAI;;;;;4BAKUhC,KAAKsB,aAAahC;iCACbU,KAAKsB,aAAahC;uBAC5B0D,EAAU+B;;oBAEb/E,KAAKgF,aAAehF,KAAKiF;;gBAG/B;;;;;;;;YASFjF,KAAK0B;;;KAId,CAEQ,YAAAwD,GAEkB,KAArBlF,KAAKK,cACHL,KAAKO,WACPP,KAAKK,YAAc,SAEfL,KAAKS,SACPT,KAAKK,YAAc,eAEnBL,KAAKK,YAAc,mBAI1B,CAEO,gBAAA0D,GACN/D,KAAKmF,qBACLnF,KAAKoF,iBACLpF,KAAKqF,qBACN,CAEO,kBAAAF,UAEsB,QAAfhD,EAAAnC,KAAKsF,kBAAU,IAAAnD,OAAA,EAAAA,EAAEoD,cAAc,cACvBC,iBAAiB,CAAEC,SAAS,IAGzCC,SAASC,IACQ,wBAAnBA,EAAOC,UACRD,EAAetE,eAAiBrB,KAAKqB,eACvC,GAEJ,CAEO,WAAAmB,GACDxC,KAAKY,WACRZ,KAAKM,MAAQN,KAAKM,KAGdN,KAAKO,WACPP,KAAK6F,SAASxB,QAEdrE,KAAKoE,SAASC,QAGnB,CAEO,iBAAAnC,GACDlC,KAAKY,WACRZ,KAAKM,MAAQN,KAAKM,KAEdN,KAAKO,WACPP,KAAK6F,SAASxB,QAEdrE,KAAKoE,SAASC,QAGnB,CAEO,mBAAA3B,CAAoBD,GAC1BzC,KAAKsE,eAAe7B,EAAGA,EAAEqD,QAAS,SACnC,CAEO,iBAAArC,CAAkBhB,GACH,IAEjBA,EAAEqD,SACJrD,EAAEE,iBAGJ3C,KAAKsE,eAAe7B,EAAGA,EAAEqD,QAAS,OACnC,CAEO,cAAApC,CAAejB,GACrBzC,KAAKuD,QAAQmC,SAASK,GAAOA,EAAEC,aAAc,IAC7C,MAAMC,EAASxD,EAAEyD,cAGfD,IACCA,EAAOE,QAAQ,wBACdF,EAAOG,UAAUC,SAAS,WAC1BJ,EAAOE,QAAQ,kBAKnBnG,KAAKM,MAAO,EACZN,KAAK0B,cAAgB,yBACtB,CAEO,cAAA4C,CAAe7B,EAAQqD,EAAiBG,SAC9C,MAAMK,EAAoB,CAAC,EAAG,IAOxBC,EAAiB,IAClBC,MAAMC,MAAoB,UAAfzG,KAAKsF,kBAAU,IAAAnD,OAAA,EAAAA,EAAEuE,iBAAiB,iBAAkB,OAC/D1G,KAAKuD,QAAQoD,QAAQhB,GAAyC,SAAzBA,EAAOiB,MAAMC,WAIjDC,EAAgBP,EAAeQ,MAClCpB,GAAgBA,EAAOK,cAEpBgB,EAAaT,EAAeQ,MAAMpB,GAAgBA,EAAOsB,WAC/D,IAAIC,EAAmBJ,EACnBP,EAAeY,QAAQL,GACvBP,EAAeQ,MAAMpB,GAAgBA,EAAOsB,WAC5CV,EAAeY,QAAQH,GACvB,EAGAV,EAAkBc,SAAStB,IAC7BrD,EAAEE,iBAGJ,MAAM0E,EAAoBrH,KAAKM,KAE/B,GAAe,WAAX2F,GAAkC,cAAXA,EAAwB,CACjD,IAAIqB,EACFhB,EAAkBc,SAAStB,IA/BR,KAgCnBA,GA/BwB,IAgCxBA,GA/BsB,IAgCtBA,EAEF,GAAIrD,EAAEwD,SAAWjG,KAAKuH,iBApCD,KAoCoBzB,IACvCwB,GAAe,EACff,EAAeW,GAAkBlB,aAAc,EAC/CO,EAAeW,GAAkBD,UAC9BV,EAAeW,GAAkBD,SACpCC,EAAmB,EAzCA,KA0CfpB,GAA4B,OAG9BwB,IACFtH,KAAKM,MAAO,EAGVN,KAAKqB,gBACM,WAAX4E,GAlDiB,KAmDjBH,EAEA0B,YAAW,WACc,QAAvBrF,EAAAnC,KAAKyH,wBAAkB,IAAAtF,GAAAA,EAAAkC,OAAO,GAC7B,KAGErE,KAAKS,UAA2B,KAAfT,KAAK6C,OACzB0D,EAAeW,GAAkBQ,eAAe,CAC9CC,MAAO,YAKhB,CACD,OAAQ7B,GACN,KAAK,EACL,KAAK,GACL,KArEqB,GAyFnB,OAlBAS,EAAeW,GAAkBlB,aAAc,OAC3CqB,IACErH,KAAKS,UACP8F,EAAeW,GAAkBD,UAC9BV,EAAeW,GAAkBD,SACpCjH,KAAK4H,aAAa,CAChBjD,OAAQ,CACN9B,MAAO0D,EAAeW,GAAkBrE,MACxCoE,SAAUV,EAAeW,GAAkBD,cAI/CV,EAAeb,SAASjD,GAAOA,EAAEwE,UAAW,IAC5CV,EAAeW,GAAkBD,UAAW,EAC5CjH,KAAKM,MAAO,EACZN,KAAK0B,cAAgB,YAAY6E,EAAeW,GAAkBrE,WAKxE,KA1F0B,GA0FA,CAExB,IAAIgF,EACDf,GAAkBE,EAEfE,IAAqBX,EAAezD,OAAS,EAC7C,EACAoE,EAAmB,EAHnB,EAmBN,OAbIX,EAAesB,GAAWjH,WAC5BiH,EACEA,IAActB,EAAezD,OAAS,EAAI,EAAI+E,EAAY,GAG9DtB,EAAesB,GAAWxD,QAC1BkC,EAAeW,GAAkBlB,aAAc,EAC/CO,EAAesB,GAAW7B,aAAc,EAGxCO,EAAesB,GAAWH,eAAe,CAAEC,MAAO,iBAElD3H,KAAK0B,cAAgB6E,EAAesB,GAAWrG,KAEhD,CACD,KAlHwB,GAkHA,CAEtB,IAAIqG,EACmB,IAArBX,EACIX,EAAezD,OAAS,EACxBoE,EAAmB,EAgBzB,OAbIX,EAAesB,GAAWjH,WAC5BiH,EACgB,IAAdA,EAAkBtB,EAAezD,OAAS,EAAI+E,EAAY,GAG9DtB,EAAesB,GAAWxD,QAC1BkC,EAAeW,GAAkBlB,aAAc,EAC/CO,EAAesB,GAAW7B,aAAc,EAGxCO,EAAesB,GAAWH,eAAe,CAAEC,MAAO,iBAElD3H,KAAK0B,cAAgB6E,EAAesB,GAAWrG,KAEhD,CACD,KAxIsB,GAoJpB,OAVAxB,KAAKM,MAAO,EAGRN,KAAKO,WACPP,KAAK6F,SAASxB,QAEdrE,KAAKoE,SAASC,aAGhBrE,KAAK0B,cAAgB,0BAGvB,QACE,OAGL,CAEO,mBAAAqB,CAAoBN,SAI1B,GAHAA,EAAEyB,kBAGElE,KAAKS,SAAU,CACjB,MAEMqH,GAF2B,QAAf3F,EAAAnC,KAAKsF,kBAAU,IAAAnD,OAAA,EAAAA,EAAEoD,cAAc,kBAChBC,mBACmBmB,QACjDhB,GAAgBA,EAAOsB,UAAYtB,EAAO/E,WAC3CgE,KAAKe,GAAgBA,EAAO9C,QAE9B7C,KAAK6C,MAAQiF,EAAwBhF,OACjCgF,EACA,EACL,MACC9H,KAAK6C,MAAQ,GAGf7C,KAAK+H,WAAU,GAAM,GACrB/H,KAAKgI,yBACLhI,KAAKiI,YAEL,MAAMC,EAAQ,IAAIxD,YAAY,eAAgB,CAC5CC,OAAQ,CACN9B,MAAO7C,KAAK6C,SAGhB7C,KAAKyE,cAAcyD,EACpB,CAEO,cAAApD,CAAeD,GAErB7E,KAAKmI,YAAYtD,EAAIhC,OAAO,GAC5B7C,KAAKgI,yBACLhI,KAAKiI,WACN,CAEO,WAAAjE,CAAYvB,GAClBA,EAAEyB,kBAGFlE,KAAKwB,KAAO,GACZxB,KAAKyB,WAAa,GAClBzB,KAAK6F,SAAShD,MAAQ,GAEtB7C,KAAKoI,cAEDpI,KAAKQ,cAEPR,KAAKuD,QAAQqB,KAAKe,IAChBA,EAAOiB,MAAMC,QAAU,OAAO,IAK7B7G,KAAKS,WACRT,KAAK6C,MAAQ,GACb7C,KAAK+H,WAAU,GAAM,GACrB/H,KAAKgI,yBACLhI,KAAKiI,YAER,CAEO,iBAAA5E,CAAkBZ,GACxBA,EAAEyB,kBACFlE,KAAKM,MAAO,CACb,CAEO,gBAAAsC,CAAiBH,eAGU,yBAAd,UAAjBA,EAAEyD,qBAAe,IAAA/D,OAAA,EAAAA,EAAAkG,aACD,QAAfC,EAAA7F,EAAEyD,qBAAa,IAAAoC,OAAA,EAAAA,EAAElC,UAAUC,SAAS,cACrB,QAAfkC,EAAA9F,EAAEyD,qBAAa,IAAAqC,OAAA,EAAAA,EAAEnC,UAAUC,SAAS,aACnB,QAAjBmC,EAAA/F,EAAEyD,qBAAe,IAAAsC,OAAA,EAAAA,EAAArC,QAAQ,kBAE1BnG,KAAKM,MAAO,GAEdN,KAAK+H,WAAU,GAAM,EACtB,CAEO,gBAAA3E,CAAiBX,eAGpBA,EAAEyD,gBAC6B,yBAAd,UAAjBzD,EAAEyD,qBAAe,IAAA/D,OAAA,EAAAA,EAAAkG,aACA,QAAfC,EAAA7F,EAAEyD,qBAAa,IAAAoC,OAAA,EAAAA,EAAElC,UAAUC,SAAS,cACrB,QAAfkC,EAAA9F,EAAEyD,qBAAa,IAAAqC,OAAA,EAAAA,EAAEnC,UAAUC,SAAS,aACrB,QAAfmC,EAAA/F,EAAEyD,qBAAa,IAAAsC,OAAA,EAAAA,EAAErC,QAAQ,mBAE5BnG,KAAKM,MAAO,GAEdN,KAAK+H,WAAU,GAAM,EACtB,CAEO,mBAAA7E,CAAoBT,GAC1BA,EAAEyB,kBAEF,MAEMyB,EAAS3F,KAAKuD,QAAQwD,MAAMpB,GAAWA,EAAOK,cAC9CkB,EAAmBlH,KAAKuD,QAAQkF,WACnC9C,GAAWA,EAAOK,cAErBhG,KAAK6B,mBAAoB,EANF,KAQnBY,EAAEqD,UACJ9F,KAAK6B,mBAAoB,EACrB8D,GACE3F,KAAK8B,yBAA2BoF,IAC9BlH,KAAKS,SACPkF,EAAOsB,UAAYtB,EAAOsB,UAE1BjH,KAAKuD,QAAQmC,SAASjD,GAAOA,EAAEwE,UAAW,IAC1CtB,EAAOsB,UAAW,EAClBjH,KAAKM,MAAO,GAEdN,KAAKmI,YAAYxC,EAAO9C,MAAO8C,EAAOsB,WAGpCtB,EAAOsB,UACTjH,KAAK0B,cAAgB,YAAYiE,EAAO+C,YACxC1I,KAAK8B,uBAAyBoF,GAE9BlH,KAAK0B,cAAgB,cAAciE,EAAO+C,aAG5C1I,KAAK0B,cAAgB,oBA5BD,KAiCpBe,EAAEqD,UACJ9F,KAAKM,MAAO,EACZN,KAAKoE,SAASC,QAEjB,CAEO,iBAAAlB,CAAkBV,GACxB,MAAMI,EAAQJ,EAAEwD,OAAOpD,MAMvB,GALA7C,KAAKyB,WAAaoB,EAClB7C,KAAKM,MAAO,EAEZN,KAAKoI,cAEDpI,KAAKQ,aAEPR,KAAKuD,QAAQqB,KAAKe,IACHA,EAAOnE,KACXmH,cAAcvB,SAASvE,EAAM8F,eACpChD,EAAOiB,MAAMC,QAAU,QAEvBlB,EAAOiB,MAAMC,QAAU,MACxB,QAEE,CAEL,MAAMtD,EAAUvD,KAAKuD,QAAQoD,QAAQhB,GACtBA,EAAOnE,KACRmH,cAAcC,WAAW/F,EAAM8F,iBAI7C3I,KAAKuD,QAAQmC,SAASC,GAAYA,EAAOK,aAAc,IAGzC,KAAVnD,GAAgBU,EAAQT,SAC1BS,EAAQ,GAAGyC,aAAc,EACzBzC,EAAQ,GAAGmE,eAAe,CAAEC,MAAO,YAC/B3H,KAAK6B,oBAAmB7B,KAAK0B,cAAgB,kBAEpD,CACF,CAEO,sBAAAsG,GAENhI,KAAKuD,QAAQmC,SAASC,IAChB3F,KAAKS,SACPkF,EAAOsB,SAAWjH,KAAK6C,MAAMuE,SAASzB,EAAO9C,OAE7C8C,EAAOsB,SAAWjH,KAAK6C,QAAU8C,EAAO9C,KACzC,GAEJ,CAEO,YAAA+E,CAAanF,SACnB,GAAuB,cAAnBA,EAAEkC,OAAO9B,MAAuB,CAClC7C,KAAKkB,iBAAmBuB,EAAEkC,OAAOsC,SAEjC,MAEMa,GAF2B,QAAf3F,EAAAnC,KAAKsF,kBAAU,IAAAnD,OAAA,EAAAA,EAAEoD,cAAc,kBAChBC,mBACmBmB,QACjDhB,GAAgBA,EAAOsB,UAAYtB,EAAO/E,WAC3CgE,KAAKe,GAAgBA,EAAO9C,QAE1BJ,EAAEkC,OAAOsC,UACXjH,KAAK6C,MAAQ7C,KAAKuD,QACfoD,QACEhB,IAAYA,EAAO/E,UAAa+E,EAAO/E,UAAY+E,EAAOsB,WAE5DrC,KAAKe,GACGA,EAAO9C,QAElB7C,KAAK0B,cAAgB,wBAErB1B,KAAK6C,MAAQiF,EAAwBhF,OACjCgF,EACA,GACJ9H,KAAK0B,cAAgB,yBAGvB1B,KAAK+H,WAAU,GAAM,EACtB,MACC/H,KAAKmI,YAAY1F,EAAEkC,OAAO9B,MAAOJ,EAAEkC,OAAOsC,UAC1CjH,KAAK0B,cAAgBe,EAAEkC,OAAOsC,SAC1B,YAAYxE,EAAEkC,OAAO9B,QACrB,cAAcJ,EAAEkC,OAAO9B,QAG7B7C,KAAKgI,yBAGAhI,KAAKS,WACRT,KAAKM,MAAO,GAIdN,KAAKiI,WACN,CAEO,WAAAY,CAAYpG,GAClB,MAAMyD,EAAgBzD,EAAEkC,OAAOmE,UAAU5C,gBAGtCA,GAC6B,yBAA7BA,eAAAA,EAAemC,YACc,iBAA5BnC,EAAcmC,aAEhBrI,KAAKM,MAAO,EAEf,CAEO,eAAAyI,CAAgBtG,GACjBA,EAAEuG,eAAe5B,SAASpH,QAC7BA,KAAKM,MAAO,EAEf,CAEQ,iBAAA2I,GACPC,MAAMD,oBAGNjJ,KAAKmJ,eAELC,SAASC,iBAAiB,SAAU5G,GAAMzC,KAAK+I,gBAAgBtG,KAG/DzC,KAAKqJ,iBAAiB,YAAa5G,GAAWzC,KAAK4H,aAAanF,KAChEzC,KAAKqJ,iBAAiB,oBAAoB,IAAMrJ,KAAKsJ,wBAGrDtJ,KAAKqJ,iBAAiB,WAAY5G,GAAWzC,KAAK6I,YAAYpG,IAC/D,CAEQ,oBAAA8G,GAEPvJ,KAAKwJ,kBAELJ,SAASK,oBAAoB,SAAUhH,GAAMzC,KAAK+I,gBAAgBtG,KAClEzC,KAAKyJ,oBAAoB,YAAahH,GAAWzC,KAAK4H,aAAanF,KACnEzC,KAAKyJ,oBAAoB,oBAAoB,IAC3CzJ,KAAKsJ,wBAEPtJ,KAAKyJ,oBAAoB,WAAYhH,GAAWzC,KAAK6I,YAAYpG,KAEjEyG,MAAMK,sBACP,CAEO,WAAApB,CAAYtF,EAAeoE,GAAW,GAE5C,GAAIjH,KAAKS,SAAU,CACjB,MAAMiJ,EACW,KAAf1J,KAAK6C,MAAe,GAAK8G,KAAKC,MAAMD,KAAKE,UAAU7J,KAAK6C,QAG1D,GAAIoE,EACFyC,EAAOI,KAAKjH,OACP,CACL,MAAMkH,EAAQL,EAAOvC,QAAQtE,GAC7B6G,EAAOM,OAAOD,EAAO,EACtB,CAED/J,KAAK6C,MAAQ6G,CACd,MACC1J,KAAK6C,MAAQA,EAGf7C,KAAK+H,WAAU,GAAM,GAGhB/H,KAAKS,WACJT,KAAKO,WACPP,KAAK6F,SAASxB,QAEdrE,KAAKoE,SAASC,QAGnB,CAEO,SAAA0D,CAAUkC,EAAqBC,GAErC,MAAMC,EAAW,CACfC,YAAkC,KAArBpK,KAAKgF,YAClBqF,aACErK,KAAKU,YACHV,KAAK6C,OACJ7C,KAAKS,WAAaT,KAAK6C,MAAMC,SAC5B9C,KAAKS,UAA2B,KAAfT,KAAK6C,QAIxByH,EACJtK,KAAKU,WAAaV,KAAK6C,MAAMC,OAAS,8BAAgC,GAClEyH,EACiB,KAArBvK,KAAKgF,YAAqBhF,KAAKgF,YAAcsF,EAG/CtK,KAAKwK,WAAWC,YAAYN,EAAUI,EAAmBvK,KAAKoE,UAG1D6F,IACFjK,KAAKiF,uBAAyBqF,GAI5BJ,GACFlK,KAAKwK,WAAWE,gBAEnB,CAEO,SAAAzC,GACN,MAAMC,EAAQ,IAAIxD,YAAY,YAAa,CACzCC,OAAQ,CACN9B,MAAO7C,KAAK6C,SAGhB7C,KAAKyE,cAAcyD,EACpB,CAEO,WAAAE,GACN,MAAMF,EAAQ,IAAIxD,YAAY,YAAa,CACzCC,OAAQ,CACNlD,WAAYzB,KAAKyB,cAGrBzB,KAAKyE,cAAcyD,EACpB,CAEQ,UAAAyC,CAAWC,GACdA,EAAaC,IAAI,iBACnB7K,KAAKsB,aAAewJ,EAAU5L,EAAqBc,KAAKoB,aAE3D,CAEQ,OAAA2J,CAAQH,WAIf,GAFA5K,KAAKgL,WAAWJ,GAEZA,EAAaC,IAAI,SAAU,CAC7B7K,KAAKoF,iBAEL,MACM6F,GAD2B,QAAf9I,EAAAnC,KAAKsF,kBAAU,IAAAnD,OAAA,EAAAA,EAAEoD,cAAc,kBAChBC,mBAAmBmB,QACjDhB,IAAiBA,EAAO/E,WAErBsK,EAA8BD,EAAQtE,QACzChB,GAAgBA,EAAOsB,WAI1BjH,KAAKkB,iBAAmBgK,EAAgBpI,SAAWmI,EAAQnI,OAG3D9C,KAAKmB,uBACH+J,EAAgBpI,OAASmI,EAAQnI,QAAUoI,EAAgBpI,OAAS,EAEtE9C,KAAKmL,cACLnL,KAAKqF,qBACN,CAED,GAAIuF,EAAaC,IAAI,SAAWD,EAAaC,IAAI,iBAAkB,CAQjE,GAPI7K,KAAKM,OAASN,KAAKO,aAErBP,KAAKoL,UAAU/G,MAAM,CAAEgH,eAAe,IACtCrL,KAAK0B,cACH,4DAGuB,OAAvB1B,KAAKiB,cACPjB,KAAK2B,cAAe,OACf,GAA2B,SAAvB3B,KAAKiB,cACdjB,KAAK2B,cAAe,OACf,GAAI3B,KAAKM,KAAM,CACpB,MAAMgL,EAAgB,GACtBtL,KAAK2B,aACH3B,KAAKoE,SAASmH,wBAAwBC,IACtCC,OAAOC,YAAcJ,CACxB,CAEGtL,KAAKM,OAASN,KAAKS,WAGjB,QAFJ6H,EAAAtI,KAAKuD,QACFwD,MAAMpB,GAAWA,EAAOsB,kBACvB,IAAAqB,GAAAA,EAAAZ,eAAe,CAAEC,MAAO,YAE/B,CAEGiD,EAAaC,IAAI,aAEnB7K,KAAKuD,QAAQmC,SAASC,IACpBA,EAAOlF,SAAWT,KAAKS,QAAQ,IAI/BmK,EAAaC,IAAI,eAAiB7K,KAAK6F,WACzC7F,KAAK6F,SAAShD,MAAQ7C,KAAKyB,YAGzBmJ,EAAaC,IAAI,mBACnB7K,KAAKmF,oBAER,CAGO,WAAAgG,GACN,GAAInL,KAAKS,SAAU,CACjB,MAAMwK,EAAezE,MAAMC,KACzBzG,KAAK0G,iBAAiB,wBAElBiF,EAAsB,GAExBV,IACFA,EAAQvF,SAASC,IACXA,EAAOsB,UACT0E,EAAK7B,KAAK,CACRjH,MAAO8C,EAAO9C,MACdrB,KAAMmE,EAAOiG,YACbhL,SAAU+E,EAAO/E,UAEpB,IAGHZ,KAAK4B,MAAQ+J,EAEhB,CACF,CAEO,cAAAvG,GACeoB,MAAMC,KACzBzG,KAAK0G,iBAAiB,wBAGhBhB,SAASC,IAIf,GAFAA,EAAOlF,SAAWT,KAAKS,SAEnBT,KAAKS,SAAU,CACjB,MAAMoL,EAAW7L,KAAK6C,MAAMuE,SAASzB,EAAO9C,OAE5C8C,EAAOsB,SAAW4E,CACnB,MACClG,EAAOsB,SAAWjH,KAAK6C,QAAU8C,EAAO9C,KACzC,GAEJ,CAEO,qBAAAc,CAAsBlB,GAC5B,MAAMwD,EAASxD,EAAEwD,OACjBjG,KAAKuB,eAAiB0E,EAAOpD,KAC9B,CAEO,mBAAAyG,GACNtJ,KAAK0B,cAAgB,qBACrB8F,YAAW,KACTxH,KAAKM,MAAO,EACZN,KAAKoE,SAASC,OAAO,GACpB,IACJ,CAEO,mBAAAgB,GAEN,MAAMyG,EAAkBtF,MAAMC,KAC5BzG,KAAK0G,iBAAiB,wBAGxB,IAAK1G,KAAKS,SAAU,CAClB,GAAIqL,EAAWhJ,QAAyB,KAAf9C,KAAK6C,MAAc,CAC1C,MAAM8C,EAASmG,EAAW/E,MACvBpB,GAAgBA,EAAO9C,QAAU7C,KAAK6C,QAErC8C,EACF3F,KAAKwB,KAAOmE,EAAOiG,YAAYpH,QAE/BxE,KAAKwB,KAAO,GACZuK,QAAQC,KAAK,wCAAwChM,KAAK6C,SAE7D,CAGG7C,KAAKO,YAAcP,KAAKwB,OAC1BxB,KAAKyB,WAAazB,KAAKwB,OAASxB,KAAKK,YAAc,GAAKL,KAAKwB,KAC7DxB,KAAK6F,SAAShD,MAAQ7C,KAAKyB,WAE9B,CACF,GA7tCe7B,EAAMqM,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACP1M,EAAA2M,UAAA,aAAA,GAIXJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACN1M,EAAA2M,UAAA,YAAA,GAIZJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACH5M,EAAA2M,UAAA,cAAA,GAIfJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACL1M,EAAA2M,UAAA,eAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACD1M,EAAA2M,UAAA,mBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACL5M,EAAA2M,UAAA,YAAA,GAIbJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACC5M,EAAA2M,UAAA,kBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACG5M,EAAA2M,UAAA,oBAAA,GAIrBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACD5M,EAAA2M,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACD5M,EAAA2M,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACA5M,EAAA2M,UAAA,iBAAA,GAIlBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACD5M,EAAA2M,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACD5M,EAAA2M,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACA5M,EAAA2M,UAAA,iBAAA,GAIlBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACW1M,EAAA2M,UAAA,qBAAA,GAI7BJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACO1M,EAAA2M,UAAA,oBAAA,GAIzBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAC6B1M,EAAA2M,UAAA,qBAAA,GAM/CJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACO5M,EAAA2M,UAAA,wBAAA,GAMzBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACa5M,EAAA2M,UAAA,8BAAA,GAI/BJ,EAAA,CADCC,EAAS,CAAEC,KAAMI,UACgB7M,EAAA2M,UAAA,mBAAA,GAIlCJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACK5M,EAAA2M,UAAA,sBAAA,GAMvBJ,EAAA,CADCO,KACkC9M,EAAA2M,UAAA,oBAAA,GAOnCJ,EAAA,CADCO,KACmB9M,EAAA2M,UAAA,sBAAA,GAOpBJ,EAAA,CADCO,KACS9M,EAAA2M,UAAA,YAAA,GAMVJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACF1M,EAAA2M,UAAA,kBAAA,GAOhBJ,EAAA,CADCO,KACwC9M,EAAA2M,UAAA,qBAAA,GAOzCJ,EAAA,CADCQ,EAAsB,CAAEC,SAAU,yBACdhN,EAAA2M,UAAA,eAAA,GAOrBJ,EAAA,CADCQ,EAAsB,CAAEC,SAAU,mCACNhN,EAAA2M,UAAA,uBAAA,GAO7BJ,EAAA,CADCU,EAAM,YACqBjN,EAAA2M,UAAA,gBAAA,GAO5BJ,EAAA,CADCU,EAAM,YACgBjN,EAAA2M,UAAA,gBAAA,GAOvBJ,EAAA,CADCU,EAAM,aACiBjN,EAAA2M,UAAA,iBAAA,GAOxBJ,EAAA,CADCU,EAAM,oBACuBjN,EAAA2M,UAAA,uBAAA,GAO9BJ,EAAA,CADCU,EAAM,sBAC6BjN,EAAA2M,UAAA,wBAAA,GAOpCJ,EAAA,CADCO,KACoB9M,EAAA2M,UAAA,oBAAA,GAOrBJ,EAAA,CADCO,KACyB9M,EAAA2M,UAAA,aAAA,GAzLf3M,EAAQuM,EAAA,CADpBW,EAAc,iBACFlN"}

package/components/reusable/dropdown/dropdownOption.js

@@ -15,7 +15,8 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
 .option {
   background-color: var(--kd-color-background-ui-hollow-default);
   cursor: default;
-  padding: 16px;
+  padding: 8px 16px;
+  height: 48px;
   transition: background-color 150ms ease-out;
   display: flex;
   gap: 8px;
@@ -47,9 +48,6 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.option span.text {
-  flex-shrink: 0;
-}
 .option span.check-icon {
   display: flex;
   margin-left: auto;

package/components/reusable/dropdown/dropdownOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdownOption.js","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport '../checkbox';\nimport '../button';\n\nimport checkIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/check.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport DropdownOptionScss from './dropdownOption.scss';\n\n/**\n * Dropdown option.\n * @fires on-click - Emits the option details to the parent dropdown.\n * @fires on-remove-option - Emits the option that is removed.\n * @slot unnamed - Slot for option text.\n * @slot icon - Slot for option icon. Icon size should be 16px only.\n */\n@customElement('kyn-dropdown-option')\nexport class DropdownOption extends LitElement {\n  static override styles = DropdownOptionScss;\n\n  /** Option value. */\n  @property({ type: String })\n  value = '';\n\n  /** Internal text strings.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selected = false;\n\n  /** Option disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Allow Add Option state, derived from parent. */\n  @property({ type: Boolean })\n  allowAddOption = false;\n\n  /**\n   * Option highlighted state for keyboard navigation, automatically derived.\n   * @ignore\n   */\n  @state()\n  highlighted = false;\n\n  /** Multi-select state, derived from parent.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /** Removable option. */\n  @property({ type: Boolean })\n  removable = false;\n\n  /**\n   * Option text, automatically derived.\n   * @ignore\n   */\n  @state()\n  text: any = '';\n\n  /** Determines whether the checkbox is in an indeterminate state. */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  @property({ type: String, reflect: true })\n  override role = 'option';\n\n  @property({ type: String, reflect: true, attribute: 'aria-selected' })\n  override ariaSelected = 'option';\n\n  override render() {\n    return html`\n      <div\n        class=\"option\"\n        ?highlighted=${this.highlighted}\n        ?selected=${this.selected}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled}\n        ?multiple=${this.multiple}\n        title=${this.text}\n        @pointerup=${(e: any) => this.handleClick(e)}\n        @blur=${(e: any) => this.handleBlur(e)}\n      >\n        <slot name=\"icon\"></slot>\n        <span class=\"text\">\n          ${this.multiple\n            ? html`\n                <kyn-checkbox\n                  type=\"checkbox\"\n                  value=${this.value}\n                  .checked=${this.selected}\n                  ?checked=${this.selected}\n                  ?disabled=${this.disabled}\n                  notFocusable\n                  .indeterminate=${this.indeterminate}\n                >\n                  <slot\n                    @slotchange=${(e: any) => this.handleSlotChange(e)}\n                  ></slot>\n                </kyn-checkbox>\n              `\n            : html`\n                <slot\n                  @slotchange=${(e: any) => this.handleSlotChange(e)}\n                ></slot>\n              `}\n        </span>\n\n        ${this.selected && !this.multiple\n          ? html` <span class=\"check-icon\">${unsafeSVG(checkIcon)}</span> `\n          : this.allowAddOption && this.removable\n          ? html`\n              <kyn-button\n                class=\"remove-option\"\n                kind=\"ghost\"\n                size=\"small\"\n                aria-label=\"Delete ${this.value}\"\n                description=\"Delete ${this.value}\"\n                ?disabled=${this.disabled}\n                @click=${(e: Event) => this.handleRemoveClick(e)}\n                @mousedown=${(e: Event) => e.stopPropagation()}\n                @keydown=${(e: KeyboardEvent) => e.stopPropagation()}\n                @focus=${(e: KeyboardEvent) => e.stopPropagation()}\n              >\n                <span slot=\"icon\" class=\"clear-icon\">\n                  ${unsafeSVG(clearIcon)}\n                </span>\n              </kyn-button>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('selected')) {\n      this.ariaSelected = this.selected.toString();\n    }\n  }\n\n  private handleRemoveClick(e: Event) {\n    e.stopPropagation();\n    const event = new CustomEvent('on-remove-option', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleSlotChange(e: any) {\n    // set text prop from slotted text, for ease of access\n    const nodes = e.target.assignedNodes({ flatten: true });\n    let text = '';\n\n    for (let i = 0; i < nodes.length; i++) {\n      text += nodes[i].textContent.trim();\n    }\n\n    this.text = text;\n  }\n\n  private handleClick(e: Event) {\n    // prevent click if disabled\n    if (this.disabled) {\n      return;\n    }\n\n    // update selected state\n    if (this.multiple) {\n      this.selected = !this.selected;\n    } else {\n      this.selected = true;\n    }\n\n    // emit selected value, bubble so it can be captured by the parent dropdown\n    const event = new CustomEvent('on-click', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        selected: this.selected,\n        value: this.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleBlur(e: any) {\n    // emit blur event, bubble so it can be captured by the parent dropdown\n    const event = new CustomEvent('on-blur', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-dropdown-option': DropdownOption;\n  }\n}\n"],"names":["DropdownOption","LitElement","constructor","this","value","selected","disabled","allowAddOption","highlighted","multiple","removable","text","indeterminate","role","ariaSelected","render","html","e","handleClick","handleBlur","handleSlotChange","unsafeSVG","checkIcon","handleRemoveClick","stopPropagation","clearIcon","willUpdate","changedProps","has","toString","event","CustomEvent","bubbles","composed","detail","dispatchEvent","nodes","target","assignedNodes","flatten","i","length","textContent","trim","origEvent","styles","DropdownOptionScss","__decorate","property","type","String","prototype","Boolean","state","reflect","attribute","customElement"],"mappings":"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"}
+{"version":3,"file":"dropdownOption.js","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport '../checkbox';\nimport '../button';\n\nimport checkIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/check.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport DropdownOptionScss from './dropdownOption.scss';\n\n/**\n * Dropdown option.\n * @fires on-click - Emits the option details to the parent dropdown.\n * @fires on-remove-option - Emits the option that is removed.\n * @slot unnamed - Slot for option text.\n * @slot icon - Slot for option icon. Icon size should be 16px only.\n */\n@customElement('kyn-dropdown-option')\nexport class DropdownOption extends LitElement {\n  static override styles = DropdownOptionScss;\n\n  /** Option value. */\n  @property({ type: String })\n  value = '';\n\n  /** Internal text strings.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selected = false;\n\n  /** Option disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Allow Add Option state, derived from parent. */\n  @property({ type: Boolean })\n  allowAddOption = false;\n\n  /**\n   * Option highlighted state for keyboard navigation, automatically derived.\n   * @ignore\n   */\n  @state()\n  highlighted = false;\n\n  /** Multi-select state, derived from parent.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /** Removable option. */\n  @property({ type: Boolean })\n  removable = false;\n\n  /**\n   * Option text, automatically derived.\n   * @ignore\n   */\n  @state()\n  text: any = '';\n\n  /** Determines whether the checkbox is in an indeterminate state. */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  @property({ type: String, reflect: true })\n  override role = 'option';\n\n  @property({ type: String, reflect: true, attribute: 'aria-selected' })\n  override ariaSelected = 'option';\n\n  override render() {\n    return html`\n      <div\n        class=\"option\"\n        ?highlighted=${this.highlighted}\n        ?selected=${this.selected}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled}\n        ?multiple=${this.multiple}\n        title=${this.text}\n        @pointerup=${(e: any) => this.handleClick(e)}\n        @blur=${(e: any) => this.handleBlur(e)}\n      >\n        <slot name=\"icon\"></slot>\n        <span class=\"text\">\n          ${this.multiple\n            ? html`\n                <kyn-checkbox\n                  type=\"checkbox\"\n                  value=${this.value}\n                  .checked=${this.selected}\n                  ?checked=${this.selected}\n                  ?disabled=${this.disabled}\n                  notFocusable\n                  .indeterminate=${this.indeterminate}\n                >\n                  <slot\n                    @slotchange=${(e: any) => this.handleSlotChange(e)}\n                  ></slot>\n                </kyn-checkbox>\n              `\n            : html`\n                <slot\n                  @slotchange=${(e: any) => this.handleSlotChange(e)}\n                ></slot>\n              `}\n        </span>\n\n        ${this.selected && !this.multiple\n          ? html` <span class=\"check-icon\">${unsafeSVG(checkIcon)}</span> `\n          : this.allowAddOption && this.removable\n          ? html`\n              <kyn-button\n                class=\"remove-option\"\n                kind=\"ghost\"\n                size=\"small\"\n                aria-label=\"Delete ${this.value}\"\n                description=\"Delete ${this.value}\"\n                ?disabled=${this.disabled}\n                @click=${(e: Event) => this.handleRemoveClick(e)}\n                @mousedown=${(e: Event) => e.stopPropagation()}\n                @keydown=${(e: KeyboardEvent) => e.stopPropagation()}\n                @focus=${(e: KeyboardEvent) => e.stopPropagation()}\n              >\n                <span slot=\"icon\" class=\"clear-icon\">\n                  ${unsafeSVG(clearIcon)}\n                </span>\n              </kyn-button>\n            `\n          : null}\n      </div>\n    `;\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('selected')) {\n      this.ariaSelected = this.selected.toString();\n    }\n  }\n\n  private handleRemoveClick(e: Event) {\n    e.stopPropagation();\n    const event = new CustomEvent('on-remove-option', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleSlotChange(e: any) {\n    // set text prop from slotted text, for ease of access\n    const nodes = e.target.assignedNodes({ flatten: true });\n    let text = '';\n\n    for (let i = 0; i < nodes.length; i++) {\n      text += nodes[i].textContent.trim();\n    }\n\n    this.text = text;\n  }\n\n  private handleClick(e: Event) {\n    // prevent click if disabled\n    if (this.disabled) {\n      return;\n    }\n\n    // update selected state\n    if (this.multiple) {\n      this.selected = !this.selected;\n    } else {\n      this.selected = true;\n    }\n\n    // emit selected value, bubble so it can be captured by the parent dropdown\n    const event = new CustomEvent('on-click', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        selected: this.selected,\n        value: this.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleBlur(e: any) {\n    // emit blur event, bubble so it can be captured by the parent dropdown\n    const event = new CustomEvent('on-blur', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-dropdown-option': DropdownOption;\n  }\n}\n"],"names":["DropdownOption","LitElement","constructor","this","value","selected","disabled","allowAddOption","highlighted","multiple","removable","text","indeterminate","role","ariaSelected","render","html","e","handleClick","handleBlur","handleSlotChange","unsafeSVG","checkIcon","handleRemoveClick","stopPropagation","clearIcon","willUpdate","changedProps","has","toString","event","CustomEvent","bubbles","composed","detail","dispatchEvent","nodes","target","assignedNodes","flatten","i","length","textContent","trim","origEvent","styles","DropdownOptionScss","__decorate","property","type","String","prototype","Boolean","state","reflect","attribute","customElement"],"mappings":"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"}

package/components/reusable/globalFilter/globalFilter.js

@@ -41,7 +41,7 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{e}from"../../../ven
   flex-wrap: wrap;
   align-items: center;
   gap: 16px;
-  background: var(--kd-color-container-utility);
+  background: var(--kd-color-background-container-default);
   border-radius: 4px;
   padding: 16px;
 }

package/components/reusable/globalFilter/globalFilter.sample.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"globalFilter.sample.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/globalFilter/globalFilter.sample.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,SAAS,CAAC;AACjB,OAAO,aAAa,CAAC;AACrB,OAAO,UAAU,CAAC;AAClB,OAAO,cAAc,CAAC;AACtB,OAAO,iBAAiB,CAAC;AACzB,OAAO,QAAQ,CAAC;AAChB,OAAO,WAAW,CAAC;AACnB,OAAO,cAAc,CAAC;AAQtB,2DAA2D;AAC3D,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAcpB;IAEF,+CAA+C;IAE/C,eAAe,EAAE,KAAK,CAAC,GAAG,CAAC,CAyBzB;IAEO,MAAM;IAqIf,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,oBAAoB;CAM7B;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,qBAAqB,CAAC;KAClD;CACF"}
+{"version":3,"file":"globalFilter.sample.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/globalFilter/globalFilter.sample.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,SAAS,CAAC;AACjB,OAAO,aAAa,CAAC;AACrB,OAAO,UAAU,CAAC;AAClB,OAAO,cAAc,CAAC;AACtB,OAAO,iBAAiB,CAAC;AACzB,OAAO,QAAQ,CAAC;AAChB,OAAO,WAAW,CAAC;AACnB,OAAO,cAAc,CAAC;AAQtB,2DAA2D;AAC3D,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAcpB;IAEF,+CAA+C;IAE/C,eAAe,EAAE,KAAK,CAAC,GAAG,CAAC,CAyBzB;IAEO,MAAM;IAqJf,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,oBAAoB;CAM7B;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,qBAAqB,CAAC;KAClD;CACF"}

package/components/reusable/modal/modal.js

@@ -288,7 +288,7 @@ slot[name=footer]::slotted(*) {
                           <kyn-button
                             class="action-button"
                             value="cancel"
-                            kind="ghost"
+                            kind="tertiary"
                             @click=${t=>this._closeModal(t,"cancel")}
                           >
                             ${this.cancelText}

package/components/reusable/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport ModalScss from './modal.scss';\n\nimport '../button';\n\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\n/**\n * Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @slot footer - Slot for the footer content which replaces the ok, cancel, and second ary buttons.\n * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).\n * @fires on-open - Emits the modal open event.\n */\n@customElement('kyn-modal')\nexport class Modal extends LitElement {\n  static override styles = [\n    ModalScss,\n    css`\n      @supports (transition-behavior: allow-discrete) {\n        @starting-style {\n          dialog[open] {\n            opacity: 0;\n            transform: scale(0);\n          }\n        }\n\n        @starting-style {\n          dialog[open]::backdrop {\n            background-color: rgb(0, 0, 0, 0);\n          }\n        }\n      }\n    `,\n  ];\n\n  /** Modal open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Modal size. `'auto'`, `'md'`, or `'lg', or `'xl'`. */\n  @property({ type: String })\n  size = 'auto';\n\n  /** Title/heading text, required. */\n  @property({ type: String })\n  titleText = '';\n\n  /** Label text, optional. */\n  @property({ type: String })\n  labelText = '';\n\n  /** OK button text. */\n  @property({ type: String })\n  okText = 'OK';\n\n  /** Cancel button text. */\n  @property({ type: String })\n  cancelText = 'Cancel';\n\n  /** Changes the primary button styles to indicate the action is destructive. */\n  @property({ type: Boolean })\n  destructive = false;\n\n  /** Disables the primary button. */\n  @property({ type: Boolean })\n  okDisabled = false;\n\n  /** Disables the secondary button. */\n  @property({ type: Boolean })\n  secondaryDisabled = false;\n\n  /** Hides the footer/action buttons to create a passive modal. */\n  @property({ type: Boolean })\n  hideFooter = false;\n\n  /** Secondary button text. */\n  @property({ type: String })\n  secondaryButtonText = 'Secondary';\n\n  /** Hides the secondary button. */\n  @property({ type: Boolean })\n  showSecondaryButton = false;\n\n  /** Hides the cancel button. */\n  @property({ type: Boolean })\n  hideCancelButton = false;\n\n  /** Function to execute before the modal can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */\n  @property({ attribute: false })\n  beforeClose!: Function;\n\n  /** Close button text. */\n  @property({ type: String })\n  closeText = 'Close';\n\n  /** The dialog element\n   * @internal\n   */\n  @query('dialog')\n  _dialog!: any;\n\n  /** Determines if the component is themed for GenAI.*/\n  @property({ type: Boolean, reflect: true })\n  aiConnected = false;\n\n  /** Disables scroll on the modal body to allow scrolling of nested elements inside. */\n  @property({ type: Boolean })\n  disableScroll = false;\n\n  override render() {\n    const classes = {\n      modal: true,\n      'size--md': this.size === 'md',\n      'size--lg': this.size === 'lg',\n      'size--xl': this.size === 'xl',\n      'ai-connected': this.aiConnected,\n    };\n\n    return html`\n      <span class=\"anchor\" @click=${this._openModal}>\n        <slot name=\"anchor\"></slot>\n      </span>\n\n      <dialog\n        class=\"${classMap(classes)}\"\n        aria-labelledby=\"dialogLabel\"\n        @cancel=${(e: Event) => this._closeModal(e, 'cancel')}\n      >\n        <form method=\"dialog\">\n          <kyn-button\n            class=\"close\"\n            kind=\"ghost\"\n            size=\"small\"\n            description=${this.closeText}\n            @click=${(e: Event) => this._closeModal(e, 'cancel')}\n          >\n            <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n          </kyn-button>\n          <header>\n            <div>\n              <h1 id=\"dialogLabel\">${this.titleText}</h1>\n              ${this.labelText !== ''\n                ? html`<span class=\"label\">${this.labelText}</span>`\n                : null}\n            </div>\n          </header>\n\n          <div class=\"body ${this.disableScroll ? 'disableScroll' : ''}\">\n            <slot></slot>\n          </div>\n\n          ${!this.hideFooter\n            ? html`\n                <slot name=\"footer\">\n                  <div class=\"footer\">\n                    <kyn-button\n                      class=\"action-button\"\n                      value=\"ok\"\n                      kind=${this.destructive\n                        ? 'primary-destructive'\n                        : this.aiConnected\n                        ? 'primary-ai'\n                        : 'primary'}\n                      ?disabled=${this.okDisabled}\n                      @click=${(e: Event) => this._closeModal(e, 'ok')}\n                    >\n                      ${this.okText}\n                    </kyn-button>\n                    ${this.showSecondaryButton\n                      ? html`\n                          <kyn-button\n                            class=\"action-button\"\n                            value=\"Secondary\"\n                            kind=${this.aiConnected ? 'outline-ai' : 'outline'}\n                            ?disabled=${this.secondaryDisabled}\n                            @click=${(e: Event) =>\n                              this._closeModal(e, 'secondary')}\n                          >\n                            ${this.secondaryButtonText}\n                          </kyn-button>\n                        `\n                      : null}\n                    ${this.hideCancelButton\n                      ? null\n                      : html`\n                          <kyn-button\n                            class=\"action-button\"\n                            value=\"cancel\"\n                            kind=\"ghost\"\n                            @click=${(e: Event) =>\n                              this._closeModal(e, 'cancel')}\n                          >\n                            ${this.cancelText}\n                          </kyn-button>\n                        `}\n                    <!--\n            <div class=\"custom-actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n            -->\n                  </div>\n                </slot>\n              `\n            : null}\n        </form>\n      </dialog>\n    `;\n  }\n\n  private _openModal() {\n    this.open = true;\n  }\n\n  private _closeModal(e: Event, returnValue: string) {\n    if (\n      !this.beforeClose ||\n      (this.beforeClose && this.beforeClose(returnValue))\n    ) {\n      this.open = false;\n      this._dialog.returnValue = returnValue;\n      this._emitCloseEvent(e);\n    }\n  }\n\n  private _emitCloseEvent(e: Event) {\n    const event = new CustomEvent('on-close', {\n      detail: {\n        returnValue: this._dialog.returnValue,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _emitOpenEvent() {\n    const event = new CustomEvent('on-open');\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('open')) {\n      if (this.open) {\n        this._dialog.showModal();\n        this._emitOpenEvent();\n      } else {\n        this._dialog.close();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-modal': Modal;\n  }\n}\n"],"names":["Modal","LitElement","constructor","this","open","size","titleText","labelText","okText","cancelText","destructive","okDisabled","secondaryDisabled","hideFooter","secondaryButtonText","showSecondaryButton","hideCancelButton","closeText","aiConnected","disableScroll","render","classes","modal","html","_openModal","classMap","e","_closeModal","unsafeSVG","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","_emitOpenEvent","updated","changedProps","has","showModal","close","styles","ModalScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","reflect","customElement"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../../../src/components/reusable/modal/modal.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport ModalScss from './modal.scss';\n\nimport '../button';\n\nimport closeIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\n/**\n * Modal.\n * @slot unnamed - Slot for modal body content.\n * @slot anchor - Slot for the anchor button content.\n * @slot footer - Slot for the footer content which replaces the ok, cancel, and second ary buttons.\n * @fires on-close - Emits the modal close event with `returnValue` (`'ok'` or `'cancel'`).\n * @fires on-open - Emits the modal open event.\n */\n@customElement('kyn-modal')\nexport class Modal extends LitElement {\n  static override styles = [\n    ModalScss,\n    css`\n      @supports (transition-behavior: allow-discrete) {\n        @starting-style {\n          dialog[open] {\n            opacity: 0;\n            transform: scale(0);\n          }\n        }\n\n        @starting-style {\n          dialog[open]::backdrop {\n            background-color: rgb(0, 0, 0, 0);\n          }\n        }\n      }\n    `,\n  ];\n\n  /** Modal open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Modal size. `'auto'`, `'md'`, or `'lg', or `'xl'`. */\n  @property({ type: String })\n  size = 'auto';\n\n  /** Title/heading text, required. */\n  @property({ type: String })\n  titleText = '';\n\n  /** Label text, optional. */\n  @property({ type: String })\n  labelText = '';\n\n  /** OK button text. */\n  @property({ type: String })\n  okText = 'OK';\n\n  /** Cancel button text. */\n  @property({ type: String })\n  cancelText = 'Cancel';\n\n  /** Changes the primary button styles to indicate the action is destructive. */\n  @property({ type: Boolean })\n  destructive = false;\n\n  /** Disables the primary button. */\n  @property({ type: Boolean })\n  okDisabled = false;\n\n  /** Disables the secondary button. */\n  @property({ type: Boolean })\n  secondaryDisabled = false;\n\n  /** Hides the footer/action buttons to create a passive modal. */\n  @property({ type: Boolean })\n  hideFooter = false;\n\n  /** Secondary button text. */\n  @property({ type: String })\n  secondaryButtonText = 'Secondary';\n\n  /** Hides the secondary button. */\n  @property({ type: Boolean })\n  showSecondaryButton = false;\n\n  /** Hides the cancel button. */\n  @property({ type: Boolean })\n  hideCancelButton = false;\n\n  /** Function to execute before the modal can close. Useful for running checks or validations before closing. Exposes `returnValue` (`'ok'` or `'cancel'`). Must return `true` or `false`. */\n  @property({ attribute: false })\n  beforeClose!: Function;\n\n  /** Close button text. */\n  @property({ type: String })\n  closeText = 'Close';\n\n  /** The dialog element\n   * @internal\n   */\n  @query('dialog')\n  _dialog!: any;\n\n  /** Determines if the component is themed for GenAI.*/\n  @property({ type: Boolean, reflect: true })\n  aiConnected = false;\n\n  /** Disables scroll on the modal body to allow scrolling of nested elements inside. */\n  @property({ type: Boolean })\n  disableScroll = false;\n\n  override render() {\n    const classes = {\n      modal: true,\n      'size--md': this.size === 'md',\n      'size--lg': this.size === 'lg',\n      'size--xl': this.size === 'xl',\n      'ai-connected': this.aiConnected,\n    };\n\n    return html`\n      <span class=\"anchor\" @click=${this._openModal}>\n        <slot name=\"anchor\"></slot>\n      </span>\n\n      <dialog\n        class=\"${classMap(classes)}\"\n        aria-labelledby=\"dialogLabel\"\n        @cancel=${(e: Event) => this._closeModal(e, 'cancel')}\n      >\n        <form method=\"dialog\">\n          <kyn-button\n            class=\"close\"\n            kind=\"ghost\"\n            size=\"small\"\n            description=${this.closeText}\n            @click=${(e: Event) => this._closeModal(e, 'cancel')}\n          >\n            <span slot=\"icon\">${unsafeSVG(closeIcon)}</span>\n          </kyn-button>\n          <header>\n            <div>\n              <h1 id=\"dialogLabel\">${this.titleText}</h1>\n              ${this.labelText !== ''\n                ? html`<span class=\"label\">${this.labelText}</span>`\n                : null}\n            </div>\n          </header>\n\n          <div class=\"body ${this.disableScroll ? 'disableScroll' : ''}\">\n            <slot></slot>\n          </div>\n\n          ${!this.hideFooter\n            ? html`\n                <slot name=\"footer\">\n                  <div class=\"footer\">\n                    <kyn-button\n                      class=\"action-button\"\n                      value=\"ok\"\n                      kind=${this.destructive\n                        ? 'primary-destructive'\n                        : this.aiConnected\n                        ? 'primary-ai'\n                        : 'primary'}\n                      ?disabled=${this.okDisabled}\n                      @click=${(e: Event) => this._closeModal(e, 'ok')}\n                    >\n                      ${this.okText}\n                    </kyn-button>\n                    ${this.showSecondaryButton\n                      ? html`\n                          <kyn-button\n                            class=\"action-button\"\n                            value=\"Secondary\"\n                            kind=${this.aiConnected ? 'outline-ai' : 'outline'}\n                            ?disabled=${this.secondaryDisabled}\n                            @click=${(e: Event) =>\n                              this._closeModal(e, 'secondary')}\n                          >\n                            ${this.secondaryButtonText}\n                          </kyn-button>\n                        `\n                      : null}\n                    ${this.hideCancelButton\n                      ? null\n                      : html`\n                          <kyn-button\n                            class=\"action-button\"\n                            value=\"cancel\"\n                            kind=\"tertiary\"\n                            @click=${(e: Event) =>\n                              this._closeModal(e, 'cancel')}\n                          >\n                            ${this.cancelText}\n                          </kyn-button>\n                        `}\n                    <!--\n            <div class=\"custom-actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n            -->\n                  </div>\n                </slot>\n              `\n            : null}\n        </form>\n      </dialog>\n    `;\n  }\n\n  private _openModal() {\n    this.open = true;\n  }\n\n  private _closeModal(e: Event, returnValue: string) {\n    if (\n      !this.beforeClose ||\n      (this.beforeClose && this.beforeClose(returnValue))\n    ) {\n      this.open = false;\n      this._dialog.returnValue = returnValue;\n      this._emitCloseEvent(e);\n    }\n  }\n\n  private _emitCloseEvent(e: Event) {\n    const event = new CustomEvent('on-close', {\n      detail: {\n        returnValue: this._dialog.returnValue,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _emitOpenEvent() {\n    const event = new CustomEvent('on-open');\n    this.dispatchEvent(event);\n  }\n\n  override updated(changedProps: any) {\n    if (changedProps.has('open')) {\n      if (this.open) {\n        this._dialog.showModal();\n        this._emitOpenEvent();\n      } else {\n        this._dialog.close();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-modal': Modal;\n  }\n}\n"],"names":["Modal","LitElement","constructor","this","open","size","titleText","labelText","okText","cancelText","destructive","okDisabled","secondaryDisabled","hideFooter","secondaryButtonText","showSecondaryButton","hideCancelButton","closeText","aiConnected","disableScroll","render","classes","modal","html","_openModal","classMap","e","_closeModal","unsafeSVG","closeIcon","returnValue","beforeClose","_dialog","_emitCloseEvent","event","CustomEvent","detail","origEvent","dispatchEvent","_emitOpenEvent","updated","changedProps","has","showModal","close","styles","ModalScss","css","__decorate","property","type","Boolean","prototype","String","attribute","query","reflect","customElement"],"mappings":"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"}

package/components/reusable/toggleButton/toggleButton.d.ts

@@ -30,7 +30,7 @@ export declare class ToggleButton extends ToggleButton_base {
     _inputEl: HTMLInputElement;
     render(): import("lit").TemplateResult<1>;
     private handleChange;
-    private _validate;
+    private handleKeyDown;
     updated(changedProps: any): void;
 }
 declare global {

package/components/reusable/toggleButton/toggleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggleButton.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/toggleButton/toggleButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;AAKvC;;;;GAIG;AACH,qBACa,YAAa,SAAQ,iBAAqB;IACrD,OAAgB,MAAM,MAAoB;IAE1C,kBAAkB;IAElB,KAAK,SAAM;IAEX,8BAA8B;IAE9B,OAAO,UAAS;IAEhB,0BAA0B;IAE1B,WAAW,SAAQ;IAEnB,4BAA4B;IAE5B,aAAa,SAAS;IAEtB,gCAAgC;IAEhC,KAAK,UAAS;IAEd,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,mDAAmD;IAEnD,OAAO,UAAS;IAEhB,gCAAgC;IAEhC,SAAS,UAAS;IAElB;;;OAGG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAEnB,MAAM;IAgCf,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,SAAS;IA0BR,OAAO,CAAC,YAAY,EAAE,GAAG;CAcnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}
+{"version":3,"file":"toggleButton.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/toggleButton/toggleButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;AAKvC;;;;GAIG;AACH,qBACa,YAAa,SAAQ,iBAAqB;IACrD,OAAgB,MAAM,MAAoB;IAE1C,kBAAkB;IAElB,KAAK,SAAM;IAEX,8BAA8B;IAE9B,OAAO,UAAS;IAEhB,0BAA0B;IAE1B,WAAW,SAAQ;IAEnB,4BAA4B;IAE5B,aAAa,SAAS;IAEtB,gCAAgC;IAEhC,KAAK,UAAS;IAEd,+BAA+B;IAE/B,QAAQ,UAAS;IAEjB,mDAAmD;IAEnD,OAAO,UAAS;IAEhB,gCAAgC;IAEhC,SAAS,UAAS;IAElB;;;OAGG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAEnB,MAAM;IAuCf,OAAO,CAAC,YAAY,CAWlB;IAEF,OAAO,CAAC,aAAa,CAanB;IAEO,OAAO,CAAC,YAAY,EAAE,GAAG;CAQnC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}

package/components/reusable/toggleButton/toggleButton.js

@@ -473,6 +473,22 @@ textarea:not([disabled])[invalid] {
   display: inline-block;
 }
 
+.toggle-button:has(input:focus-visible) {
+  outline: 3px solid var(--kd-border-variants-focus);
+  outline-offset: 2px;
+}
+
+input[type=checkbox][role=switch]:focus-visible + .status-text {
+  outline: 3px solid var(--kd-border-variants-focus);
+  outline-offset: 2px;
+}
+
+input:focus-visible:not(:hover),
+input:focus-visible:hover {
+  outline: 3px solid var(--kd-color-border-variants-focus);
+  outline-offset: 2px;
+}
+
 .wrapper {
   display: flex;
   align-items: center;
@@ -486,10 +502,6 @@ textarea:not([disabled])[invalid] {
   color: var(--kd-color-text-link-level-disabled);
 }
 
-label {
-  display: block;
-}
-
 input {
   -webkit-appearance: none;
   appearance: none;
@@ -517,27 +529,15 @@ input:hover {
 input:hover:before {
   background-color: var(--kd-color-background-ui-hollow-hover);
 }
-input:active {
-  background-color: var(--kd-color-background-button-web-default);
-}
-input:active:before {
-  background-color: var(--kd-color-background-ui-hollow-default);
-}
-input:active:hover {
+input:active, input:active:hover {
   background-color: var(--kd-color-background-button-web-default);
 }
-input:active:hover:before {
+input:active:before, input:active:hover:before {
   background-color: var(--kd-color-background-ui-hollow-default);
 }
-input:focus-visible:not(:hover) {
-  outline-color: var(--kd-color-border-variants-focus);
-}
 input:focus-visible:not(:hover):before {
   background-color: var(--kd-color-background-ui-hollow-default);
 }
-input:focus-visible:hover {
-  outline-color: var(--kd-color-border-variants-focus);
-}
 input:focus-visible:hover:before {
   background-color: var(--kd-color-background-ui-hollow-hover);
 }
@@ -559,22 +559,10 @@ input:checked:active {
 input:checked:active:before {
   background-color: var(--kd-color-background-ui-hollow-default);
 }
-input[disabled] {
-  background-color: var(--kd-color-states-disabled);
-}
-input[disabled]:before {
-  background-color: var(--kd-color-background-ui-hollow-default);
-}
-input[disabled]:hover {
-  background-color: var(--kd-color-states-disabled);
-}
-input[disabled]:hover:before {
-  background-color: var(--kd-color-background-ui-hollow-default);
-}
-input[disabled]:active {
+input[disabled], input[disabled]:hover, input[disabled]:active {
   background-color: var(--kd-color-states-disabled);
 }
-input[disabled]:active:before {
+input[disabled]:before, input[disabled]:hover:before, input[disabled]:active:before {
   background-color: var(--kd-color-background-ui-hollow-default);
 }
 input.size--sm {
@@ -594,9 +582,6 @@ input.size--sm:checked:before {
   content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgOCA4IiBmaWxsPSIjMDBBRjQxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik02LjI0MDA4IDIuMjQwMDFMMy4yMDAwOCA1LjI4MDAxTDEuNDQwMDggMy41MjAwMUwxLjA4MDA4IDMuODgwMDFMMi44NDAwOCA1LjY0MDAxTDMuMjAwMDggNi4wMDAwMUw2LjYwMDA4IDIuNjAwMDFMNi4yNDAwOCAyLjI0MDAxWiIgLz4KPC9zdmc+IA==");
   background-color: var(--kd-color-background-ui-hollow-default);
   transform: translateX(16px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
   line-height: 0;
 }
 input.size--sm:checked:hover:before {
@@ -604,33 +589,37 @@ input.size--sm:checked:hover:before {
 }
 input.size--sm[disabled]:checked:before {
   content: "";
-}`;let c=class extends(d(l)){constructor(){super(...arguments),this.label="",this.checked=!1,this.checkedText="On",this.uncheckedText="Off",this.small=!1,this.disabled=!1,this.reverse=!1,this.hideLabel=!1}render(){return a`
+}`;let s=class extends(d(l)){constructor(){super(...arguments),this.label="",this.checked=!1,this.checkedText="On",this.uncheckedText="Off",this.small=!1,this.disabled=!1,this.reverse=!1,this.hideLabel=!1,this.handleChange=e=>{const t=e.target;this.checked=t.checked,this._internals.setFormValue(this.checked?this.value:null),this.dispatchEvent(new CustomEvent("on-change",{detail:{checked:this.checked,value:this.value,origEvent:e},bubbles:!0,composed:!0}))},this.handleKeyDown=e=>{"Space"!==e.code&&" "!==e.key||(e.preventDefault(),this.checked=!this.checked,this._internals.setFormValue(this.checked?this.value:null),this.dispatchEvent(new CustomEvent("on-change",{detail:{checked:this.checked,value:this.value,origEvent:e},bubbles:!0,composed:!0})))}}render(){const e=this.name,t=`${e}-status`;return a`
       <div class="toggle-button" ?disabled=${this.disabled}>
-        <label
-          class="label-text  ${this.hideLabel?"sr-only":""}"
-          for=${this.name}
-        >
-          <span>${this.label}</span>
+        <label class="label-text ${this.hideLabel?"sr-only":""}" for=${e}>
+          ${this.label}
           <slot name="tooltip"></slot>
         </label>
 
         <div class="wrapper ${this.reverse?"reverse":""}">
           <input
-            class="${this.small?"size--sm":""}"
+            id=${e}
+            class=${this.small?"size--sm":""}
             type="checkbox"
             name=${this.name}
-            id=${this.name}
+            role="switch"
+            aria-checked=${this.checked}
+            aria-describedby=${t}
             value=${this.value}
             .checked=${this.checked}
-            ?checked=${this.checked}
             ?disabled=${this.disabled}
-            @change=${e=>this.handleChange(e)}
+            @change=${this.handleChange}
+            @keydown=${this.handleKeyDown}
           />
 
-          <span class="status-text">
+          <span id=${t} class="label-text sr-only">
+            ${this.checked?this.checkedText:this.uncheckedText}
+          </span>
+
+          <span aria-hidden="true" class="status-text">
             ${this.checked?this.checkedText:this.uncheckedText}
           </span>
         </div>
       </div>
-    `}handleChange(e){this.checked=e.target.checked;const t=new CustomEvent("on-change",{detail:{checked:e.target.checked,value:this.value,origEvent:e}});this.dispatchEvent(t)}_validate(e,t){const i=""!==this.invalidText?{...this._inputEl.validity,customError:!0}:this._inputEl.validity,o=""!==this.invalidText?this.invalidText:this._inputEl.validationMessage;this._internals.setValidity(i,o,this._inputEl),e&&(this._internalValidationMsg=this._inputEl.validationMessage),t&&this._internals.reportValidity()}updated(e){this._onUpdated(e),e.has("checked")&&this._internals.setFormValue(this.checked?this.value:null)}};c.styles=n,e([t({type:String})],c.prototype,"label",void 0),e([t({type:Boolean})],c.prototype,"checked",void 0),e([t({type:String})],c.prototype,"checkedText",void 0),e([t({type:String})],c.prototype,"uncheckedText",void 0),e([t({type:Boolean})],c.prototype,"small",void 0),e([t({type:Boolean})],c.prototype,"disabled",void 0),e([t({type:Boolean})],c.prototype,"reverse",void 0),e([t({type:Boolean})],c.prototype,"hideLabel",void 0),e([i("input")],c.prototype,"_inputEl",void 0),c=e([o("kyn-toggle-button")],c);export{c as ToggleButton};
+    `}updated(e){this._onUpdated(e),e.has("checked")&&this._internals.setFormValue(this.checked?this.value:null)}};s.styles=n,e([t({type:String})],s.prototype,"label",void 0),e([t({type:Boolean,reflect:!0})],s.prototype,"checked",void 0),e([t({type:String})],s.prototype,"checkedText",void 0),e([t({type:String})],s.prototype,"uncheckedText",void 0),e([t({type:Boolean,reflect:!0})],s.prototype,"small",void 0),e([t({type:Boolean,reflect:!0})],s.prototype,"disabled",void 0),e([t({type:Boolean})],s.prototype,"reverse",void 0),e([t({type:Boolean})],s.prototype,"hideLabel",void 0),e([i("input")],s.prototype,"_inputEl",void 0),s=e([o("kyn-toggle-button")],s);export{s as ToggleButton};
 //# sourceMappingURL=toggleButton.js.map

package/components/reusable/toggleButton/toggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggleButton.js","sources":["../../../../src/components/reusable/toggleButton/toggleButton.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport ToggleButtonScss from './toggleButton.scss';\n\n/**\n * Toggle Button.\n * @fires on-change - Captures the change event and emits the selected value and original event details.\n * @slot tooltip - Slot for tooltip.\n */\n@customElement('kyn-toggle-button')\nexport class ToggleButton extends FormMixin(LitElement) {\n  static override styles = ToggleButtonScss;\n\n  /** Label text. */\n  @property({ type: String })\n  label = '';\n\n  /** Checkbox checked state. */\n  @property({ type: Boolean })\n  checked = false;\n\n  /** Checked state text. */\n  @property({ type: String })\n  checkedText = 'On';\n\n  /** Unchecked state text. */\n  @property({ type: String })\n  uncheckedText = 'Off';\n\n  /** Option to use small size. */\n  @property({ type: Boolean })\n  small = false;\n\n  /** Checkbox disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Reverse UI element order, label on the left. */\n  @property({ type: Boolean })\n  reverse = false;\n\n  /** Hides the label visually. */\n  @property({ type: Boolean })\n  hideLabel = false;\n\n  /**\n   * Queries the <input> DOM element.\n   * @internal\n   */\n  @query('input')\n  _inputEl!: HTMLInputElement;\n\n  override render() {\n    return html`\n      <div class=\"toggle-button\" ?disabled=${this.disabled}>\n        <label\n          class=\"label-text  ${this.hideLabel ? 'sr-only' : ''}\"\n          for=${this.name}\n        >\n          <span>${this.label}</span>\n          <slot name=\"tooltip\"></slot>\n        </label>\n\n        <div class=\"wrapper ${this.reverse ? 'reverse' : ''}\">\n          <input\n            class=\"${this.small ? 'size--sm' : ''}\"\n            type=\"checkbox\"\n            name=${this.name}\n            id=${this.name}\n            value=${this.value}\n            .checked=${this.checked}\n            ?checked=${this.checked}\n            ?disabled=${this.disabled}\n            @change=${(e: any) => this.handleChange(e)}\n          />\n\n          <span class=\"status-text\">\n            ${this.checked ? this.checkedText : this.uncheckedText}\n          </span>\n        </div>\n      </div>\n    `;\n  }\n\n  private handleChange(e: any) {\n    this.checked = e.target.checked;\n    // emit selected value, bubble so it can be captured by the checkbox group\n    const event = new CustomEvent('on-change', {\n      detail: {\n        checked: e.target.checked,\n        value: this.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // get validity state from inputEl, combine customError flag if invalidText is provided\n    const Validity =\n      this.invalidText !== ''\n        ? { ...this._inputEl.validity, customError: true }\n        : this._inputEl.validity;\n    // set validationMessage to invalidText if present, otherwise use inputEl validationMessage\n    const ValidationMessage =\n      this.invalidText !== ''\n        ? this.invalidText\n        : this._inputEl.validationMessage;\n\n    // set validity on custom element, anchor to inputEl\n    this._internals.setValidity(Validity, ValidationMessage, this._inputEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg = this._inputEl.validationMessage;\n    }\n\n    // focus the form field to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  override updated(changedProps: any) {\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('checked')) {\n      // set form data value\n      this._internals.setFormValue(this.checked ? this.value : null);\n    }\n  }\n\n  // private _handleFormdata(e: any) {\n  //   if (this.checked) {\n  //     e.formData.append(this.name, this.value);\n  //   }\n  // }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-toggle-button': ToggleButton;\n  }\n}\n"],"names":["ToggleButton","FormMixin","LitElement","constructor","this","label","checked","checkedText","uncheckedText","small","disabled","reverse","hideLabel","render","html","name","value","e","handleChange","target","event","CustomEvent","detail","origEvent","dispatchEvent","_validate","interacted","report","Validity","invalidText","_inputEl","validity","customError","ValidationMessage","validationMessage","_internals","setValidity","_internalValidationMsg","reportValidity","updated","changedProps","_onUpdated","has","setFormValue","styles","ToggleButtonScss","__decorate","property","type","String","prototype","Boolean","query","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAWa,IAAAA,EAAN,cAA2BC,EAAUC,IAArC,WAAAC,uBAKLC,KAAKC,MAAG,GAIRD,KAAOE,SAAG,EAIVF,KAAWG,YAAG,KAIdH,KAAaI,cAAG,MAIhBJ,KAAKK,OAAG,EAIRL,KAAQM,UAAG,EAIXN,KAAOO,SAAG,EAIVP,KAASQ,WAAG,CA8Fb,CArFU,MAAAC,GACP,OAAOC,CAAI;6CAC8BV,KAAKM;;+BAEnBN,KAAKQ,UAAY,UAAY;gBAC5CR,KAAKW;;kBAEHX,KAAKC;;;;8BAIOD,KAAKO,QAAU,UAAY;;qBAEpCP,KAAKK,MAAQ,WAAa;;mBAE5BL,KAAKW;iBACPX,KAAKW;oBACFX,KAAKY;uBACFZ,KAAKE;uBACLF,KAAKE;wBACJF,KAAKM;sBACNO,GAAWb,KAAKc,aAAaD;;;;cAItCb,KAAKE,QAAUF,KAAKG,YAAcH,KAAKI;;;;KAKlD,CAEO,YAAAU,CAAaD,GACnBb,KAAKE,QAAUW,EAAEE,OAAOb,QAExB,MAAMc,EAAQ,IAAIC,YAAY,YAAa,CACzCC,OAAQ,CACNhB,QAASW,EAAEE,OAAOb,QAClBU,MAAOZ,KAAKY,MACZO,UAAWN,KAGfb,KAAKoB,cAAcJ,EACpB,CAEO,SAAAK,CAAUC,EAAqBC,GAErC,MAAMC,EACiB,KAArBxB,KAAKyB,YACD,IAAKzB,KAAK0B,SAASC,SAAUC,aAAa,GAC1C5B,KAAK0B,SAASC,SAEdE,EACiB,KAArB7B,KAAKyB,YACDzB,KAAKyB,YACLzB,KAAK0B,SAASI,kBAGpB9B,KAAK+B,WAAWC,YAAYR,EAAUK,EAAmB7B,KAAK0B,UAG1DJ,IACFtB,KAAKiC,uBAAyBjC,KAAK0B,SAASI,mBAI1CP,GACFvB,KAAK+B,WAAWG,gBAEnB,CAEQ,OAAAC,CAAQC,GACfpC,KAAKqC,WAAWD,GAEZA,EAAaE,IAAI,YAEnBtC,KAAK+B,WAAWQ,aAAavC,KAAKE,QAAUF,KAAKY,MAAQ,KAE5D,GAvHehB,EAAM4C,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACPjD,EAAAkD,UAAA,aAAA,GAIXJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFnD,EAAAkD,UAAA,eAAA,GAIhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACCjD,EAAAkD,UAAA,mBAAA,GAInBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACIjD,EAAAkD,UAAA,qBAAA,GAItBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACJnD,EAAAkD,UAAA,aAAA,GAIdJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACDnD,EAAAkD,UAAA,gBAAA,GAIjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACFnD,EAAAkD,UAAA,eAAA,GAIhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACAnD,EAAAkD,UAAA,iBAAA,GAOlBJ,EAAA,CADCM,EAAM,UACqBpD,EAAAkD,UAAA,gBAAA,GAxCjBlD,EAAY8C,EAAA,CADxBO,EAAc,sBACFrD"}
+{"version":3,"file":"toggleButton.js","sources":["../../../../src/components/reusable/toggleButton/toggleButton.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport ToggleButtonScss from './toggleButton.scss';\n\n/**\n * Toggle Button.\n * @fires on-change - Captures the change event and emits the selected value and original event details.\n * @slot tooltip - Slot for tooltip.\n */\n@customElement('kyn-toggle-button')\nexport class ToggleButton extends FormMixin(LitElement) {\n  static override styles = ToggleButtonScss;\n\n  /** Label text. */\n  @property({ type: String })\n  label = '';\n\n  /** Checkbox checked state. */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /** Checked state text. */\n  @property({ type: String })\n  checkedText = 'On';\n\n  /** Unchecked state text. */\n  @property({ type: String })\n  uncheckedText = 'Off';\n\n  /** Option to use small size. */\n  @property({ type: Boolean, reflect: true })\n  small = false;\n\n  /** Checkbox disabled state. */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Reverse UI element order, label on the left. */\n  @property({ type: Boolean })\n  reverse = false;\n\n  /** Hides the label visually. */\n  @property({ type: Boolean })\n  hideLabel = false;\n\n  /**\n   * Queries the <input> DOM element.\n   * @internal\n   */\n  @query('input')\n  _inputEl!: HTMLInputElement;\n\n  override render() {\n    const id = this.name;\n    const statusId = `${id}-status`;\n\n    return html`\n      <div class=\"toggle-button\" ?disabled=${this.disabled}>\n        <label class=\"label-text ${this.hideLabel ? 'sr-only' : ''}\" for=${id}>\n          ${this.label}\n          <slot name=\"tooltip\"></slot>\n        </label>\n\n        <div class=\"wrapper ${this.reverse ? 'reverse' : ''}\">\n          <input\n            id=${id}\n            class=${this.small ? 'size--sm' : ''}\n            type=\"checkbox\"\n            name=${this.name}\n            role=\"switch\"\n            aria-checked=${this.checked}\n            aria-describedby=${statusId}\n            value=${this.value}\n            .checked=${this.checked}\n            ?disabled=${this.disabled}\n            @change=${this.handleChange}\n            @keydown=${this.handleKeyDown}\n          />\n\n          <span id=${statusId} class=\"label-text sr-only\">\n            ${this.checked ? this.checkedText : this.uncheckedText}\n          </span>\n\n          <span aria-hidden=\"true\" class=\"status-text\">\n            ${this.checked ? this.checkedText : this.uncheckedText}\n          </span>\n        </div>\n      </div>\n    `;\n  }\n\n  private handleChange = (e: Event): void => {\n    const input = e.target as HTMLInputElement;\n    this.checked = input.checked;\n    this._internals.setFormValue(this.checked ? this.value : null);\n    this.dispatchEvent(\n      new CustomEvent('on-change', {\n        detail: { checked: this.checked, value: this.value, origEvent: e },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  private handleKeyDown = (e: KeyboardEvent): void => {\n    if (e.code === 'Space' || e.key === ' ') {\n      e.preventDefault();\n      this.checked = !this.checked;\n      this._internals.setFormValue(this.checked ? this.value : null);\n      this.dispatchEvent(\n        new CustomEvent('on-change', {\n          detail: { checked: this.checked, value: this.value, origEvent: e },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  };\n\n  override updated(changedProps: any) {\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('checked')) {\n      // set form data value\n      this._internals.setFormValue(this.checked ? this.value : null);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-toggle-button': ToggleButton;\n  }\n}\n"],"names":["ToggleButton","FormMixin","LitElement","constructor","this","label","checked","checkedText","uncheckedText","small","disabled","reverse","hideLabel","handleChange","e","input","target","_internals","setFormValue","value","dispatchEvent","CustomEvent","detail","origEvent","bubbles","composed","handleKeyDown","code","key","preventDefault","render","id","name","statusId","html","updated","changedProps","_onUpdated","has","styles","ToggleButtonScss","__decorate","property","type","String","prototype","Boolean","reflect","query","customElement"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "2.36.0",
+  "version": "2.36.2",
   "description": "Shidoka Web Components for Applications",
   "license": "MIT",
   "main": "index.js",